Kini, cakupan kemampuan perangkat yang dapat terhubung ke web jauh lebih luas daripada sebelumnya. Aplikasi web yang sama yang disajikan ke komputer komputer desktop juga dapat disajikan ke ponsel, jam tangan, atau tablet bertenaga rendah, dan itu bisa sangat menantang untuk menciptakan pengalaman menarik yang berhasil lancar di perangkat apa pun.
Device Memory API adalah web baru
fitur platform yang bertujuan membantu developer web menangani perangkat modern
lanskap. Metode ini menambahkan properti hanya baca ke objek navigator
,
navigator.deviceMemory
, yang menampilkan jumlah RAM yang dimiliki perangkat
gigabita, dibulatkan ke
bawah pangkat dua terdekat. API ini juga memiliki
Header Client Hint,
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 resource yang ditampilkan nilai memori perangkat (mis. menayangkan versi "lite" aplikasi kepada pengguna di perangkat dengan memori rendah).
- Laporkan nilai ini ke layanan analisis agar Anda dapat lebih memahami cara memori perangkat berkolerasi dengan perilaku pengguna, konversi, atau metrik lainnya penting bagi bisnis Anda.
Menyesuaikan konten secara dinamis berdasarkan memori perangkat
Jika Anda menjalankan server web Anda
sendiri dan dapat mengubah logika yang
yang melayani resource, Anda dapat secara kondisional merespons permintaan yang berisi
Device-Memory
Header Petunjuk Klien.
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 aplikasi
skrip dan menanggapi 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). Seringkali,
"ringan" hanya akan mengecualikan fitur yang mungkin mahal dan tidak kritis
mengenai pengalaman pengguna.
Menggunakan Header Client Hints
Untuk mengaktifkan header Device-Memory
, tambahkan tag <meta>
Petunjuk Klien
ke <head>
pada dokumen Anda:
<meta http-equiv="Accept-CH" content="Device-Memory">
Atau sertakan "Memori Perangkat" 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
Tindakan ini akan memberi tahu browser untuk mengirim header Device-Memory
dengan semua sub-resource
untuk halaman saat ini.
Dengan kata lain, setelah Anda menerapkan salah satu opsi di atas untuk
jika pengguna berkunjung di perangkat dengan RAM 0, 5 GB, semua gambar, CSS, dan
Permintaan JavaScript dari halaman ini akan menyertakan header Device-Memory
dengan
nilai yang diatur ke "0.5", dan server Anda
dapat merespons permintaan tersebut
jika cocok.
Misalnya, rute Ekspres berikut melayani rute
"ringan" versi skrip jika header Device-Memory
disetel dan nilainya adalah
kurang dari 1, atau menayangkan "penuh" 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 dengan server file statis atau CDN), Anda tidak dapat merespons permintaan berdasarkan header HTTP secara bersyarat. Dalam kasus ini, Anda dapat menggunakan JavaScript API untuk membuat permintaan kondisional dalam kode JavaScript Anda.
Logika berikut 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 menyajikan secara bersyarat versi yang berbeda dari komponen yang sama berdasarkan kemampuan perangkat adalah strategi yang baik, terkadang lebih baik untuk tidak menyajikan komponen sama sekali.
Dalam banyak kasus, komponen sepenuhnya merupakan peningkatan kualitas. Mereka menambahkan beberapa sentuhan bagus pada pengalaman, tetapi tidak diwajibkan untuk fungsi inti aplikasi. Di beberapa kasus ini, mungkin lebih baik untuk tidak memuat komponen semacam itu sejak awal. Jika komponen yang dimaksudkan untuk meningkatkan pengalaman pengguna membuat aplikasi menjadi lambat atau tidak responsif, komputer tidak mencapai tujuannya.
Apa pun keputusan yang Anda buat yang mempengaruhi pengalaman pengguna, Anda harus benar-benar mengukur dampaknya. Penting juga bagi Anda untuk memiliki gambaran yang jelas tentang bagaimana performa aplikasi Anda hari ini.
Memahami bagaimana memori perangkat berkolerasi dengan perilaku pengguna untuk saat ini aplikasi Anda akan menginformasikan dengan lebih baik tindakan yang perlu diambil, dan akan memberi dasar bagi Anda untuk mengukur keberhasilan perubahan di masa depan.
Melacak memori perangkat dengan analisis
Device Memory API masih baru, dan sebagian besar penyedia analisis tidak melacaknya secara {i>default<i}. Untungnya, sebagian besar penyedia analitik memberi Anda cara untuk melacak (misalnya, Google Analytics memiliki fitur yang disebut Dimensi Kustom), yang dapat Anda untuk melacak memori perangkat bagi pengguna Anda perangkat.
Menggunakan dimensi memori perangkat kustom
Menggunakan dimensi kustom di Google Analytics adalah proses dua langkah.
- Siapkan dimensi kustom di Google Analytics.
- Perbarui kode pelacakan Anda ke
set
nilai memori perangkat untuk dimensi kustom yang baru saja Anda buat.
Saat membuat dimensi kustom, beri nama "Memori Perangkat" dan pilih cakupan "sesi" karena nilainya tidak akan berubah selama sesi penjelajahan pengguna:
Selanjutnya, perbarui kode pelacakan Anda. Berikut adalah contoh tampilannya. Perhatikan bahwa untuk browser yang tidak mendukung Device Memory API, nilainya akan menjadi "(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
set
di
pelacak, semua data yang Anda kirim ke Google Analytics akan menyertakan nilai ini.
Laporan ini akan memungkinkan Anda mengelompokkan metrik apa pun yang Anda inginkan (mis. waktu muat halaman, rasio sasaran tercapai, dll.) menurut perangkat
memori untuk melihat
apakah ada korelasi.
Karena memori perangkat adalah dimensi kustom, bukan dimensi bawaan, Anda tidak akan melihatnya di laporan standar. Untuk mengakses data ini, Anda harus membuat laporan kustom. Misalnya, konfigurasi untuk laporan kustom yang membandingkan waktu pemuatan dengan memori perangkat akan terlihat seperti ini:
Laporan yang dihasilkan akan terlihat seperti ini:
Setelah Anda mengumpulkan data memori perangkat dan memiliki dasar pengukuran tentang menggunakan aplikasi di semua rentang spektrum memori, Anda dapat bereksperimen dengan menyajikan sumber daya yang berbeda kepada pengguna yang berbeda (menggunakan teknik yang dijelaskan di atas). Setelah itu, Anda akan dapat melihat hasilnya dan lihat apakah hasilnya telah meningkat.
Menyelesaikan
Postingan ini menguraikan cara menggunakan Device Memory API untuk menyesuaikan aplikasi Anda dengan kemampuan pengguna perangkat seluler, dan menunjukkan cara mengukur seberapa pengguna saat menggunakan aplikasi Anda.
Meskipun postingan ini berfokus pada Device Memory API, sebagian besar teknik yang dijelaskan di sini dapat diterapkan untuk API apa pun yang melaporkan kemampuan perangkat atau kondisi jaringan.
Ketika lanskap perangkat terus melebar, kita menjadi semakin penting untuk pengembang web mempertimbangkan seluruh spektrum pengguna ketika membuat keputusan yang mempengaruhi pengalaman mereka.