Permintaan petunjuk klien Save-Data
{i>header<i}
yang tersedia di browser Chrome, Opera, dan Mandiant memungkinkan developer menghadirkan
aplikasi yang lebih cepat bagi 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 memberikan pengalaman pengguna yang lebih memuaskan pengalaman, memberikan pemahaman dan retensi konten yang lebih baik, serta menyampaikan peningkatan konversi dan pendapatan. Google riset menunjukkan bahwa "...halaman yang dioptimalkan dimuat empat kali lebih cepat daripada halaman aslinya dan menggunakan rasio 80% {i>byte<i} yang lebih sedikit. Karena halaman ini dimuat jauh lebih cepat, kami juga mengalami peningkatan sebesar 50% lalu lintas ke laman ini."
Dan, meskipun jumlah koneksi 2G akhirnya berada menolak, 2G masih menjadi jaringan yang dominan teknologi pada 2015. Penetrasi dan ketersediaan jaringan 3G dan 4G terus meningkat dengan cepat, tetapi biaya kepemilikan dan batasan jaringan terkait masih menjadi signifikan bagi ratusan juta pengguna.
Berikut adalah argumen yang kuat untuk pengoptimalan halaman.
Ada metode alternatif untuk meningkatkan kecepatan situs tanpa dukungan langsung dari keterlibatan mereka, seperti browser {i>proxy<i} dan layanan transcoding. Meskipun seperti sangat populer, tetapi memiliki kekurangan besar, yaitu (dan terkadang tidak dapat diterima) kompresi gambar dan teks, ketidakmampuan untuk memproses aman (HTTPS), hanya mengoptimalkan halaman yang dikunjungi melalui hasil penelusuran, dan lainnya. Popularitas layanan ini sendiri menjadi indikator bahwa web developer tidak dapat memenuhi permintaan pengguna yang tinggi untuk layanan cepat dan ringan, aplikasi dan halaman. Tetapi mencapai tujuan itu adalah hal yang rumit dan terkadang jalan yang sulit.
Header permintaan Save-Data
Satu teknik yang cukup mudah adalah membiarkan browser membantu, menggunakan
Header permintaan Save-Data
. Dengan mengidentifikasi {i>header<i} ini, halaman web dapat menyesuaikan
serta memberikan pengalaman pengguna yang dioptimalkan dengan biaya dan performa yang terbatas
pelanggan.
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 dibutuhkan untuk merender halaman. Saat fitur ini terekspos, atau diiklankan, browser mungkin meminta gambar beresolusi lebih rendah, menunda pemuatan beberapa resource, atau mengarahkan permintaan melalui layanan yang menerapkan pengoptimalan spesifik per konten seperti kompresi resource gambar dan teks.
Dukungan browser
- Chrome 49 ke atas mengiklankan
Save-Data
saat pengguna mengaktifkan "Penghemat Data" di perangkat seluler, atau opsi "Penghemat Data" ekstensi pada browser desktop. - Opera 35+ mengiklankan
Save-Data
saat pengguna mengaktifkan "Opera Turbo" di desktop, atau "Penghematan data" opsi di browser Android. - Yandex 16.2+ mengiklankan
Save-Data
saat Turbo mode adalah diaktifkan di desktop atau seluler browser.
Mendeteksi setelan Save-Data
Untuk menentukan waktu pengiriman "lampu" pengalaman yang lebih baik
bagi pengguna, pelanggan
aplikasi dapat memeriksa header permintaan petunjuk klien Save-Data
. Ini
header permintaan menunjukkan preferensi klien untuk pengurangan penggunaan data karena
biaya transfer yang tinggi, kecepatan sambungan yang lambat, atau alasan lainnya.
Saat pengguna mengaktifkan mode hemat data di browser, browser akan menambahkan
header permintaan Save-Data
ke semua permintaan keluar (HTTP dan HTTPS).
Saat penulisan ini ditulis, browser hanya mengiklankan satu token *on- di header
(Save-Data: on
), tetapi dapat diperpanjang di masa mendatang untuk menunjukkan pengguna lain
preferensi Anda.
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 navigator
penting, karena mewakili Network Information API, yang hanya
diterapkan di Chrome, Chrome untuk Android, dan browser Internet Samsung. Dari
di sana, Anda hanya perlu memeriksa apakah navigator.connection.saveData
sama dengan
true
, dan Anda dapat menerapkan operasi penyimpanan data dalam kondisi tersebut.
![Tujuan
Header Save-Data yang ditampilkan di Developer Tools Chrome, ditunjukkan dalam gambar
Ekstensi Penghemat Data.](https://web.dev/static/articles/optimizing-content-efficiency-save-data/image/the-save-data-header-reve-3d6257f960c6c.png?authuser=6&hl=id)
Jika aplikasi Anda menggunakan layanan
Worker, aplikasi ini 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 tampilkan respons alternatif — berbeda
markup, 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 dengan mudah beralih di antara pengalaman. Contoh:- Beri tahu pengguna bahwa
Save-Data
didukung dan dorong mereka untuk menggunakannya. - Izinkan pengguna untuk mengidentifikasi dan memilih mode dengan prompt dan tombol aktif/nonaktif atau kotak centang yang intuitif.
- Ketika mode hemat data dipilih, umumkan dan berikan jawaban yang mudah dan jelas cara untuk menonaktifkannya dan kembali ke pengalaman penuh jika diinginkan.
- Beri tahu pengguna bahwa
- Ingatlah bahwa aplikasi ringan
bukanlah aplikasi yang kurang sederhana. Langkah ini tidak
menghilangkan fungsi atau data penting, mereka hanya lebih memperhatikan
biaya terkait, dan
pengalaman pengguna. Misalnya:
- Aplikasi galeri foto dapat menampilkan pratinjau beresolusi lebih rendah atau menggunakan mekanisme carousel penuh kode.
- Aplikasi penelusuran mungkin menampilkan lebih sedikit hasil sekaligus, membatasi jumlah hasil yang sarat media, atau mengurangi jumlah dependensi yang diperlukan untuk merender pada 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 mempertimbangkan yang memberikan respons halaman alternatif yang lebih ringan saat diaktifkan — misalnya, mengurangi jumlah sumber daya dan dependensi yang diperlukan, menerapkannya dengan lebih agresif kompresi resource, dll.- Jika Anda menyajikan respons alternatif berdasarkan header
Save-Data
, ingatlah untuk menambahkannya ke daftar Variasi —Vary: Save-Data
— untuk menyimpan cache upstream yang harus di-cache dan menayangkan versi ini hanya jika Header permintaanSave-Data
ada. Untuk detail selengkapnya, lihat praktik terbaik untuk dengan cache.
- Jika Anda menyajikan respons alternatif berdasarkan header
- Jika menggunakan pekerja layanan, aplikasi Anda dapat mendeteksi saat penyimpanan data
opsi diaktifkan dengan memeriksa keberadaan permintaan
Save-Data
header, atau dengan memeriksa nilainavigator.connection.saveData
saat ini. 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 jenis koneksi dan teknologi pengguna (lihat NetInfo API). Sebagai contoh, Anda mungkin ingin memberikan pengalaman ringan kepada pengguna mana pun di koneksi 2G bahkan jikaSave-Data
tidak diaktifkan. Sebaliknya, hanya karena pengguna menggunakan jawaban "cepat" 4G tidak berarti mereka tidak tertarik untuk menyimpan data - untuk saat roaming. Selain itu, Anda dapat menambah keberadaanSave-Data
dengan petunjuk klienDevice-Memory
untuk beradaptasi lebih lanjut dengan pengguna di perangkat dengan memori terbatas. Memori perangkat pengguna juga diiklankan di Petunjuk kliennavigator.deviceMemory
.
Resep
Yang dapat Anda capai melalui Save-Data
terbatas hanya pada hal yang dapat Anda lakukan
kami. Untuk memberi gambaran tentang apa
yang mungkin dilakukan, mari kita bahas
penggunaan. Anda mungkin akan menemukan kasus penggunaan
lainnya saat Anda membaca ini, jadi
jangan ragu untuk bereksperimen dan melihat apa yang mungkin terjadi!
Memeriksa Save-Data
dalam kode sisi server
Meskipun status Save-Data
adalah sesuatu yang dapat Anda deteksi di JavaScript melalui
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 spesifik untuk mendeteksi header Save-Data
dalam kode sisi server
tergantung pada bahasa yang digunakan, tetapi ide dasarnya harus sama untuk
backend aplikasi. Di PHP, misalnya, header permintaan disimpan di
$_SERVER
superglobal
array pada indeks
dimulai dengan HTTP_
. Artinya, Anda dapat mendeteksi header Save-Data
dengan
memeriksa keberadaan dan nilai variabel $_SERVER["HTTP_SAVE_DATA"]
seperti ini:
// 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, $saveData
variabel akan berisi status Save-Data
, dan akan tersedia di mana saja untuk
gunakan pada halaman. Setelah mekanisme ini diilustrasikan, mari kita lihat beberapa contoh
bagaimana kita dapat menggunakannya untuk membatasi
berapa banyak 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 "standard" layar (1x), dan gambar lain yang berukuran dua kali lebih besar
(2x) untuk layar beresolusi tinggi (mis., Retina
Tampilan). Kelas tinggi ini
layar resolusi tidak hanya terbatas pada
perangkat kelas atas, dan
menjadi semakin umum. Jika pengalaman aplikasi yang lebih ringan
pilihan Anda, sebaiknya kirim gambar beresolusi lebih rendah (1x) ke
layar, bukan varian yang lebih besar (2x). Untuk mencapai hal ini saat 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 dibutuhkan untuk mengakomodasi
seseorang yang secara khusus meminta Anda
untuk mengirim lebih sedikit data kepada mereka. Jika Anda tidak suka
memodifikasi markup di backend, Anda juga bisa mencapai hasil yang sama dengan
menggunakan modul penulisan ulang URL seperti
mod_rewrite
. Ada
adalah contoh cara mencapai
ini dengan
konfigurasi yang relatif kecil.
Anda juga dapat memperluas konsep ini ke properti background-image
CSS dengan
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 penayangan gambar. Anda dapat mengirim latar belakang resolusi rendah
gambar ke layar resolusi tinggi seperti yang ditunjukkan dalam contoh HTML di atas, atau hilangkan
sumber daya tertentu.
Hapus gambar yang tidak penting
Beberapa konten gambar di web tidak penting. Meskipun gambar tersebut dapat
di samping konten yang baik, mereka mungkin tidak
diinginkan oleh mereka yang mencoba
mengeluarkan semua yang mereka bisa
dari paket data berkuota. Dalam cara yang mungkin
menggunakan Save-Data
, kita dapat menggunakan
kode deteksi PHP yang telah dibahas sebelumnya dan menghilangkan
markup gambar yang tidak penting:
<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 di gambar di bawah ini:
![Perbandingan gambar non-kritis
dimuat saat Save-Data tidak ada, dibandingkan dengan gambar yang sama dihilangkan
ketika Save-Data ada.](https://web.dev/static/articles/optimizing-content-efficiency-save-data/image/a-comparison-non-critica-f5ac2f016e117.png?authuser=6&hl=id)
Tentu saja, menghilangkan gambar bukan satu-satunya kemungkinan. Anda juga dapat menindaklanjuti
Save-Data
untuk mengabaikan pengiriman resource yang tidak penting lainnya, seperti
tipografi.
Hapus font web yang tidak penting
Walaupun {i>font<i} web biasanya tidak sebanyak jumlah total laman tertentu {i>payload<i} seperti yang sering dilakukan gambar, mereka masih cukup populer. Mereka tidak memakai sejumlah data. Terlebih lagi, cara browser mengambil dan merender font lebih rumit daripada Anda pikirkan, dengan konsep seperti FOIT FOUT, dan browser heuristik yang membuat rendering operasi yang rumit.
Mungkin beralasan bahwa Anda tidak ingin lagi menggunakan {i>website<i} yang tidak penting
{i>font<i} untuk pengguna yang menginginkan
pengalaman pengguna yang lebih efisien. Save-Data
menjadikannya
hal yang cukup mudah dilakukan.
Misalnya, Anda telah menyertakan Fira
Sans dari Google
Font di situs Anda. Fira Sans tubuh yang luar biasa
menyalin {i>font<i}, tapi mungkin hal itu tidak terlalu penting bagi
pengguna yang mencoba menghemat data. Dengan menambahkan
class save-data
ke elemen <html>
saat header Save-Data
kita bisa menulis gaya yang memanggil jenis huruf non-esensial pada awalnya,
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
karena browser secara spekulatif memuat resource CSS (termasuk web
font) dengan menerapkan gaya terlebih dahulu ke DOM, lalu memeriksa apakah ada HTML
memanggil sumber daya apa pun di lembar gaya. Jika seseorang terjadi pada
dengan mengaktifkan Save-Data
, Fira Sans tidak akan pernah dimuat karena DOM bergaya tidak pernah
memanggilnya. Sebagai gantinya, Arial akan masuk. Tidak sebaik Fira Sans, tapi
mungkin lebih baik bagi pengguna yang mencoba
untuk memperpanjang paket data mereka.
Ringkasan
Header Save-Data
tidak memiliki banyak nuansa; bisa saja nyala
atau mati, dan
aplikasi menanggung beban dalam menyediakan pengalaman yang sesuai berdasarkan
setelannya, apa pun alasannya.
Misalnya, beberapa pengguna mungkin tidak mengizinkan mode penyimpanan data jika mereka merasa ada akan hilangnya konten atau fungsi aplikasi, bahkan dalam konektivitas yang buruk situasi. Sebaliknya, beberapa pengguna mungkin mengaktifkannya untuk menjaga sekecil dan sesederhana mungkin, bahkan dalam situasi konektivitas yang baik. Sebaiknya aplikasi Anda mengasumsikan bahwa pengguna menginginkan akses penuh dan tidak terbatas aplikasi kecuali Anda mendapatkan indikasi yang jelas melalui pengguna eksplisit tindakan.
Sebagai pemilik situs dan pengembang web, mari kita tanggung jawab untuk mengelola konten kami untuk meningkatkan pengalaman pengguna bagi pengguna dengan data dan biaya yang terbatas.
Untuk detail selengkapnya tentang Save-Data
dan contoh praktis yang luar biasa, lihat Membantu
Pengguna Save Data
.