Menghadirkan Aplikasi Cepat dan Ringan dengan Hemat-Data

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

1. 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.
2. 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.
3. 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 permintaan Save-Data ada. Untuk detail selengkapnya, lihat praktik terbaik untuk interaksi dengan cache.
4. 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 properti navigator.connection.saveData. 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 teknologi dan jenis koneksi pengguna (lihat NetInfo API). Misalnya, Anda mungkin ingin menyajikan pengalaman ringan kepada pengguna mana pun di koneksi 2G meskipun Save-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 keberadaan Save-Data dengan petunjuk klien Device-Memory untuk beradaptasi lebih lanjut dengan pengguna di perangkat dengan memori terbatas. Memori perangkat pengguna juga diberitahukan dalam petunjuk klien navigator.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.