Header permintaan petunjuk klien Save-Data
yang tersedia di browser Chrome, Opera, dan Mandiant memungkinkan developer menghadirkan aplikasi yang
lebih ringan dan cepat kepada pengguna yang mengaktifkan mode hemat data di browser mereka.
Kebutuhan akan halaman yang ringan
Semua orang setuju bahwa halaman web yang lebih cepat dan lebih ringan akan memberikan pengalaman pengguna yang lebih memuaskan, memungkinkan pemahaman dan retensi konten yang lebih baik, serta menghasilkan peningkatan konversi dan pendapatan. Penelitian Google menunjukkan bahwa "...halaman yang dioptimalkan dimuat empat kali lebih cepat daripada halaman aslinya dan menggunakan 80% lebih sedikit byte. Karena halaman ini dimuat jauh lebih cepat, kami juga melihat adanya peningkatan traffic sebesar 50% ke halaman ini."
Selain itu, meskipun jumlah koneksi 2G akhirnya menurun, 2G masih menjadi teknologi jaringan yang dominan pada tahun 2015. Penetrasi dan ketersediaan jaringan 3G dan 4G berkembang pesat, tetapi biaya kepemilikan dan kendala jaringan terkait masih menjadi faktor yang signifikan bagi ratusan juta pengguna.
Berikut adalah argumen yang kuat untuk pengoptimalan halaman.
Ada metode alternatif untuk meningkatkan kecepatan situs tanpa keterlibatan developer langsung, seperti browser proxy dan layanan transcoding. Meskipun cukup populer, layanan tersebut memiliki kelemahan besar — kompresi gambar dan teks yang sederhana (dan terkadang tidak dapat diterima), ketidakmampuan untuk memproses halaman yang aman (HTTPS), hanya mengoptimalkan halaman yang dikunjungi melalui hasil penelusuran, dan banyak lagi. Kepopuleran layanan ini menjadi indikator bahwa developer web tidak benar dalam memenuhi permintaan pengguna yang tinggi untuk aplikasi dan halaman yang cepat dan ringan. Tetapi mencapai tujuan itu adalah jalur yang kompleks dan terkadang sulit.
Header permintaan Save-Data
Salah satu teknik yang cukup mudah adalah mengizinkan browser membantu, menggunakan
header permintaan Save-Data
. Dengan mengidentifikasi header ini, halaman web dapat menyesuaikan dan memberikan pengalaman pengguna yang dioptimalkan kepada pengguna dengan biaya dan performa yang terbatas.
Browser yang didukung (di bawah) memungkinkan pengguna mengaktifkan *mode penyimpanan data yang memberikan izin kepada browser untuk menerapkan serangkaian pengoptimalan guna mengurangi jumlah data yang diperlukan untuk merender halaman. Saat fitur ini diekspos, atau diiklankan, browser dapat meminta gambar beresolusi lebih rendah, menunda pemuatan beberapa resource, atau merutekan permintaan melalui layanan yang menerapkan pengoptimalan khusus konten lainnya seperti kompresi resource gambar dan teks.
Dukungan browser
- Chrome 49+ mengiklankan
Save-Data
saat pengguna mengaktifkan opsi "Penghemat Data" di perangkat seluler, atau ekstensi "Penghemat Data" di browser desktop. - Opera 35+ mengiklankan
Save-Data
saat pengguna mengaktifkan mode "Opera Turbo" di desktop, atau opsi "Penghematan data" di browser Android. - Yandex 16.2+ mengiklankan
Save-Data
saat mode Turbo diaktifkan di desktop atau browser seluler.
Mendeteksi setelan Save-Data
Untuk menentukan kapan harus menghadirkan pengalaman "ringan" kepada pengguna, aplikasi
Anda dapat memeriksa header permintaan petunjuk klien Save-Data
. Header permintaan ini menunjukkan preferensi klien terhadap pengurangan penggunaan data karena biaya transfer yang tinggi, kecepatan koneksi yang lambat, atau alasan lainnya.
Saat pengguna mengaktifkan mode penyimpanan data di browser, browser akan menambahkan
header permintaan Save-Data
ke semua permintaan keluar (HTTP dan HTTPS).
Saat penulisan ini, browser hanya mengiklankan satu token *on- di header
(Save-Data: on
), tetapi hal ini dapat diperluas di masa mendatang untuk menunjukkan preferensi
pengguna lainnya.
Selain itu, Anda dapat mendeteksi apakah Save-Data
diaktifkan di JavaScript:
if ('connection' in navigator) {
if (navigator.connection.saveData === true) {
// Implement data saving operations here.
}
}
Memeriksa keberadaan objek connection
dalam objek navigator
sangat penting karena mewakili Network Information API, yang hanya
diimplementasikan di browser Chrome, Chrome untuk Android, dan Samsung Internet. Dari
situ, Anda hanya perlu memeriksa apakah navigator.connection.saveData
sama dengan
true
, dan Anda dapat mengimplementasikan operasi penghematan data apa pun dalam kondisi tersebut.
Jika menggunakan pekerja
layanan, aplikasi Anda dapat
memeriksa header permintaan dan menerapkan logika yang relevan untuk mengoptimalkan pengalaman.
Atau, server dapat mencari preferensi yang diiklankan di
header permintaan Save-Data
dan menampilkan respons alternatif — markup
yang berbeda, gambar dan video yang lebih kecil, dan seterusnya.
Tips penerapan dan praktik terbaik
- Saat menggunakan
Save-Data
, sediakan beberapa perangkat UI yang mendukungnya dan memungkinkan pengguna beralih antar-pengalaman dengan mudah. Contoh:- Beri tahu pengguna bahwa
Save-Data
didukung dan dorong mereka untuk menggunakannya. - Memungkinkan pengguna mengidentifikasi dan memilih mode dengan perintah yang sesuai serta tombol aktif/nonaktif atau kotak centang yang intuitif.
- Saat mode hemat data dipilih, umumkan dan berikan cara yang mudah dan jelas untuk menonaktifkannya dan kembali ke pengalaman penuh jika diinginkan.
- Beri tahu pengguna bahwa
- Ingatlah bahwa aplikasi ringan
bukanlah aplikasi yang kurang sederhana. Mereka tidak
menghilangkan fungsi atau data penting, mereka hanya lebih memahami
biaya yang terkait dengan pengalaman pengguna. Misalnya:
- Aplikasi galeri foto dapat mengirimkan pratinjau dengan resolusi lebih rendah, atau menggunakan mekanisme carousel yang tidak terlalu banyak menggunakan kode.
- Aplikasi penelusuran dapat menampilkan lebih sedikit hasil dalam satu waktu, membatasi jumlah hasil yang memerlukan banyak media, atau mengurangi jumlah dependensi yang diperlukan untuk merender halaman.
- Situs berorientasi berita mungkin menampilkan lebih sedikit cerita, menghilangkan kategori yang kurang populer, atau menyediakan pratinjau media yang lebih kecil.
- Berikan logika server untuk memeriksa header permintaan
Save-Data
dan pertimbangkan memberikan respons halaman alternatif yang lebih ringan saat diaktifkan — misalnya, mengurangi jumlah resource dan dependensi yang diperlukan, menerapkan kompresi resource yang lebih agresif, dll.- Jika Anda menyajikan respons alternatif berdasarkan header
Save-Data
, jangan lupa untuk menambahkannya ke daftar Variasi —Vary: Save-Data
— untuk memberi tahu cache upstream bahwa cache tersebut harus di-cache dan menayangkan versi ini hanya jika header permintaanSave-Data
ada. Untuk detail selengkapnya, lihat praktik terbaik untuk interaksi dengan cache.
- Jika Anda menyajikan respons alternatif berdasarkan header
- Jika Anda menggunakan pekerja layanan, aplikasi Anda dapat mendeteksi kapan opsi penyimpanan data diaktifkan dengan memeriksa keberadaan header permintaan
Save-Data
, atau dengan memeriksa nilai propertinavigator.connection.saveData
. Jika diaktifkan, pertimbangkan apakah Anda dapat menulis ulang permintaan untuk mengambil lebih sedikit byte, atau menggunakan respons yang sudah diambil. - Pertimbangkan untuk menambahkan
Save-Data
dengan sinyal lain, seperti informasi tentang teknologi dan jenis koneksi pengguna (lihat NetInfo API). Misalnya, Anda mungkin ingin menyajikan pengalaman ringan kepada pengguna mana pun di koneksi 2G meskipunSave-Data
tidak diaktifkan. Sebaliknya, hanya karena pengguna menggunakan koneksi 4G yang "cepat" bukan berarti mereka tidak tertarik untuk menyimpan data, misalnya, saat roaming. Selain itu, Anda dapat meningkatkan keberadaanSave-Data
dengan petunjuk klienDevice-Memory
untuk beradaptasi lebih lanjut dengan pengguna di perangkat dengan memori terbatas. Memori perangkat pengguna juga diberitahukan dalam petunjuk kliennavigator.deviceMemory
.
Resep
Yang dapat Anda capai melalui Save-Data
hanya terbatas pada hal yang dapat Anda buat. Untuk memberi Anda gambaran tentang apa yang dapat dilakukan, mari kita bahas beberapa kasus
penggunaan. Anda mungkin akan menemukan kasus penggunaan lain saat membaca ini, jadi jangan ragu untuk bereksperimen dan melihat apa yang mungkin dilakukan.
Memeriksa Save-Data
dalam kode sisi server
Meskipun status Save-Data
adalah sesuatu yang dapat Anda deteksi di JavaScript melalui
properti navigator.connection.saveData
, mendeteksinya di sisi server
terkadang lebih baik. Dalam beberapa kasus, JavaScript dapat gagal dijalankan. Selain itu,
deteksi sisi server adalah satu-satunya cara untuk mengubah markup sebelum dikirim ke
klien, yang terlibat dalam beberapa kasus penggunaan Save-Data
yang paling bermanfaat.
Sintaksis khusus untuk mendeteksi header Save-Data
dalam kode sisi server
bergantung pada bahasa yang digunakan, tetapi ide dasarnya harus sama untuk backend aplikasi
apa pun. Di PHP, misalnya, header permintaan disimpan dalam array superglobal $_SERVER
pada indeks yang dimulai dengan HTTP_
. Ini berarti Anda dapat mendeteksi header Save-Data
dengan
memeriksa keberadaan dan nilai variabel $_SERVER["HTTP_SAVE_DATA"]
seperti berikut:
// false by default.
$saveData = false;
// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
// `Save-Data` detected!
$saveData = true;
}
Jika Anda melakukan pemeriksaan ini sebelum markup dikirim ke klien, variabel $saveData
akan berisi status Save-Data
, dan akan tersedia di mana saja untuk digunakan pada halaman. Dengan ilustrasi mekanisme ini, mari kita lihat beberapa contoh
bagaimana kita dapat menggunakannya untuk membatasi jumlah data yang kita kirim ke pengguna.
Menayangkan gambar beresolusi rendah untuk layar beresolusi tinggi
Kasus penggunaan umum untuk gambar di web melibatkan penayangan gambar dalam dua set:
Satu gambar untuk layar "standar" (1x), dan gambar lain yang berukuran dua kali lebih besar
(2x) untuk layar resolusi tinggi (misalnya, Layar
Retina). Kelas layar
resolusi tinggi ini tidak selalu terbatas pada perangkat kelas atas, dan
semakin umum terjadi. Jika pengalaman aplikasi yang lebih ringan
lebih disukai, sebaiknya kirim gambar dengan resolusi lebih rendah (1x) ke
layar ini, daripada varian yang lebih besar (2x). Untuk mencapai hal ini saat header Save-Data
ada, kita cukup mengubah markup yang kita kirim ke klien:
if ($saveData === true) {
// Send a low-resolution version of the image for clients specifying `Save-Data`.
?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
// Send the usual assets for everyone else.
?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}
Kasus penggunaan ini adalah contoh sempurna tentang betapa sedikit upaya yang diperlukan untuk mengakomodasi
seseorang yang secara khusus meminta Anda untuk mengirimkan lebih sedikit data. Jika tidak suka
mengubah markup di backend, Anda juga dapat mencapai hasil yang sama dengan
menggunakan modul penulisan ulang URL seperti mod_rewrite
Apache. Ada
contoh cara mencapai
hal ini dengan
konfigurasi yang relatif sedikit.
Anda juga dapat memperluas konsep ini ke properti background-image
CSS hanya dengan menambahkan class ke elemen <html>
:
<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">
Dari sini, Anda dapat menargetkan class save-data
pada elemen <html>
di CSS untuk mengubah cara penayangan gambar. Anda dapat mengirim gambar latar belakang resolusi rendah ke layar beresolusi tinggi seperti yang ditunjukkan dalam contoh HTML di atas, atau menghilangkan resource tertentu sama sekali.
Hapus gambar yang tidak penting
Beberapa konten gambar di web tidak penting. Meskipun gambar tersebut dapat
menjadikan konten yang bagus, gambar tersebut mungkin tidak diinginkan oleh pengguna yang mencoba
memeras sebanyak mungkin dari paket data berkuota. Dalam kasus penggunaan Save-Data
paling sederhana, kita dapat menggunakan kode deteksi PHP dari langkah sebelumnya dan menghilangkan
markup gambar yang tidak penting sama sekali:
<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
// Only send this image if `Save-Data` hasn't been detected.
?><img src="meme.jpg" alt="One does not simply consume data."><?php
}
Teknik ini tentu dapat memiliki efek yang diucapkan, seperti yang dapat Anda lihat pada gambar di bawah:
Tentu saja, menghilangkan gambar bukan satu-satunya kemungkinan. Anda juga dapat menindaklanjuti
Save-Data
untuk tidak mengirim resource yang tidak penting lainnya, seperti typeface
tertentu.
Hapus font web yang tidak penting
Font web biasanya tidak sebanyak total payload halaman tertentu seperti yang sering ada gambar, tetapi font ini masih cukup populer. Mereka juga tidak memakai data dalam jumlah yang tidak signifikan. Selain itu, cara browser mengambil dan merender font lebih rumit dari yang Anda pikirkan, dengan konsep seperti FOIT, FOUT, dan heuristik browser yang membuat rendering operasi yang rumit.
Mungkin ada alasan bagi Anda untuk tidak menyertakan font web yang tidak penting untuk pengguna yang menginginkan pengalaman pengguna yang lebih efisien. Save-Data
menjadikannya hal
yang cukup mudah untuk dilakukan.
Misalnya, Anda telah menyertakan Fira
Sans dari Google
Fonts di situs Anda. Fira Sans adalah {i>font<i} salinan tubuh yang sangat baik, tapi mungkin ini tidak begitu penting bagi pengguna yang mencoba menyimpan data. Dengan menambahkan
class save-data
ke elemen <html>
saat header Save-Data
ada, kita dapat menulis gaya yang pada awalnya memanggil jenis huruf tidak penting,
tetapi kemudian memilih untuk tidak menggunakannya saat header Save-Data
ada:
/* Opt into web fonts by default. */
p,
li {
font-family: 'Fira Sans', 'Arial', sans-serif;
}
/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
font-family: 'Arial', sans-serif;
}
Dengan menggunakan pendekatan ini, Anda dapat membiarkan cuplikan <link>
dari Google Fonts di tempatnya, karena browser secara spekulatif memuat resource CSS (termasuk font web) dengan terlebih dahulu menerapkan gaya ke DOM, lalu memeriksa apakah ada elemen HTML yang memanggil resource di style sheet. Jika seseorang terjadi dengan
Save-Data
aktif, Fira Sans tidak akan pernah dimuat karena DOM bergaya tidak pernah
memanggilnya. Sebagai gantinya, Arial akan masuk. Ini tidak sebaik Fira Sans, tetapi
mungkin lebih disukai bagi pengguna yang mencoba meregangkan paket data mereka.
Ringkasan
Header Save-Data
tidak memiliki banyak perbedaan; header ini aktif atau nonaktif, dan
aplikasi menanggung beban untuk memberikan pengalaman yang sesuai berdasarkan
setelannya, terlepas dari alasannya.
Misalnya, beberapa pengguna mungkin tidak mengizinkan mode penyimpanan data jika mereka mencurigai akan kehilangan konten atau fungsi aplikasi, bahkan dalam situasi konektivitas yang buruk. Sebaliknya, beberapa pengguna mungkin mengaktifkannya untuk menjaga halaman sekecil dan sesederhana mungkin, bahkan dalam situasi konektivitas yang baik. Sebaiknya aplikasi Anda mengasumsikan bahwa pengguna menginginkan pengalaman penuh dan tidak terbatas hingga Anda memiliki indikasi yang jelas melalui tindakan pengguna yang eksplisit.
Sebagai pemilik situs dan developer web, mari kita bertanggung jawab mengelola konten untuk meningkatkan pengalaman pengguna bagi pengguna dengan data dan biaya yang terbatas.
Untuk detail selengkapnya tentang Save-Data
dan contoh praktis yang sangat baik, lihat Membantu
Pengguna Anda Save Data
.