Yang perlu diketahui developer tentang mode Penghemat Memori dan Energi Chrome

Philip Walton

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 memiliki beberapa implikasi yang penting untuk diketahui oleh developer web, karena berpotensi memengaruhi pengalaman pengguna situs Anda.

Postingan ini akan membahas potensi efek dari mode baru tersebut dan apa yang dapat dilakukan developer web untuk memastikan mereka memberikan pengalaman terbaik.

Mode Penghemat Memori

Jika 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 membuang tab untuk situs tertentu; namun, ini adalah preferensi pengguna dan bukan sesuatu yang dapat Anda kontrol sebagai developer.

Saat tab dibuang, judul dan faviconnya masih muncul di tab setrip tetapi laman itu sendiri akan hilang, persis seperti jika tab telah ditutup secara normal. Jika pengguna membuka kembali tab tersebut, halaman akan dimuat ulang secara otomatis.

Untuk halaman yang sepenuhnya konten, 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.

Membuang tab untuk menghemat memori adalah sesuatu yang telah dilakukan Chrome selama bertahun-tahun, tetapi hanya dilakukan dalam situasi ketika sistem berada di bawah tekanan memori. Mengingat kejadian yang relatif jarang terjadi, developer web mungkin tidak menyadari hal itu telah terjadi.

Mulai Chrome 108, penghapusan tab akan menjadi lebih umum. Jadi, situs harus dapat menangani kejadian ini dengan baik.

Praktik terbaik untuk menangani penghapusan tab

Penghapusan tab bukanlah tantangan baru bagi developer web. Selalu ada kemungkinan bagi pengguna untuk memuat ulang halaman—baik secara sengaja atau tidak sengaja—sebelum menyelesaikan tugas mereka. Jadi, penting bagi situs untuk menyimpan status pengguna sehingga mereka dapat memulihkannya jika pengguna keluar dan kembali.

Pertimbangan utamanya bukan apakah akan menyimpan status pengguna, tetapi kapan akan menyimpannya. Hal ini penting karena tidak ada peristiwa yang aktif saat tab dibuang, sehingga tidak ada cara bagi developer untuk bereaksi terhadap fakta bahwa hal itu terjadi. Sebagai gantinya, developer perlu mengantisipasi kemungkinan ini dan mempersiapkan diri terlebih dahulu.

Waktu terbaik untuk menyimpan status pengguna adalah:

• Secara berkala sesuai perubahan status.
• Setiap kali tab berada di latar belakang (peristiwa visibilitychange).

Waktu terburuk untuk status penyimpanan adalah:

• Dalam callback peristiwa beforeunload.
• Dalam callback peristiwa unload.

Ini adalah waktu terburuk untuk menyimpan status karena peristiwa ini benar-benar tidak dapat diandalkan dan tidak diaktifkan dalam banyak situasi—termasuk saat tab dibuang.

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, tab dapat berubah dari status "tersembunyi" ke status "dibuang" tanpa mengaktifkan peristiwa.

Bahkan, kapan pun halaman dalam status "tersembunyi", tidak ada jaminan bahwa peristiwa lain akan aktif 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 mempertahankan status pengguna saat ini setiap kali status berubah, atau segera jika pengguna mengalihkan tab 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 telah dihapus

Seperti disebutkan sebelumnya, tidak mungkin mendeteksi bahwa tab akan dibuang, tetapi ada kemungkinan untuk mendeteksi bahwa tab dibuang 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 situasi seperti ini, Anda dapat mengonfigurasi alat analisis untuk memperoleh informasi ini.

Misalnya, di Google Analytics, Anda dapat mengonfigurasi parameter peristiwa kustom yang akan memungkinkan Anda menentukan persentase kunjungan halaman yang berasal dari penghapusan tab:

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 tersebut, lalu membuka chrome://discards di tab atau jendela terpisah.

Dari UI chrome://discards, Anda dapat menemukan tab yang ingin dihapus dari daftar, lalu mengklik Urgent Discard dari kolom Actions.

Tindakan ini akan menghapus tab, sehingga Anda dapat membukanya kembali dan memverifikasi bahwa halaman dimuat ulang ke status 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 penggunaan, kemungkinan juga akan berfungsi untuk penghapusan/pemulihan. Perbedaan utama antara keduanya adalah peristiwa beforeunload, pagehide, dan unload tidak diaktifkan saat tab dihapus, sehingga selama Anda tidak mengandalkan peristiwa tersebut untuk mempertahankan status pengguna, Anda dapat menggunakan pemuatan ulang untuk menguji perilaku penghapusan/pemulihan.

Mode Penghemat Energi

Jika mode Penghemat Energi diaktifkan, Chrome akan menghemat daya baterai dengan mengurangi kecepatan refresh layar, yang memengaruhi scroll dan fidelitas animasi serta kecepatan frame video.

Secara umum, developer tidak perlu melakukan apa pun untuk mendukung mode Penghemat Energi. CSS dan JavaScript API untuk animasi, transisi, dan requestAnimationFrame() akan otomatis menyesuaikan dengan perubahan pada kecepatan refresh tampilan saat mode ini diaktifkan.

Skenario utama yang dapat menimbulkan masalah bagi mode ini 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 Anda akan berjalan dua kali lebih lambat saat mode Penghemat Energi diaktifkan.

Perlu diperhatikan bahwa developer selalu bermasalah 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 dapat melakukannya dengan API yang sudah ada adalah membandingkan stempel waktu di antara callback requestAnimationFrame() yang berurutan. Meskipun berfungsi dalam sebagian besar kasus untuk memperkirakan kecepatan refresh pada titik waktu tertentu, fitur ini tidak memberi tahu Anda kapan kecepatan refresh berubah. Untuk melakukannya, Anda harus terus menjalankan polling requestAnimationFrame(). Hal ini membuat Anda tidak dapat menghemat energi atau masa pakai baterai.

Menguji situs 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 dicolokkan ke sumber listrik.

Jika tidak memiliki perangkat yang dapat dicabut dari sumber listrik, Anda juga dapat mengaktifkan mode secara manual dengan mengikuti langkah-langkah berikut:

1. Aktifkan flag chrome://flags/#battery-saver-mode-available.
2. Buka chrome://discards, lalu klik link Aktifkan/nonaktifkan mode penghemat baterai (penting: tanda #battery-saver-mode-available harus diaktifkan agar link dapat berfungsi).

Setelah diaktifkan, Anda dapat berinteraksi dengan situs dan memverifikasi bahwa semuanya terlihat sebagaimana mestinya: misalnya, animasi dan transisi berjalan pada kecepatan yang diinginkan.

Ringkasan

Meskipun mode Penghemat Memori dan Penghemat Energi Chrome terutama merupakan fitur yang ditampilkan kepada pengguna, mode 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 sejak lama, situs mereka akan tetap berfungsi dengan baik dengan mode baru ini.

Namun, jika situs Anda berisi salah satu praktik yang disebutkan dalam postingan ini, pengguna Anda mungkin akan mengalami masalah yang hanya akan meningkat jika dua mode tersebut diaktifkan.

Seperti biasa, cara terbaik untuk memastikan bahwa Anda memberikan pengalaman yang baik adalah dengan menguji situs Anda dengan kondisi yang cocok dengan kondisi pengguna Anda.