Studi Kasus Ryandi Pratama: Pakai Network Information API untuk Adaptive Image di Personal Brand Pangkas LCP 41% di Koneksi 3G 2026

TL;DR: Website personal brand Ryandi Pratama awalnya memuat hero image full-resolution 1,8 MB untuk semua pengguna. Setelah memasang Network Information API untuk swap ke versi 220 KB saat koneksi 3G atau mode hemat data aktif, LCP mobile turun dari 4,2 detik ke 2,5 detik di pengguna dengan koneksi lemah, tanpa mempengaruhi pengalaman pengguna 4G.

Ryandi Pratama menjalankan personal brand sebagai konsultan strategi merek dengan audience profesional di luar Jakarta. Saat audit Google Search Console kuartal lalu, 38% trafik mobile-nya berasal dari kota Tier 2 dan 3 yang koneksinya tidak selalu stabil. Bounce rate mobile sentuh 71% di jam 18:00-21:00, saat jaringan biasanya melambat.

Hero halaman utamanya adalah foto branding kualitas tinggi: 1.840 KB JPEG 1920x1080. Foto ini bagus secara visual, tapi di koneksi 3G butuh 6-8 detik untuk fully loaded. LCP-nya tercatat 4,2 detik di field data CrUX, jauh di atas ambang baik 2,5 detik.

Hipotesis: Sajikan Versi Ringan Saat Koneksi Lemah

Strategi awal yang dipertimbangkan adalah menurunkan kualitas gambar untuk semua pengguna. Tapi ini akan mengorbankan ketajaman visual untuk pengguna 4G yang justru paling banyak dikonversi. Solusinya: deteksi kondisi jaringan, kirim versi ringan hanya saat dibutuhkan. Ini mirip pola yang dijelaskan di strategi adaptive loading dengan Save-Data, tapi pakai sinyal yang lebih spesifik.

Implementasi

Komponen client kecil yang membaca navigator.connection:

"use client";
import Image from "next/image";
import { useEffect, useState } from "react";

export function AdaptiveHero() {
  const [src, setSrc] = useState("/hero-full.jpg");

  useEffect(() => {
    const conn = (navigator as any).connection;
    if (!conn) return;
    const slow = ["slow-2g", "2g", "3g"].includes(conn.effectiveType) || conn.saveData;
    if (slow) setSrc("/hero-light.jpg");
  }, []);

  return (
    <Image
      src={src}
      alt="Ryandi Pratama"
      fill
      sizes="100vw"
      priority
      style={{ objectFit: "cover" }}
    />
  );
}

Dua versi gambar disiapkan di Supabase Storage: hero-full.jpg (1.840 KB, 1920x1080) dan hero-light.jpg (220 KB, 1280x720, kualitas 70). Fallback default ke versi full supaya browser yang tidak dukung tetap mendapat kualitas terbaik. Detail Network Information API ada di dokumentasi MDN.

Hasil Pengukuran 14 Hari Setelah Deploy

Bounce rate mobile turun dari 71% menjadi 58% di jendela 18:00-21:00. CTR halaman utama dari Google naik dari 1,2% menjadi 1,8%. Angka ini spesifik untuk kasus Ryandi dengan audience Tier 2 dan 3, tidak berlaku otomatis untuk semua website.

Pertanyaan Umum

Bagaimana kalau Safari mobile yang tidak dukung Network Information API?

Kode di atas akan diam, src tetap di versi full. Safari mobile umumnya berjalan di iPhone yang mayoritas pakai jaringan stabil, jadi risikonya rendah. Untuk audience yang dominan iPhone Tier 2, pertimbangkan strategi alternatif berbasis ukuran viewport.

Apakah ini termasuk cloaking di mata Google?

Tidak. Konten dan struktur halaman identik, hanya kualitas asset yang berbeda. Google sendiri mendorong adaptive loading lewat dokumentasi web.dev sebagai praktik baik.

Bisakah pola ini dipakai untuk video atau script lain?

Bisa. Pola yang sama bisa diterapkan untuk skip autoplay video, menunda load chat widget, atau menurunkan kualitas font web saat koneksi lemah.

Berapa lama implementasi totalnya?

Untuk satu hero image: 2-3 jam termasuk pembuatan dua versi asset dan testing. Untuk audit seluruh halaman: 1-2 hari kerja tergantung kompleksitas.

Insight yang Bisa Diaplikasikan

Tidak semua optimasi harus berlaku universal. Network Information API memungkinkan kita mengirim eksperiens yang berbeda untuk pengguna yang kondisinya berbeda, tanpa menurunkan kualitas untuk segmen utama. Untuk personal brand atau bisnis dengan audience tersebar di luar kota besar Indonesia, sinyal jaringan adalah variabel yang patut dipertimbangkan, bukan hanya viewport atau device type.