Header permintaan petunjuk klien Save-Data
yang tersedia di browser Chrome, Opera, dan Yunani memungkinkan developer menghadirkan aplikasi
yang lebih ringan dan lebih cepat kepada pengguna yang memilih ikut serta dalam mode hemat data di browser mereka.
Kebutuhan akan halaman yang ringan
Semua orang setuju bahwa halaman web yang lebih cepat dan ringan memberikan pengalaman pengguna yang lebih memuaskan, memungkinkan retensi dan pemahaman konten yang lebih baik, serta menghasilkan peningkatan konversi dan pendapatan. Penelitian Google menunjukkan bahwa "...halaman yang dioptimalkan dimuat empat kali lebih cepat daripada halaman asli dan menggunakan 80% lebih sedikit byte. Karena halaman ini dimuat jauh lebih cepat, kami juga melihat adanya peningkatan traffic ke halaman ini sebesar 50%."
Dan, meskipun jumlah koneksi 2G akhirnya menurun, 2G masih menjadi teknologi jaringan yang dominan pada tahun 2015. Penetrasi dan ketersediaan jaringan 3G dan 4G berkembang dengan pesat, tetapi biaya kepemilikan dan kendala jaringan terkait masih menjadi faktor signifikan bagi ratusan juta pengguna.
Pernyataan ini merupakan argumen kuat untuk pengoptimalan halaman.
Ada metode alternatif untuk meningkatkan kecepatan situs tanpa keterlibatan developer langsung, seperti browser proxy dan layanan transcoding. Meskipun layanan tersebut cukup populer, layanan tersebut memiliki kelemahan besar — kompresi gambar dan teks yang sederhana (dan terkadang tidak dapat diterima), ketidakmampuan memproses halaman yang aman (HTTPS), hanya pengoptimalan halaman yang dikunjungi melalui hasil penelusuran, dan banyak lagi. Popularitas layanan ini sendiri merupakan indikator bahwa developer web tidak menangani dengan benar permintaan pengguna yang tinggi untuk aplikasi dan halaman yang cepat dan ringan. Tetapi mencapai tujuan itu adalah jalur yang kompleks dan sulit.
Header permintaan Save-Data
Salah satu teknik yang cukup mudah adalah membiarkan 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 memberi browser izin 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 mengarahkan permintaan melalui layanan yang menerapkan pengoptimalan khusus konten lainnya seperti kompresi resource teks dan gambar.
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+ memberitahukan
Save-Data
saat mode Turbo diaktifkan di browser desktop atau seluler.
Mendeteksi setelan Save-Data
Untuk menentukan kapan harus menghadirkan pengalaman "cahaya" kepada pengguna, aplikasi
Anda dapat memeriksa header permintaan petunjuk klien Save-Data
. Header permintaan ini menunjukkan preferensi klien untuk mengurangi penggunaan data karena biaya transfer yang tinggi, kecepatan koneksi yang lambat, atau alasan lainnya.
Saat pengguna mengaktifkan mode penyimpanan data di browser mereka, browser akan menambahkan
header permintaan Save-Data
ke semua permintaan keluar (HTTP dan HTTPS).
Saat tulisan ini ditulis, browser hanya mengiklankan satu token *on- di header
(Save-Data: on
), tetapi 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
diterapkan di browser Internet Chrome, Chrome untuk Android, dan Samsung. Selanjutnya, Anda hanya perlu memeriksa apakah navigator.connection.saveData
sama dengan
true
, dan Anda dapat mengimplementasikan operasi penyimpanan data apa pun dalam kondisi tersebut.
Jika aplikasi Anda menggunakan pekerja
layanan, aplikasi dapat
memeriksa header permintaan dan menerapkan logika yang relevan untuk mengoptimalkan pengalaman.
Atau, server dapat mencari preferensi yang diiklankan dalam
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 untuk beralih antarpengalaman dengan mudah. Contoh:- Beri tahu pengguna bahwa
Save-Data
didukung dan dorong mereka untuk menggunakannya. - Izinkan pengguna mengidentifikasi dan memilih mode dengan perintah yang tepat dan 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 lebih rendah. Model ini tidak
menghilangkan fungsi atau data penting, tetapi lebih memperhatikan
biaya yang terkait dan pengalaman pengguna. Misalnya:
- Aplikasi galeri foto dapat menghasilkan pratinjau dengan resolusi yang lebih rendah, atau menggunakan mekanisme carousel yang tidak sarat kode.
- Aplikasi penelusuran dapat menampilkan lebih sedikit hasil pada satu waktu, membatasi jumlah hasil media yang sarat konten, atau mengurangi jumlah dependensi yang diperlukan untuk merender halaman.
- Situs berorientasi berita dapat menampilkan lebih sedikit artikel, menghilangkan kategori yang kurang populer, atau menyediakan pratinjau media yang lebih kecil.
- Berikan logika server untuk memeriksa header permintaan
Save-Data
dan pertimbangkan untuk 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 misc —Vary: Save-Data
— untuk memberi tahu cache upstream bahwa cache dan layanan tersebut harus di-cache dan menyalurkan 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 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. - Sebaiknya tambahkan
Save-Data
dengan sinyal lain, seperti informasi tentang jenis koneksi dan teknologi pengguna (lihat NetInfo API). Misalnya, Anda mungkin ingin menyajikan pengalaman ringan kepada pengguna 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 menambah keberadaanSave-Data
dengan petunjuk klienDevice-Memory
untuk beradaptasi lebih lanjut dengan pengguna pada perangkat dengan memori terbatas. Memori perangkat pengguna juga diiklankan dalam petunjuk kliennavigator.deviceMemory
.
Recipe
Hal yang dapat Anda capai melalui Save-Data
hanya terbatas pada hal yang dapat Anda
buat. Untuk memberi Anda gambaran tentang kemungkinan penggunaan, mari kita bahas beberapa kasus
penggunaan. Anda mungkin menemukan kasus penggunaan lain saat membaca artikel ini, jadi jangan ragu untuk bereksperimen dan melihat kemungkinannya.
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 disukai. 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. Dalam PHP, misalnya, header permintaan disimpan di 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 mekanisme yang diilustrasikan ini, mari kita lihat beberapa contoh
penggunaannya untuk membatasi jumlah data yang dikirim ke pengguna.
Menyajikan gambar beresolusi rendah untuk layar resolusi tinggi
Kasus penggunaan umum untuk gambar di web melibatkan penayangan gambar dalam dua kumpulan:
Satu gambar untuk layar "standar" (1x), dan gambar lainnya berukuran dua kali lebih besar
(2x) untuk layar beresolusi tinggi (misalnya, Layar
Retina). Kelas layar resolusi tinggi ini tidak terbatas pada perangkat kelas atas, dan sekarang semakin umum. Jika pengalaman aplikasi yang lebih ringan
diutamakan, mungkin akan lebih bijak untuk mengirim gambar beresolusi lebih rendah (1x) ke
layar ini, daripada varian yang lebih besar (2x). Untuk mencapainya 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 yang menunjukkan betapa kecil upaya yang diperlukan untuk mengakomodasi
seseorang yang secara khusus meminta Anda mengirimkan lebih sedikit data kepada mereka. 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 mencapainya
dengan konfigurasi yang relatif sedikit.
Anda juga dapat memperluas konsep ini ke properti background-image
CSS cukup 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 pengiriman gambar. Anda bisa mengirim gambar latar
belakang resolusi rendah ke layar resolusi tinggi seperti ditunjukkan dalam contoh HTML di atas, atau menghilangkan
resource tertentu sama sekali.
Hapus gambar yang tidak penting
Beberapa konten gambar di web tidaklah penting. Meskipun gambar tersebut dapat
menjadi tambahan yang bagus untuk konten, gambar tersebut mungkin tidak diinginkan oleh mereka yang mencoba
menggunakan semua yang bisa dilakukan dari paket data berkuota. Dalam kasus penggunaan
Save-Data
yang paling sederhana, kita dapat menggunakan kode deteksi PHP dari 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 jelas, seperti yang dapat Anda lihat pada gambar di bawah ini:
Tentu saja, menghilangkan gambar bukan satu-satunya kemungkinan. Anda juga dapat menindaklanjuti
Save-Data
untuk mengabaikan pengiriman resource tidak penting lainnya, seperti typeface
tertentu.
Menghapus font web yang tidak penting
Meskipun {i>font web<i} biasanya tidak memiliki jumlah total {i>payload <i} yang sama besarnya dengan gambar pada umumnya, {i>font<i} masih cukup populer. Filter tersebut juga tidak menghabiskan data dalam jumlah yang tidak signifikan. Selain itu, cara browser mengambil dan merender font lebih rumit daripada yang Anda bayangkan, dengan konsep seperti FOIT, FOUT, dan heuristik browser membuat rendering menjadi operasi yang bervariasi.
Mungkin ada alasan bahwa Anda mungkin ingin meninggalkan {i>font<i} web
yang tidak penting untuk pengguna yang menginginkan pengalaman pengguna yang lebih sederhana. Save-Data
menjadikannya
hal yang cukup mudah.
Misalnya, Anda menyertakan Fira
Sans dari Google
Fonts di situs Anda. Fira Sans adalah {i>font<i} salinan tubuh yang sangat
bagus, tapi mungkin tidak terlalu 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 memanggil typeface yang tidak penting terlebih dahulu,
tetapi kemudian memilih untuk tidak ikut ketika 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 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 yang ditata tidak pernah memanggilnya. Sebagai gantinya, Arial akan digunakan. Versi ini tidak sebagus Fira Sans, tetapi
mungkin lebih disukai bagi pengguna yang mencoba meregangkan paket data mereka.
Ringkasan
Header Save-Data
tidak memiliki banyak nuansa; baik dalam kondisi aktif maupun nonaktif, dan
aplikasi harus memikul beban dalam menyediakan pengalaman yang sesuai berdasarkan
setelannya, apa pun alasannya.
Misalnya, beberapa pengguna mungkin tidak mengizinkan mode hemat data jika mereka menduga akan ada 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 berasumsi bahwa pengguna menginginkan pengalaman penuh dan tidak terbatas sampai Anda memiliki indikasi yang jelas atau melalui tindakan pengguna yang eksplisit.
Sebagai pemilik situs dan developer web, mari kita tanggung jawab mengelola konten guna meningkatkan pengalaman pengguna bagi pengguna dengan batasan data dan biaya.
Untuk detail selengkapnya tentang Save-Data
dan contoh praktis yang sangat baik, lihat Membantu Pengguna
Anda Save Data
.