Studi Kasus Aris Setiawan: Pasang Priority Hints di Hero Image Pangkas LCP dari 3,1 ke 1,2 Detik 2026

TL;DR: Aris Setiawan, klien personal branding Vito Atmo, punya hero image yang loading lambat karena bersaing prioritas dengan font dan script analytics. Setelah pasang fetchpriority="high" di hero image plus fetchpriority="low" di gambar bawah fold, LCP turun dari 3,1 ke 1,2 detik dalam dua minggu. Tidak ada migrasi framework, tidak ada perubahan CDN.

Masalah: hero image dapat prioritas rendah dari browser

Februari 2026, Vito Atmo melakukan audit Core Web Vitals untuk website personal branding Aris Setiawan. Hasil pengukuran PageSpeed Insights menunjukkan:

• LCP: 3,1 detik (Poor, threshold 2,5 detik)
• INP: 180 ms (Good)
• CLS: 0,04 (Good)

LCP-nya hero image profesional ukuran 1200x800. Aneh, karena gambar sudah pakai WebP, sudah 84 KB, sudah di CDN. Setelah inspect waterfall network di Chrome DevTools, terlihat browser men-download Google Fonts CSS dan Google Tag Manager script dengan prioritas tinggi, sementara hero image masuk antrian prioritas medium. Akibatnya, image baru selesai di-paint setelah font dan analytics siap.

Hipotesis dan eksekusi

Browser modern membuat keputusan prioritas berdasarkan heuristik. Heuristik ini sering keliru di kasus personal branding website di mana hero image adalah aset paling penting visual. Solusinya: override secara manual lewat Priority Hints, spesifik atribut fetchpriority.

Eksekusi tiga langkah:

1. Tandai hero image sebagai prioritas tinggi.

<Image
  src="/aris-hero.webp"
  alt="Aris Setiawan, konsultan keuangan"
  width={1200}
  height={800}
  priority
  fetchpriority="high"
/>

Next.js 15 sudah expose atribut fetchpriority di komponen Image. Kombinasi priority plus fetchpriority="high" memastikan browser memesan slot prioritas tinggi tanpa menunggu layout selesai.

2. Turunkan prioritas gambar testimonial bawah fold.

<img
  src="/testimoni-client-1.webp"
  loading="lazy"
  fetchpriority="low"
  alt="Testimoni klien"
/>

Tanpa langkah ini, browser kadang menarik testimonial image bersamaan dengan hero, menyebabkan antrian network penuh.

3. Tambah preconnect ke domain CDN gambar.

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Langkah ini menyelesaikan DNS plus TCP plus TLS handshake lebih awal, memangkas waktu tunggu sebelum request hero image.

Hasil dalam 14 hari

Setelah deploy ke production, pengukuran field data via Chrome User Experience Report:

Angka naiknya impression konsisten dengan klaim Google Search Central di dokumentasi Page Experience bahwa LCP yang masuk threshold Good berkorelasi positif dengan ranking. Catatan: korelasi ini bervariasi tergantung niche dan kompetisi, jadi angka 22 persen tidak universal.

Pertanyaan Umum

Apakah priority hints bisa dipakai di semua framework?

Bisa. Atribut fetchpriority adalah standar HTML, didukung Chrome sejak versi 101, Edge, dan Safari sejak 17. Untuk Next.js, pakai komponen Image. Untuk HTML statis, pasang langsung ke tag img.

Berapa banyak elemen yang boleh ditandai high?

Maksimal satu sampai dua per halaman. Lebih dari itu membuat prioritas kehilangan makna karena browser tetap harus antri.

Apakah ini menggantikan lazy loading?

Tidak. Priority hints mengatur urutan request, lazy loading menunda request. Untuk gambar bawah fold, kombinasikan loading="lazy" plus fetchpriority="low".

Bagaimana cara verifikasi tanpa tunggu CrUX?

Pakai Lighthouse di mode mobile dengan throttling Slow 4G. Bandingkan LCP sebelum dan sesudah. Untuk lab data, hasil biasanya konsisten dengan field data dalam selisih 10 sampai 20 persen.

Apakah aman dipasang di hero image yang berubah-ubah (carousel)?

Untuk carousel, tandai high hanya pada slide pertama. Slide berikutnya biarkan default. Carousel image kedua dan seterusnya bukan kandidat LCP.

Catatan teknis untuk marketer

Marketer yang tidak ngoding bisa minta developer pasang ini dalam 30 menit. Yang penting adalah identifikasi dulu apa elemen LCP halaman. Pakai Chrome DevTools, tab Performance Insights, cari label "Largest Contentful Paint". Setelah tahu elemen mana, langsung tandai prioritas. Hasil terukur dalam 7 sampai 14 hari di CrUX, tergantung volume traffic site.

Yang dipelajari Vito Atmo dari proyek Aris Setiawan: optimasi LCP bukan selalu soal kompres gambar lebih kecil. Kadang gambar sudah optimal, tapi browser keliru menebak prioritas. Priority hints adalah cara halus untuk mengoreksi heuristik browser tanpa migrasi besar.