Menghadirkan Aplikasi Cepat dan Ringan dengan Hemat-Data

Dave Gash

Ilya Grigorik

Jeremy Wagner

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.

Mengaktifkan ekstensi Penghemat Data di desktop Chrome.

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: Jika Anda menggunakan PageSpeed untuk Apache atau Nginx untuk optimalkan halaman Anda, lihat ini diskusi untuk mempelajari bagaimana untuk memungkinkan penghematan Save-Data bagi pengguna Anda._

Tips penerapan dan praktik terbaik

1. 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.
2. 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.
3. 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 permintaan Save-Data ada. Untuk detail selengkapnya, lihat praktik terbaik untuk dengan cache.
4. Jika menggunakan pekerja layanan, aplikasi Anda dapat mendeteksi saat penyimpanan data opsi diaktifkan dengan memeriksa keberadaan permintaan Save-Data header, atau dengan memeriksa nilai navigator.connection.saveData saat ini. Jika diaktifkan, pertimbangkan apakah Anda dapat menulis ulang permintaan untuk mengambil lebih sedikit byte, atau menggunakan respons yang sudah diambil.
5. 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 jika Save-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 keberadaan Save-Data dengan petunjuk klien Device-Memory untuk beradaptasi lebih lanjut dengan pengguna di perangkat dengan memori terbatas. Memori perangkat pengguna juga diiklankan di Petunjuk klien navigator.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 tidak penting yang dimuat saat Save-Data tidak ada, dibandingkan dengan gambar yang sama dihilangkan saat Save-Data saat ini.

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.