Rentang kemampuan perangkat yang dapat terhubung ke web kini lebih luas daripada sebelumnya. Aplikasi web yang sama yang disajikan ke komputer desktop kelas atas juga dapat ditayangkan ke ponsel, smartwatch, atau tablet berdaya rendah, dan mungkin sangat menantang untuk menciptakan pengalaman menarik yang bekerja mulus di perangkat apa pun.
Device Memory API adalah fitur platform
web baru yang bertujuan untuk membantu developer web menangani lanskap perangkat
modern. Kode ini menambahkan properti hanya baca ke objek navigator,
navigator.deviceMemory, yang menampilkan jumlah RAM yang dimiliki perangkat dalam
gigabyte, yang dibulatkan ke bawah ke pangkat dua terdekat. API tersebut juga menampilkan Header Client Hints, Device-Memory, yang melaporkan nilai yang sama.
Device Memory API memberi developer kemampuan untuk melakukan dua hal utama:
- Buat keputusan runtime tentang resource yang akan ditayangkan berdasarkan nilai memori perangkat yang ditampilkan (misalnya, menayangkan versi "ringan" aplikasi kepada pengguna di perangkat bermemori rendah).
- Laporkan nilai ini ke layanan analisis sehingga Anda dapat lebih memahami korelasi memori perangkat dengan perilaku pengguna, konversi, atau metrik lainnya yang penting bagi bisnis Anda.
Menyesuaikan konten secara dinamis berdasarkan memori perangkat
Jika Anda menjalankan server web Anda sendiri dan dapat mengubah logika yang menyalurkan resource, Anda dapat merespons permintaan yang berisi Header Client Hints Device-Memory.
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
Dengan teknik ini, Anda dapat membuat satu atau beberapa versi skrip
aplikasi dan merespons permintaan dari klien secara bersyarat berdasarkan
nilai yang ditetapkan di header Device-Memory. Versi ini tidak perlu berisi
kode yang sama sekali berbeda (karena lebih sulit dikelola). Sering kali, versi "lite" hanya akan mengecualikan fitur yang mungkin mahal dan tidak penting
bagi pengalaman pengguna.
Menggunakan Header Petunjuk Klien
Untuk mengaktifkan header Device-Memory, tambahkan tag <meta> Petunjuk Klien ke <head> di dokumen Anda:
<meta http-equiv="Accept-CH" content="Device-Memory">
Atau, sertakan "Device-Memory" di header respons Accept-CH server Anda:
HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width
Kode ini akan memberi tahu browser untuk mengirim header Device-Memory dengan semua permintaan sub-resource
untuk halaman saat ini.
Dengan kata lain, setelah Anda menerapkan salah satu opsi di atas untuk situs Anda, jika pengguna berkunjung ke perangkat dengan RAM 0,5 GB, semua permintaan image, CSS, dan JavaScript dari halaman ini akan menyertakan header Device-Memory dengan nilai yang ditetapkan ke "0,5", dan server Anda dapat merespons permintaan tersebut sesuai keinginan Anda.
Misalnya, rute Express berikut menayangkan
skrip versi "ringan" jika header Device-Memory ditetapkan dan nilainya
kurang dari 1, atau menayangkan versi "lengkap" jika browser tidak mendukung
header Device-Memory atau nilainya adalah 1 atau lebih besar:
app.get('/static/js/:scriptId', (req, res) => {
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `scriptVersion` to "lite" if (and only if)
// `Device-Memory` isn't undefined and returns a number less than 1.
const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Respond with the file based on `scriptVersion` above.
res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});
Menggunakan JavaScript API
Dalam beberapa kasus (seperti pada server file statis atau CDN), Anda tidak akan dapat merespons permintaan berdasarkan header HTTP secara bersyarat. Dalam kasus ini, Anda dapat menggunakan JavaScript API untuk membuat permintaan kondisional pada kode JavaScript Anda.
Logika berikut ini mirip dengan rute Express di atas, tetapi logika ini secara dinamis menentukan URL skrip dalam logika sisi klien:
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';
const component = await import(`path/to/component.${componentVersion}.js`);
component.init();
Meskipun menayangkan secara kondisional versi berbeda dari komponen yang sama berdasarkan kemampuan perangkat adalah strategi yang baik, terkadang akan lebih baik untuk tidak menayangkan komponen sama sekali.
Dalam banyak kasus, komponen hanyalah peningkatan. Mereka menambahkan beberapa sentuhan yang bagus pada pengalaman, tetapi tidak diperlukan untuk fungsi inti aplikasi. Dalam kasus ini, sebaiknya jangan muat komponen tersebut sejak awal. Jika komponen yang dimaksudkan untuk meningkatkan pengalaman pengguna membuat aplikasi menjadi lambat atau tidak responsif, aplikasi tidak akan mencapai tujuannya.
Setiap keputusan yang Anda buat yang memengaruhi pengalaman pengguna, Anda harus mengukur dampaknya. Penting juga bagi Anda untuk memiliki gambaran yang jelas tentang performa aplikasi saat ini.
Memahami korelasi memori perangkat dengan perilaku pengguna untuk versi aplikasi saat ini akan memberikan informasi yang lebih baik terkait tindakan yang perlu dilakukan, dan memberikan dasar pengukuran untuk mengukur keberhasilan perubahan mendatang.
Melacak memori perangkat dengan analisis
Device Memory API masih baru, dan sebagian besar penyedia analisis tidak melacaknya secara default. Untungnya, sebagian besar penyedia analisis memberi Anda cara untuk melacak data kustom (misalnya, Google Analytics memiliki fitur yang disebut Dimensi Kustom), yang dapat Anda gunakan untuk melacak memori perangkat pada perangkat pengguna Anda.
Menggunakan dimensi memori perangkat kustom
Penggunaan dimensi kustom di Google Analytics merupakan proses dua langkah.
- Menyiapkan dimensi kustom di Google Analytics.
- Perbarui kode pelacakan Anda ke
setnilai memori perangkat untuk dimensi kustom yang baru saja Anda buat.
Saat membuat dimensi kustom, beri nama "Device Memory" dan pilih cakupan "sesi" karena nilainya tidak akan berubah selama sesi penjelajahan pengguna:
Berikutnya, perbarui kode pelacakan Anda. Berikut adalah contoh dari bagaimana daftar tersebut akan terlihat. Perhatikan bahwa untuk browser yang tidak mendukung Device Memory API, nilai dimensinya adalah "(not set)".
// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');
// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');
// Do any other other custom setup you want...
// Send the initial pageview.
ga('send', 'pageview');
Pelaporan data Memori Perangkat
Setelah dimensi memori perangkat adalah
set di
objek pelacak, semua data yang Anda kirim ke Google Analytics akan menyertakan nilai ini.
Hal ini akan memungkinkan Anda mengelompokkan metrik yang Anda inginkan (misalnya waktu pemuatan halaman, rasio penyelesaian sasaran, dll.) menurut memori perangkat untuk melihat apakah ada korelasi.
Karena memori perangkat adalah dimensi kustom, bukan dimensi bawaan, Anda tidak akan melihatnya dalam laporan standar mana pun. Untuk mengakses data ini, Anda harus membuat laporan kustom. Misalnya, konfigurasi untuk laporan kustom yang membandingkan waktu pemuatan berdasarkan memori perangkat mungkin akan terlihat seperti ini:
Dan laporan yang dihasilkan mungkin terlihat seperti ini:
Setelah mengumpulkan data memori perangkat dan memiliki dasar pengukuran terkait penggunaan aplikasi oleh pengguna di semua rentang spektrum memori, Anda dapat bereksperimen dengan menyajikan resource yang berbeda kepada pengguna yang berbeda-beda (menggunakan teknik yang dijelaskan di bagian atas). Setelah itu, Anda dapat melihat hasilnya dan melihat apakah hasilnya meningkat.
Menyelesaikan
Postingan ini menguraikan cara menggunakan Device Memory API untuk menyesuaikan aplikasi Anda dengan kemampuan perangkat pengguna, dan menunjukkan cara mengukur pengalaman pengguna tersebut dengan aplikasi Anda.
Meskipun postingan ini berfokus pada Device Memory API, sebagian besar teknik yang dijelaskan di sini dapat diterapkan ke API apa pun yang melaporkan kemampuan perangkat atau kondisi jaringan.
Seiring lanskap perangkat terus diperluas, developer web kini harus mempertimbangkan seluruh spektrum pengguna saat membuat keputusan yang memengaruhi pengalaman mereka menjadi makin penting.