Menghadirkan Aplikasi Cepat dan Ringan dengan Hemat-Data

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

Statistik Weblight

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.

Header Simpan-Data yang ditampilkan di Developer Tools Chrome yang digambarkan bersama dengan ekstensi Penghemat Data.
Mengaktifkan ekstensi Penghemat Data di desktop Chrome.

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

  1. 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.
  2. 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.
  3. 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 permintaan Save-Data ada. Untuk detail selengkapnya, lihat praktik terbaik untuk interaksi dengan cache.
  4. Jika Anda menggunakan pekerja layanan, aplikasi 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. 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 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 menambah keberadaan Save-Data dengan petunjuk klien Device-Memory untuk beradaptasi lebih lanjut dengan pengguna pada perangkat dengan memori terbatas. Memori perangkat pengguna juga diiklankan dalam petunjuk klien navigator.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:

Perbandingan gambar nonkritis yang dimuat saat Save-Data tidak ada, dibandingkan dengan gambar yang sama yang dihilangkan saat Save-Data ada.
Perbandingan gambar non-kritis yang dimuat saat Save-Data tidak ada, dan gambar yang sama yang dihilangkan saat Save-Data ada.

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.