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 Yandex memungkinkan developer memberikan aplikasi yang lebih ringan dan lebih cepat kepada pengguna yang memilih untuk mengaktifkan mode penghemat data di browser mereka.

Kebutuhan akan halaman ringan

Semua orang setuju bahwa halaman web yang lebih cepat dan ringan memberikan pengalaman pengguna yang lebih memuaskan, memungkinkan pemahaman dan retensi konten yang lebih baik, serta menghasilkan peningkatan konversi dan pendapatan. Riset Google telah menunjukkan bahwa "…halaman yang dioptimalkan dimuat empat kali lebih cepat dibandingkan halaman aslinya dan menggunakan byte 80% lebih sedikit. Karena halaman ini dimuat dengan sangat cepat, kami juga melihat adanya peningkatan traffic sebesar 50% untuk halaman ini."

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 batasan jaringan terkait masih menjadi faktor signifikan bagi ratusan juta pengguna.

Ini adalah argumen kuat untuk pengoptimalan halaman.

Ada metode alternatif untuk meningkatkan kecepatan situs tanpa keterlibatan langsung developer, seperti browser proxy dan layanan transcoding. Meskipun layanan tersebut cukup populer, layanan ini memiliki kekurangan yang cukup besar — kompresi gambar dan teks yang sederhana (dan terkadang tidak dapat diterima), tidak dapat memproses halaman yang aman (HTTPS), hanya mengoptimalkan 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. Namun, mencapai tujuan tersebut adalah jalur yang rumit dan terkadang 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 yang dibatasi biaya dan performanya.

Browser yang didukung (di bawah) memungkinkan pengguna mengaktifkan mode *penghemat data yang memberikan izin kepada browser untuk menerapkan serangkaian pengoptimalan guna mengurangi jumlah data yang diperlukan untuk merender halaman. Jika 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 "Penghemat 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 memberikan pengalaman "ringan" 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 hemat data di browser, browser akan menambahkan header permintaan Save-Data ke semua permintaan keluar (HTTP dan HTTPS). Saat ini, browser hanya mengiklankan satu token *on di header (Save-Data: on), tetapi hal ini dapat diperluas pada 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 objek tersebut merepresentasikan Network Information API, yang hanya diimplementasikan di browser Chrome, Chrome untuk Android, dan Samsung Internet. Dari sana, Anda hanya perlu memeriksa apakah navigator.connection.saveData sama dengan true, dan Anda dapat menerapkan operasi penyimpanan data apa pun dalam kondisi tersebut.

Jika aplikasi Anda menggunakan pekerja layanan, aplikasi tersebut 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 sebagainya.

Tips penerapan dan praktik terbaik

1. Saat menggunakan Save-Data, berikan beberapa perangkat UI yang mendukungnya dan memungkinkan pengguna beralih dengan mudah di antara pengalaman. Contoh:
   • Beri tahu pengguna bahwa Save-Data didukung dan dorong mereka untuk menggunakannya.
   • Izinkan pengguna mengidentifikasi dan memilih mode dengan perintah yang sesuai dan tombol atau kotak centang on/off yang intuitif.
   • Jika 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. Mereka tidak menghilangkan fungsi atau data penting, mereka hanya lebih menyadari biaya yang terlibat dan pengalaman pengguna. Misalnya:
   • Aplikasi galeri foto dapat memberikan pratinjau beresolusi lebih rendah, atau menggunakan mekanisme carousel yang tidak terlalu berat kodenya.
   • Aplikasi penelusuran dapat menampilkan lebih sedikit hasil dalam satu waktu, membatasi jumlah hasil yang banyak media, atau mengurangi jumlah dependensi yang diperlukan untuk merender halaman.
   • Situs yang berorientasi pada berita dapat menampilkan lebih sedikit berita, menghilangkan kategori yang kurang populer, atau memberikan 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 menayangkan respons alternatif berdasarkan header Save-Data, jangan lupa untuk menambahkannya ke daftar Vary — Vary: Save-Data — untuk memberi tahu cache upstream bahwa mereka harus meng-cache dan menayangkan versi ini hanya jika header permintaan Save-Data ada. Untuk mengetahui detail selengkapnya, lihat praktik terbaik untuk interaksi dengan cache.
4. Jika Anda menggunakan service worker, aplikasi Anda dapat mendeteksi kapan opsi penghematan 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 memperluas Save-Data dengan sinyal lain, seperti informasi tentang jenis dan teknologi koneksi pengguna (lihat NetInfo API). Misalnya, Anda mungkin ingin menyajikan pengalaman ringan kepada pengguna yang menggunakan koneksi 2G meskipun Save-Data tidak diaktifkan. Sebaliknya, hanya karena pengguna menggunakan koneksi 4G "cepat", tidak berarti mereka tidak tertarik untuk menghemat data, misalnya saat melakukan roaming. Selain itu, Anda dapat meningkatkan kehadiran Save-Data dengan petunjuk klien Device-Memory untuk lebih beradaptasi dengan pengguna di perangkat dengan memori terbatas. Memori perangkat pengguna juga diiklankan di navigator.deviceMemory petunjuk klien.

Resep

Yang dapat Anda capai melalui Save-Data hanya terbatas pada apa yang dapat Anda pikirkan. Untuk memberi Anda gambaran tentang apa yang mungkin dilakukan, mari kita bahas beberapa kasus penggunaan. Anda dapat menemukan kasus penggunaan lain saat membaca artikel 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 disukai. JavaScript dapat gagal dieksekusi dalam beberapa kasus. 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. Misalnya, di PHP, header permintaan disimpan dalam array superglobal $_SERVER pada indeks yang dimulai dengan HTTP_. Artinya, 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 menempatkan pemeriksaan ini sebelum markup dikirim ke klien, variabel $saveData akan berisi status Save-Data, dan akan tersedia di mana saja untuk digunakan di halaman. Setelah mekanisme ini diilustrasikan, mari kita lihat beberapa contoh cara menggunakannya untuk membatasi jumlah data yang kita kirimkan kepada pengguna.

Menayangkan gambar beresolusi rendah untuk layar beresolusi tinggi

Kasus penggunaan umum untuk gambar di web melibatkan penyajian gambar dalam set dua: Satu gambar untuk layar "standar" (1x), dan gambar lain yang dua kali lebih besar (2x) untuk layar beresolusi tinggi (misalnya, Retina Display). Layar beresolusi tinggi ini tidak terbatas pada perangkat kelas atas, dan menjadi semakin umum. Dalam kasus ketika pengalaman aplikasi yang lebih ringan lebih disukai, sebaiknya kirim gambar beresolusi lebih rendah (1x) ke layar ini, bukan varian yang lebih besar (2x). Untuk mencapainya saat header Save-Data ada, kita cukup mengubah markup yang dikirim 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 sedikitnya upaya yang diperlukan untuk mengakomodasi seseorang yang secara khusus meminta Anda untuk mengirimkan lebih sedikit data kepadanya. Jika Anda 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 melakukannya dengan konfigurasi yang relatif sedikit.

Anda juga dapat memperluas konsep ini ke properti CSS background-image dengan cukup 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 gambar ditampilkan. Anda dapat mengirim gambar latar beresolusi rendah ke layar beresolusi tinggi seperti yang ditunjukkan dalam contoh HTML di atas, atau menghapus beberapa resource sekaligus.

Menghilangkan gambar yang tidak penting

Beberapa konten gambar di web tidak penting. Meskipun gambar tersebut dapat membuat konten terlihat lebih menarik, gambar tersebut mungkin tidak diinginkan oleh orang-orang yang mencoba memanfaatkan semua yang mereka bisa dari paket data yang diukur. Dalam kasus penggunaan Save-Data yang mungkin 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 memberikan efek yang jelas, seperti yang dapat Anda lihat pada gambar di bawah:

Tentu saja, tidak menyertakan gambar bukan satu-satunya kemungkinan. Anda juga dapat bertindak berdasarkan Save-Data untuk tidak mengirimkan resource non-kritis lainnya, seperti typeface tertentu.

Menghilangkan font web yang tidak penting

Meskipun font web biasanya tidak membentuk total payload halaman tertentu sebanyak gambar, font web masih cukup populer. Aplikasi ini juga tidak menggunakan data dalam jumlah yang tidak signifikan. Selain itu, cara browser mengambil dan merender font lebih rumit daripada yang Anda kira, dengan konsep seperti FOIT, FOUT, dan heuristik browser yang membuat rendering menjadi operasi yang rumit.

Oleh karena itu, Anda mungkin ingin menghilangkan font web yang tidak penting bagi pengguna yang menginginkan pengalaman pengguna yang lebih ringan. Save-Data membuat hal ini cukup mudah dilakukan.

Misalnya, Anda telah menyertakan Fira Sans dari Google Fonts di situs Anda. Fira Sans adalah font body copy yang sangat baik, tetapi 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 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 tetap ada, 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 salah satu resource dalam lembar gaya. Jika seseorang kebetulan lewat dengan Save-Data aktif, Fira Sans tidak akan pernah dimuat karena DOM yang diberi gaya tidak pernah memanggilnya. Arial akan digunakan sebagai gantinya. Font ini tidak sebagus Fira Sans, tetapi mungkin lebih disukai oleh pengguna yang mencoba menghemat paket data mereka.

Ringkasan

Header Save-Data tidak memiliki banyak nuansa; header ini aktif atau nonaktif, dan aplikasi memikul beban untuk memberikan pengalaman yang sesuai berdasarkan setelannya, terlepas dari alasannya.

Misalnya, beberapa pengguna mungkin tidak mengizinkan mode penghemat data jika mereka mencurigai akan ada kehilangan konten atau fungsi aplikasi, bahkan dalam situasi konektivitas yang buruk. Sebaliknya, beberapa pengguna mungkin mengaktifkannya sebagai hal yang biasa untuk menjaga agar halaman tetap sekecil dan sesederhana mungkin, bahkan dalam situasi konektivitas yang baik. Sebaiknya aplikasi Anda mengasumsikan bahwa pengguna menginginkan pengalaman penuh dan tanpa batas hingga Anda mendapatkan indikasi yang jelas sebaliknya melalui tindakan pengguna yang eksplisit.

Sebagai pemilik situs dan developer web, mari kita bertanggung jawab untuk mengelola konten guna meningkatkan pengalaman pengguna bagi pengguna yang dibatasi data dan biaya.

Untuk mengetahui detail selengkapnya tentang Save-Data dan contoh praktis yang sangat baik, lihat Membantu Pengguna Anda Save Data.