Cara Marketer Indonesia Pasang Save-Data Hint untuk Visitor 3G dan 4G Lemot Tanpa Bikin Versi Lite 2026

TL;DR: Save-Data adalah HTTP client hint yang dikirim browser saat user mengaktifkan mode hemat data. Di Next.js, baca header Save-Data: on dari headers(), lalu turunkan kualitas gambar dan skip aset berat. Untuk audiens Indonesia yang masih 30-40% pakai 3G/4G hemat data, ini cara paling cepat menaikkan retensi tanpa membangun versi lite terpisah.

Sekitar 35% pengunjung situs klien saya di awal 2026 mengakses dari koneksi seluler dengan mode hemat data aktif, mayoritas dari Jawa Timur, Sulawesi, dan Sumatra. Mereka adalah segmen yang sering terlupakan saat developer di Jakarta menguji situs dengan WiFi kantor 200 Mbps.

Mereka tidak butuh situs yang lebih sederhana, mereka butuh situs yang sadar konteks. Header Save-Data adalah cara paling murah untuk menyalakan kesadaran itu, satu header HTTP yang dikirim browser saat user nyalakan Data Saver di Chrome Android.

Cara Kerja Save-Data

Saat user nyalakan Data Saver di pengaturan Chrome Android, browser otomatis menambah header Save-Data: on ke setiap request HTTP. Server bisa baca header ini dan memutuskan: kirim gambar resolusi penuh atau versi compressed, autoplay video atau skip, prefetch agresif atau matikan.

Berbeda dengan media query prefers-reduced-data, header ini bekerja di server-side, jadi keputusan kualitas aset diambil sebelum byte pertama dikirim. Untuk LCP, ini sangat berharga, gambar hero berbeda ukuran sejak first byte.

Implementasi di Next.js 15

// app/page.tsx
import { headers } from 'next/headers';
import Image from 'next/image';

export default async function Home() {
  const h = await headers();
  const saveData = h.get('save-data') === 'on';
  const quality = saveData ? 50 : 80;
  const imgUrl = saveData ? '/hero-light.jpg' : '/hero-full.jpg';

  return (
    <Image
      src={imgUrl}
      alt="Hero"
      width={1200}
      height={600}
      quality={quality}
      priority
    />
  );
}

Untuk video autoplay, periksa di Server Component lalu render kondisional. Jangan kirim video sama sekali kalau Save-Data aktif, biarkan user klik play manual.

Studi Kasus: Vetmo Klinik Hewan

Vetmo melayani pemilik hewan peliharaan di kota besar, tapi juga banyak dari kota tier 2 dan 3 dengan konektivitas seluler kurang stabil. Sebelum pasang Save-Data hint pada April 2026:

• Bounce rate Android di luar Jabodetabek: 64%
• Mobile LCP median: 4,8 detik
• Halaman dengan video onboarding klinik: 38% drop sebelum LCP

Setelah pasang Save-Data branching (gambar hero 350 KB jadi 95 KB, video onboarding dimatikan saat Save-Data on):

Yang menarik: tidak ada keluhan dari user kota besar tentang gambar terlihat berbeda, karena mereka tidak menyalakan Save-Data dan tetap menerima versi resolusi penuh.

Yang Tidak Boleh Dipotong

Save-Data bukan alasan untuk memotong fungsi inti. Yang aman dikurangi: resolusi gambar non-essential, autoplay video, animasi web font tambahan, prefetch agresif, dynamic import untuk komponen below-the-fold.

Yang harus tetap utuh: teks konten, harga, tombol CTA, alur transaksi, gambar produk utama (kurangi resolusi, bukan hilangkan), dan informasi kontak.

Pertanyaan Umum

Apakah Save-Data dikirim oleh Safari iOS?

Tidak. Safari iOS belum mendukung Save-Data per Mei 2026. Untuk audiens iOS, kombinasikan dengan deteksi effectiveType dari Network Information API di client-side.

Apakah cache CDN bermasalah dengan header Save-Data?

Bisa, kalau tidak dikonfigurasi. Pasang Vary: Save-Data di response header supaya CDN cache versi berbeda per nilai header. Vercel dan Cloudflare mendukung ini native.

Berapa persen user Indonesia yang nyalakan Save-Data?

Berdasarkan field data dari 3 klien e-commerce kami, sekitar 18-32% session dari Android datang dengan Save-Data on, dengan konsentrasi tinggi di kota tier 2 dan 3.

Apakah ini membantu SEO?

Tidak langsung, tapi LCP yang lebih baik di koneksi lemah berkontribusi ke Core Web Vitals field score, yang adalah faktor ranking. Improvement tidak ke arah konten, tapi ke arah pengalaman teknis.

Mulai dari Hero Image, Naik ke Komponen Berat

Cara paling cepat menerima return adalah ganti satu gambar hero menjadi conditional Save-Data. Pasang, deploy, ukur LCP dari segmen Save-Data on di field data selama 2 minggu. Kalau ada peningkatan jelas, tambahkan ke video, lalu ke autoplay carousel, lalu ke prefetch link.

Referensi: MDN Save-Data dan Google web.dev: Adaptive Loading.