Chrome 108 memperkenalkan dua mode baru, Penghemat Memori dan Penghemat Energi, untuk memberi pengguna kontrol yang lebih besar atas cara Chrome menggunakan resource sistem mereka.
Meskipun mode baru ini utamanya terlihat oleh pengguna, mode tersebut memang memiliki beberapa implikasi yang penting untuk diperhatikan oleh developer web, karena mode tersebut berpotensi memengaruhi pengalaman pengguna situs Anda.
Postingan ini akan membahas potensi dampak mode baru ini dan apa yang dapat dilakukan developer web untuk memastikan mereka menghadirkan pengalaman terbaik.
Mode Penghemat Memori
Saat mode Penghemat Memori diaktifkan, Chrome akan secara proaktif menghapus tab yang tidak digunakan di latar belakang selama beberapa waktu. Tindakan ini akan mengosongkan memori untuk tab aktif serta aplikasi lain yang mungkin sedang berjalan. Pengguna dapat memerintahkan Chrome agar tidak menghapus tab untuk situs tertentu; namun, ini adalah preferensi pengguna dan bukan sesuatu yang dapat Anda kontrol sebagai pengembang.
Saat tab dihapus, judul dan faviconnya tetap muncul di tab setrip tetapi halaman akan hilang, persis seperti jika tab ditutup secara normal. Jika pengguna mengunjungi tab tersebut lagi, halaman akan otomatis dimuat ulang.
Untuk halaman konten murni, membuang dan memuat ulang tab kemungkinan tidak akan memengaruhi pengalaman pengguna, tetapi untuk situs yang kaya dan interaktif dengan alur pengguna yang kompleks, pemuatan ulang di tengah alur tersebut bisa sangat menjengkelkan jika situs tidak dapat memulihkan halaman ke tempat yang terakhir pengguna tinggalkan.
Menghapus tab untuk menghemat memori adalah hal yang telah dilakukan Chrome selama bertahun-tahun, tetapi hal ini hanya dilakukan dalam situasi saat sistem berada di bawah tekanan memori. Mengingat kejadiannya yang relatif jarang, developer web mungkin tidak menyadari kejadian itu sedang terjadi.
Mulai Chrome 108, penghapusan tab akan menjadi lebih umum, sehingga sangat penting bagi situs untuk dapat menangani kejadian ini dengan baik.
Praktik terbaik untuk menangani penghapusan tab
Menghapus tab bukanlah tantangan baru bagi developer web. Pengguna dapat memuat ulang halaman—baik secara sengaja maupun tidak sengaja—sebelum menyelesaikan tugasnya. Jadi, selalu penting bagi situs untuk menyimpan status pengguna sehingga mereka dapat memulihkannya jika pengguna keluar dan kembali.
Pertimbangan yang paling penting adalah apakah akan menyimpan status pengguna, tetapi kapan harus menyimpannya. Dan ini kuncinya karena tidak ada peristiwa yang diaktifkan saat tab dihapus, sehingga tidak ada cara bagi developer untuk bereaksi terhadap fakta bahwa hal itu terjadi. Sebagai gantinya, developer harus mengantisipasi kemungkinan ini dan mempersiapkan diri sejak awal.
Waktu terbaik untuk menyimpan status pengguna adalah:
- Secara berkala seiring perubahan status.
- Setiap kali tab berada di latar belakang (peristiwa
visibilitychange).
Waktu terburuk untuk menyimpan status adalah:
- Dalam callback peristiwa
beforeunload. - Dalam callback peristiwa
unload.
Ini adalah waktu terburuk untuk menyimpan status karena peristiwa ini sama sekali tidak dapat diandalkan dan tidak diaktifkan dalam banyak situasi—termasuk saat tab dihapus.
Anda dapat melihat diagram peristiwa Siklus Proses Halaman untuk melihat peristiwa yang diperkirakan akan diaktifkan saat halaman dihapus. Seperti yang dapat Anda lihat dari diagram tersebut, sebuah tab bisa berpindah dari jalur "tersembunyi" status menjadi "dibuang" status tanpa pengaktifan peristiwa.
Kenyataannya, setiap kali halaman berada dalam posisi "tersembunyi" , tidak ada jaminan bahwa peristiwa lain akan diaktifkan sebelum halaman dihapus oleh browser atau dihentikan oleh pengguna. Itulah sebabnya penting untuk selalu menyimpan status pengguna yang belum disimpan dalam peristiwa visibilitychange, karena Anda mungkin tidak mendapatkan kesempatan lain.
Kode berikut menguraikan beberapa contoh logika untuk mengantrekan status pengguna saat ini setiap kali berubah, atau segera jika pengguna mengalihkan penggunaan tab ke latar belakang atau keluar:
let state = {};
let hasUnstoredState = false;
function storeState() {
if (hasUnstoredState) {
// Store `state` to localStorage or IndexedDB...
}
hasUnstoredState = false;
}
export function updateState(newState) {
state = newState;
hasUnstoredState = true;
requestIdleCallback(storeState);
}
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
storeState();
}
});
Mendeteksi bahwa tab dihapus
Seperti yang disebutkan sebelumnya, tidak mungkin mendeteksi bahwa tab akan dihapus, tetapi ada kemungkinan untuk mendeteksi bahwa tab dihapus setelah pengguna kembali dan halaman dimuat ulang. Dalam situasi ini, properti document.wasDiscarded akan bernilai benar (true).
if (document.wasDiscarded) {
// The page was reloaded after a discard.
} else {
// The page was not reloaded after a discard.
}
Jika ingin memahami seberapa sering pengguna mengalami jenis situasi ini, Anda dapat mengonfigurasi alat analisis untuk mencatat informasi ini.
Misalnya, di Google Analytics, Anda dapat mengonfigurasi parameter peristiwa kustom yang akan memungkinkan Anda menentukan persentase tayangan halaman yang berasal dari tab yang dihapus:
gtag('config', 'G-XXXXXXXXXX', {
was_discarded: document.wasDiscarded,
});
Jika Anda adalah penyedia analisis, sebaiknya tambahkan dimensi ini ke produk Anda secara default.
Menguji situs dalam mode Penghemat Memori
Anda dapat menguji cara halaman menangani penghapusan dengan memuat halaman, lalu membuka chrome://discards di tab atau jendela terpisah.
Dari UI chrome://discards, Anda dapat menemukan tab yang ingin dihapus dari daftar, lalu mengklik Hapus Mendesak dari kolom Tindakan.
Tindakan ini akan menghapus tab, sehingga Anda dapat membukanya kembali dan memverifikasi bahwa halaman dimuat ulang ke keadaan yang sama seperti saat Anda meninggalkannya.
Perhatikan bahwa saat ini tidak ada cara untuk mengotomatiskan penghapusan tab melalui alat pengujian seperti webdriver atau puppeteer; namun, karena penghapusan dan pemulihan tab hampir sama dengan pemuatan ulang halaman, jika Anda menguji bahwa status pengguna dipulihkan setelah pemuatan ulang di tengah alur pengguna, kemungkinan itu juga akan berfungsi untuk penghapusan/pemulihan. Perbedaan utama antara keduanya adalah peristiwa beforeunload, pagehide, dan unload tidak diaktifkan saat tab dihapus, jadi selama Anda tidak mengandalkan peristiwa tersebut untuk mempertahankan status pengguna, Anda dapat menggunakan muat ulang untuk menguji perilaku hapus/pulihkan.
Mode Penghemat Energi
Jika mode Penghemat Energi diaktifkan, Chrome akan menghemat daya baterai dengan mengurangi kecepatan refresh tampilan, sehingga memengaruhi fidelitas scroll dan animasi serta kecepatan frame video.
Secara umum, developer tidak perlu melakukan apa pun untuk mendukung mode Penghemat Energi. API CSS dan JavaScript untuk animasi, transisi, dan requestAnimationFrame() akan otomatis menyesuaikan dengan perubahan kecepatan refresh tampilan saat mode ini diaktifkan.
Skenario utama saat mode ini dapat menimbulkan masalah adalah jika situs Anda menggunakan animasi berbasis JavaScript yang mengasumsikan kecepatan refresh tertentu untuk semua pengguna.
Misalnya, jika situs Anda menggunakan loop requestAnimationFrame() dan mengasumsikan bahwa tepat 16,67 milidetik akan berlalu di antara callback, animasi akan berjalan dua kali lebih lambat saat mode Penghemat Energi diaktifkan.
Perhatikan bahwa selalu bermasalah bagi developer untuk mengasumsikan kecepatan refresh default 60 Hz untuk semua pengguna, karena hal tersebut tidak berlaku di banyak perangkat saat ini.
Mengukur kecepatan refresh layar
Tidak ada API web khusus untuk mengukur kecepatan refresh tampilan, dan secara umum, mencoba melakukannya dengan API saat ini tidak direkomendasikan.
Developer terbaik yang dapat dilakukan dengan API yang ada adalah membandingkan stempel waktu antara callback requestAnimationFrame() yang berurutan. Meskipun cara ini biasanya berfungsi untuk memperkirakan kecepatan refresh pada waktu tertentu, tetapi tidak akan memberi tahu Anda kapan kecepatan refresh berubah. Untuk melakukannya, Anda harus terus menjalankan polling requestAnimationFrame(), yang menggagalkan sasaran penghematan energi atau masa pakai baterai bagi pengguna Anda.
Menguji situs Anda dalam mode Penghemat Energi
Salah satu cara untuk menguji situs Anda dalam mode Penghemat Energi adalah dengan mengaktifkan mode tersebut di setelan Chrome dan mengonfigurasinya agar berjalan saat perangkat Anda tidak terhubung ke sumber listrik.
Jika tidak ada perangkat yang dapat dilepas, Anda juga dapat mengaktifkan mode secara manual dengan mengikuti langkah-langkah berikut:
- Aktifkan tanda
chrome://flags/#battery-saver-mode-available. - Buka
chrome://discardslalu klik link Aktifkan/nonaktifkan mode penghemat baterai (penting: tanda#battery-saver-mode-availableharus diaktifkan agar link dapat berfungsi).
Setelah diaktifkan, Anda dapat berinteraksi dengan situs dan memverifikasi bahwa semuanya terlihat seperti seharusnya: misalnya animasi dan transisi berjalan dengan kecepatan yang diinginkan.
Ringkasan
Meskipun mode Penghemat Memori dan Penghemat Energi Chrome utamanya adalah fitur yang ditampilkan kepada pengguna, fitur tersebut memiliki implikasi bagi developer karena dapat berdampak negatif terhadap pengalaman mengunjungi situs Anda jika tidak ditangani dengan benar.
Secara umum, mode baru ini didesain dengan mempertimbangkan praktik terbaik developer yang sudah ada. Jika developer telah mengikuti praktik terbaik web yang sudah lama ada, situs mereka seharusnya tetap berfungsi dengan baik dengan mode baru ini.
Namun, jika situs Anda berisi salah satu praktik yang disebutkan dalam postingan ini, kemungkinan pengguna akan mengalami masalah yang hanya akan meningkat jika kedua mode tersebut diaktifkan.
Seperti biasa, cara terbaik untuk memastikan bahwa Anda memberikan pengalaman yang baik adalah dengan menguji situs Anda dengan kondisi yang sesuai dengan kondisi pengguna.