Menghadirkan aplikasi yang cepat dan ringan dengan Save-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 ikut serta dalam mode penghematan 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, memungkinkan pemahaman dan retensi konten yang lebih baik, serta meningkatkan konversi dan pendapatan. Google Riset telah menunjukkan bahwa "…halaman yang dioptimalkan dimuat empat kali lebih cepat dibandingkan halaman aslinya dan menggunakan byte 80% lebih sedikit. Karena pemuatan halaman ini jauh lebih cepat, kami juga melihat adanya peningkatan traffic sebesar 50% untuk halaman ini.

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 pesat, tetapi biaya kepemilikan dan batasan jaringan yang terkait masih menjadi faktor penting bagi ratusan juta pengguna.

Ini adalah argumen yang kuat untuk pengoptimalan halaman.

Ada metode alternatif untuk meningkatkan kecepatan situs tanpa keterlibatan developer secara langsung, seperti browser proxy dan layanan transcoding. Meskipun layanan semacam itu cukup populer, layanan tersebut memiliki kelemahan yang signifikan — 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. Popularitas layanan ini sendiri merupakan indikator bahwa developer web tidak menangani dengan benar permintaan pengguna yang tinggi akan aplikasi dan halaman yang cepat dan ringan. Namun, mencapai tujuan tersebut adalah jalur yang kompleks dan terkadang sulit.

Header permintaan Save-Data

Salah satu teknik yang cukup mudah adalah dengan 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 memiliki keterbatasan biaya dan performa.

Browser yang didukung (di bawah) memungkinkan pengguna mengaktifkan mode *Hemat Data yang memberi browser izin untuk menerapkan serangkaian pengoptimalan guna mengurangi jumlah data yang diperlukan untuk merender halaman. Saat fitur ini ditampilkan, atau diberitahukan, 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+ memberitahukan Save-Data saat pengguna mengaktifkan opsi "Penghemat Data" di perangkat seluler, atau ekstensi "Penghemat Data" di browser desktop.
• Opera 35+ memberitahukan 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 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 penghematan data di browsernya, browser akan menambahkan header permintaan Save-Data ke semua permintaan keluar (HTTP dan HTTPS). Saat tulisan ini dibuat, 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 objek ini mewakili Network Information API, yang hanya diimplementasikan di Chrome, Chrome untuk Android, dan browser internet Samsung. 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.

Mengaktifkan ekstensi Penghemat Data di Chrome desktop.

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

Tips dan praktik terbaik penerapan

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.
   • Izinkan pengguna mengidentifikasi dan memilih mode dengan perintah yang sesuai 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. Mereka tidak menghilangkan fungsi atau data penting, mereka hanya lebih menyadari biaya yang terlibat dan pengalaman pengguna. Misalnya:
   • Aplikasi galeri foto dapat menampilkan pratinjau beresolusi lebih rendah, atau menggunakan mekanisme carousel yang tidak terlalu berat kodenya.
   • Aplikasi penelusuran dapat menampilkan lebih sedikit hasil sekaligus, membatasi jumlah hasil yang berisi 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. Sediakan logika server untuk memeriksa header permintaan Save-Data dan pertimbangkan untuk memberikan respons halaman alternatif yang lebih ringan saat diaktifkan — misalnya, kurangi jumlah resource dan dependensi yang diperlukan, terapkan kompresi resource yang lebih agresif, dll.
   • Jika Anda menyajikan respons alternatif berdasarkan header Save-Data, ingatlah untuk menambahkannya ke daftar Vary — Vary: Save-Data — untuk memberi tahu cache upstream bahwa cache tersebut harus meng-cache dan menyajikan versi ini hanya jika header permintaan Save-Data ada. Untuk mengetahui detail selengkapnya, lihat praktik terbaik untuk interaksi dengan cache.
4. Jika Anda menggunakan pekerja layanan, 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 menambah 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 mana pun yang menggunakan koneksi 2G meskipun Save-Data tidak diaktifkan. Sebaliknya, hanya karena pengguna menggunakan koneksi 4G "cepat", bukan berarti mereka tidak tertarik untuk menghemat data — misalnya, saat roaming. Selain itu, Anda dapat menambah kehadiran Save-Data dengan petunjuk klien Device-Memory untuk lebih beradaptasi dengan pengguna di perangkat dengan memori terbatas. Memori perangkat pengguna juga diiklankan di petunjuk klien navigator.deviceMemory.

Resep

Hal yang dapat Anda capai melalui Save-Data hanya dibatasi oleh ide yang dapat Anda hasilkan. Untuk memberi Anda gambaran tentang apa yang mungkin 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 disarankan. JavaScript bisa gagal dijalankan 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 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 menempatkan pemeriksaan ini sebelum markup apa pun dikirim ke klien, variabel $saveData akan berisi status Save-Data, dan akan tersedia di mana saja untuk digunakan di halaman. Dengan mekanisme yang diilustrasikan ini, mari kita lihat beberapa contoh cara 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 set berisi dua gambar: Satu gambar untuk layar "standar" (1x), dan gambar lain yang berukuran dua kali lebih besar (2x) untuk layar resolusi tinggi (misalnya, Retina Display). Class layar resolusi tinggi ini tidak selalu terbatas pada perangkat kelas atas, dan menjadi semakin umum. Jika pengalaman aplikasi yang lebih ringan lebih disukai, sebaiknya kirim gambar beresolusi lebih rendah (1x) ke layar ini, bukan 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 sedikitnya upaya yang diperlukan untuk mengakomodasi seseorang yang secara khusus meminta Anda untuk mengirimkan lebih sedikit data kepadanya. Jika tidak ingin 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 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 menghilangkan resource tertentu sepenuhnya.

Hilangkan gambar yang tidak penting

Beberapa konten gambar di web tidak terlalu penting. Meskipun gambar tersebut dapat menjadi tambahan yang bagus untuk konten, gambar tersebut mungkin tidak diinginkan oleh mereka yang mencoba memanfaatkan paket data berbayar semaksimal mungkin. 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 nyata, seperti yang dapat Anda lihat pada gambar di bawah:

Perbandingan gambar yang tidak penting yang dimuat saat Save-Data tidak ada, versus gambar yang sama yang dihilangkan saat Save-Data ada.

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

Menghilangkan font web yang tidak penting

Meskipun font web biasanya tidak menghasilkan payload total halaman tertentu sebanyak gambar, font web masih cukup populer. Mereka juga menggunakan data dalam jumlah yang tidak sedikit. Selain itu, cara browser mengambil dan merender font lebih rumit daripada yang mungkin Anda pikirkan, dengan konsep seperti FOIT, FOUT, dan heuristik browser yang membuat rendering menjadi operasi yang bernuansa.

Oleh karena itu, sebaiknya Anda tidak menyertakan 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 teks isi yang sangat bagus, tetapi mungkin tidak terlalu penting bagi pengguna yang mencoba menghemat data. Dengan menambahkan class save-data ke elemen <html> saat header Save-Data ada, kita dapat menulis gaya yang memanggil typeface yang tidak penting pada awalnya, 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 pendekatan ini, Anda dapat membiarkan cuplikan <link> dari Google Fonts tetap di tempatnya, karena browser secara spekulatif memuat resource CSS (termasuk font web) dengan menerapkan gaya ke DOM terlebih dahulu, lalu memeriksa apakah ada elemen HTML yang memanggil resource apa pun dalam lembar gaya. Jika seseorang kebetulan menggunakan Save-Data, Fira Sans tidak akan pernah dimuat karena DOM yang diberi gaya tidak pernah memanggilnya. Sebagai gantinya, Arial akan digunakan. 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 menanggung beban untuk memberikan 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 sebagai hal yang biasa untuk menjaga halaman sekecil dan sesederhana mungkin, bahkan dalam situasi konektivitas yang baik. Sebaiknya aplikasi Anda mengasumsikan bahwa pengguna menginginkan pengalaman penuh dan tanpa batas hingga Anda memiliki indikasi yang jelas sebaliknya melalui tindakan pengguna yang eksplisit.

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

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