Studi Kasus Felicia Tan: Pangkas LCP dari 3,9 ke 1,6 Detik dengan CDN Image Optimization 2026

TL;DR: Felicia Tan, konsultan public speaking yang membangun personal brand di Indonesia, awalnya punya skor LCP 3,9 detik di halaman utama karena hero image PNG 1,8 MB diserve langsung dari Supabase Storage. Setelah memindahkan delivery image ke Cloudflare Images dengan transformasi otomatis ke AVIF dan resize per breakpoint, LCP turun ke 1,6 detik dalam 4 hari kerja tanpa mengubah satu baris kode komponen Hero.

Sebagian besar personal brand di Indonesia masih memperlakukan gambar sebagai aset statis yang "tinggal upload". Padahal di 2026, dengan Core Web Vitals yang makin ketat dan kompetisi AI Search yang menilai pengalaman halaman, image delivery yang tidak dioptimasi bisa membatalkan kerja keras di konten dan copywriting.

Felicia datang dengan keluhan klasik: "Situsku terasa lambat di HP, tapi aku tidak tahu apa yang salah." Audit awal pakai Chrome DevTools menunjukkan hero PNG 1,8 MB jadi bottleneck. Solusi yang dipakai bukan kompres manual, melainkan migrasi delivery layer ke CDN yang punya image optimization on-the-fly.

Kondisi Awal yang Bikin LCP Berat

Felicia memakai stack Next.js 15 + Supabase Storage untuk hosting aset. Hero image di halaman utama berukuran 2400x1600 piksel format PNG 1,8 MB. Walaupun sudah pakai next/image, src masih menunjuk langsung ke URL Supabase, sehingga next/image di Vercel tetap harus download original 1,8 MB sebelum melakukan transformasi.

Hasil audit Lighthouse di koneksi 4G simulasi:

Yang menarik: TTFB sudah bagus berkat hosting di edge, tapi LCP tetap merah karena resource hero sendiri terlalu besar dan butuh waktu transfer 2,8 detik di koneksi 4G median Indonesia.

Eksekusi: Tiga Perubahan dalam 4 Hari

Hari 1. Setup Cloudflare Images dengan custom domain img.feliciatan.id. Upload ulang 12 aset utama (hero, foto profil, 10 thumbnail testimoni). Total biaya: 5 USD per bulan untuk 100 ribu transformasi.

Hari 2. Update komponen Hero di Next.js: ganti URL src dari Supabase ke Cloudflare Images dengan parameter transformasi (?format=auto&width=1600&quality=85). Tetap pakai next/image di luar untuk responsive + lazy loading.

Hari 3. Pasang signed URL untuk gambar premium yang tidak boleh hotlink. Setup cache header max-age=31536000, immutable di Cloudflare untuk semua image varian.

Hari 4. Audit ulang dengan Lighthouse + WebPageTest dari Jakarta dan Surabaya.

Hasil akhir:

Studi Kasus Konteks: Kenapa Bukan Sekadar Kompres Manual?

Pertanyaan wajar: kenapa tidak sekadar kompres PNG manual jadi 200 KB? Tiga alasan teknis dan operasional.

Pertama, format. AVIF (yang dipilih Cloudflare otomatis untuk browser yang support) 50-70% lebih kecil dari WebP dengan kualitas visual setara, dan WebP sendiri 25-35% lebih kecil dari JPEG. Kompres manual ke PNG hanya optimasi di satu dimensi.

Kedua, responsive. Hero perlu varian berbeda untuk mobile (768px), tablet (1280px), dan desktop (1920px). Kompres manual berarti maintain 3-4 file per gambar untuk setiap aset. CDN image optimization handle ini otomatis lewat query parameter.

Ketiga, future-proof. Saat AV2 atau format baru dirilis di 2027-2028, Cloudflare akan otomatis serve format optimal tanpa Felicia harus migrasi ulang.

Pelajaran yang Bisa Diterapkan Marketer Indonesia

Sebelum bicara optimasi mikro seperti font subsetting atau code splitting, prioritaskan delivery layer untuk aset terbesar. Hero image biasanya 60-80% dari total page weight, dan CDN image optimization adalah leverage tertinggi dengan effort terkecil.

Untuk personal brand atau UMKM yang belum siap bayar CDN, alternatif gratis: pakai next/image bawaan Vercel (gratis untuk hobby tier sampai trafik tertentu), atau Bunny CDN dengan free tier 100 GB bandwidth per bulan.

Yang paling penting: ukur sebelum dan sesudah. Tanpa data Lighthouse atau WebPageTest, optimasi terasa subjektif. Dengan data, dampak bisa dilaporkan ke klien atau dipakai sebagai bukti otoritas teknis di personal brand sendiri.

Pertanyaan Umum

Berapa biaya minimal untuk CDN image optimization?

Cloudflare Images mulai 5 USD per bulan untuk 100 ribu transformasi dan 100 ribu image disimpan. Bunny CDN sekitar 0,01 USD per GB bandwidth, jauh lebih murah untuk situs trafik rendah. Vercel image optimization sudah include di Pro plan (20 USD per bulan).

Apakah pindah delivery image akan merusak SEO?

Tidak, asal redirect lama 301 ke baru selama 30-90 hari dan struktur URL gambar konsisten. Google men-crawl ulang dan mengupdate indeks gambar dalam 2-4 minggu.

Apakah perlu ganti next/image jika sudah pakai CDN?

Tidak. next/image tetap dipakai untuk responsive, lazy loading, dan placeholder. CDN hanya mengganti sumber file. Kombinasi keduanya optimal.

Penutup

LCP 3,9 detik bukan dosa, asal Anda tahu kenapa dan punya rencana. Untuk personal brand seperti Felicia, image delivery yang serius bukan vanity teknis, melainkan investasi langsung ke konversi: pengunjung yang tidak bouncing punya peluang lebih besar booking sesi konsultasi.