# Membangun Landing Page Produksi yang Meraih Skor 100 di Core Web Vitals > Panduan praktis meraih skor Lighthouse sempurna di landing page Next.js — mulai dari LCP, CLS, hingga INP. URL: https://www.matthewswong.com/id/blog/production-landing-page-core-web-vitals/ - Author: Matthews Wong (https://www.matthewswong.com/id/about/) - Published: 2025-06-10 - Updated: 2025-06-10 - Category: Web Dev Setiap developer pernah meluncurkan landing page yang terasa membanggakan, lalu menjalankan Lighthouse dan melihat skornya ambrol dihujani merah. Saya pernah di posisi itu. Setelah mengirimkan beberapa situs Next.js ke produksi — termasuk portofolio ini — saya mengembangkan proses yang bisa diulang untuk meraih hijau di semua metrik: LCP di bawah 2,5 detik, CLS di bawah 0,1, dan INP di bawah 200 milidetik. Artikel ini adalah proses tersebut, tanpa filter. ## Memahami Core Web Vitals: Lebih dari Sekadar Angka Lighthouse Core Web Vitals (CWV) Google adalah metrik lapangan, bukan metrik lab. Perbedaan ini sangat penting. Lighthouse berjalan di lingkungan lab yang dikontrol pada perangkat simulasi kelas menengah. CWV diukur pada pengguna nyata yang mengunjungi situs Anda, dilaporkan kembali melalui Chrome User Experience Report (CrUX). Skor Lighthouse sempurna tidak menjamin data lapangan yang baik — dan sebaliknya. ### LCP — Largest Contentful Paint LCP mengukur kapan elemen konten terbesar yang terlihat selesai dirender. Pada landing page biasa, itu adalah gambar hero atau judul di atas lipatan. Penyebab paling umum LCP buruk adalah memperlakukan gambar hero seperti gambar biasa — menggunakan lazy-loading. Selalu tambahkan priority pada gambar hero Anda. Ini menghasilkan fetchpriority high dan membiarkan browser mulai mengambil gambar segera saat parsing HTML. ### CLS — Cumulative Layout Shift CLS adalah metrik yang bisa meledak tanpa perubahan kode — cukup tambahkan banner, popup persetujuan cookie, atau slot iklan yang dimuat setelah paint awal. Aturannya sederhana: jangan pernah menyuntikkan konten di atas konten yang sudah ada. Reservasi ruang untuk setiap elemen dinamis menggunakan width/height eksplisit atau CSS aspect-ratio sebelum konten dimuat. > Gunakan preload link untuk gambar LCP Anda jika itu adalah background-image yang diatur melalui CSS, bukan tag img — prop priority di Next.js Image hanya berfungsi untuk elemen img. Tambahkan secara manual di document head melalui next/head atau metadata API. ## Konfigurasi Next.js untuk Performa Produksi next.config.ts yang dikonfigurasi dengan baik menghilangkan seluruh kategori masalah performa sebelum satu baris kode komponen ditulis. Lever utamanya adalah optimasi gambar, penanganan CSS, dan analisis bundle. Mengaktifkan AVIF sebagai preferensi format gambar pertama dapat memotong ukuran gambar 40 hingga 50 persen dibandingkan WebP. ### Strategi Font dan Pemuatan Skrip Font adalah salah satu sumber CLS dan regresi LCP yang paling sering diabaikan. Menggunakan next/font/google daripada @import manual atau tag link memberikan subset otomatis, self-hosting di domain Anda sendiri, dan preloading yang terpadu dalam komponen. > **Jebakan Skrip Pihak Ketiga** > Satu skrip pihak ketiga yang dimuat dengan strategy beforeInteractive bisa merusak skor INP Anda sendirian dengan memblokir main thread selama hidrasi. Audit setiap tag skrip di codebase Anda. Gunakan strategy afterInteractive atau lazyOnload sebagai default. ## Mengukur INP Dunia Nyata dan Memperbaiki Keterlambatan Interaksi INP menggantikan FID sebagai Core Web Vital pada Maret 2024, dan jauh lebih sulit untuk dioptimalkan. Penyebab utama INP buruk adalah tugas-tugas panjang di main thread — JavaScript yang berjalan lebih dari 50 milidetik tanpa menghasilkan. Server components Next.js membantu dengan memindahkan rendering dari klien sepenuhnya. ## Integrasi CI: Jangan Pernah Mengirimkan Regresi Satu-satunya cara untuk mempertahankan skor Lighthouse sempurna dari waktu ke waktu adalah membuat tidak mungkin melakukan merge PR yang merusaknya. Saya menggunakan Lighthouse CI di GitHub Actions, dikonfigurasi untuk gagalkan build jika metrik CWV apa pun turun di bawah ambang batas. ## Checklist Baseline Pribadi Saya Sebelum landing page apa pun diluncurkan, saya menjalankan checklist ini: gambar hero memiliki prop priority dan disajikan sebagai WebP atau AVIF; semua font menggunakan next/font; tidak ada tag skrip biasa di layout; dimensi eksplisit pada semua gambar dan embed; Lighthouse CI lulus di PR. ## Sumber & Bacaan Lanjutan - Google — Core Web Vitals - Vercel — Next.js Image Optimization - Google — Lighthouse CI ## Source links - https://web.dev/vitals/ - https://nextjs.org/docs/app/building-your-application/optimizing/images - https://github.com/GoogleChrome/lighthouse-ci ## FAQ ### Mengapa skor Lighthouse sempurna tidak menjamin Core Web Vitals yang baik di lapangan? Lighthouse berjalan di lingkungan lab yang dikontrol pada perangkat simulasi kelas menengah, sedangkan Core Web Vitals diukur pada pengguna nyata dan dilaporkan melalui Chrome User Experience Report (CrUX). Kondisi perangkat keras, jaringan, dan perilaku pengguna di dunia nyata sangat berbeda dari simulasi lab. Artinya, Anda harus mengoptimalkan untuk pengguna sebenarnya, bukan sekadar untuk alat pengujian. ### Apa perbaikan paling penting untuk LCP yang lambat pada landing page Next.js? Penyebab paling umum adalah lazy-loading pada gambar hero, yang merupakan perilaku default Next.js Image. Menambahkan prop priority pada gambar hero menghasilkan fetchpriority high dan menghapus intersection observer lazy-loading, sehingga browser dapat mengambil gambar segera saat parsing HTML. Perubahan satu ini biasanya memberikan dampak terbesar pada LCP. ### Bagaimana mengaktifkan AVIF di next.config.ts meningkatkan performa, dan seberapa besar pengaruhnya? Menetapkan AVIF sebagai preferensi format gambar pertama di konfigurasi Next.js dapat memotong ukuran file gambar 40 hingga 50 persen dibandingkan WebP, dengan browser yang secara otomatis jatuh kembali ke WebP atau JPEG untuk klien yang tidak mendukung. Dikombinasikan dengan minimumCacheTTL yang panjang, gambar yang telah dioptimalkan juga disajikan dari cache pada kunjungan ulang, mengurangi beban origin dan memperbaiki LCP kunjungan berulang. ### Bagaimana satu skrip pihak ketiga bisa merusak skor INP, dan apa solusi yang direkomendasikan? Skrip yang dimuat dengan strategy beforeInteractive memblokir main thread selama hidrasi, yang langsung menaikkan INP — metrik yang mengukur keterlambatan interaksi terburuk sepanjang sesi halaman. Solusinya adalah mengaudit setiap tag skrip dan menjadikan strategy afterInteractive atau lazyOnload sebagai default, kecuali skrip benar-benar kritis untuk rendering. Selalu uji perbedaan sebelum dan sesudah di Lighthouse sebelum menerima persyaratan vendor untuk memuat skrip lebih awal. ### Bagaimana mencegah regresi Core Web Vitals sampai ke produksi? Artikel ini merekomendasikan integrasi Lighthouse CI ke GitHub Actions, dikonfigurasi untuk menggagalkan build jika metrik CWV apa pun turun di bawah ambang batas yang ditentukan. Workflow ini berjalan pada setiap pull request terhadap URL deployment preview. Menggabungkannya dengan komentar diff ukuran bundle berarti setiap reviewer dapat melihat dampak performa dari sebuah perubahan sebelum di-merge, sehingga regresi tidak mungkin terkirim secara tidak sengaja. --- - HTML version: https://www.matthewswong.com/id/blog/production-landing-page-core-web-vitals/ - English: https://www.matthewswong.com/en/blog/production-landing-page-core-web-vitals/ - Site index for agents: https://www.matthewswong.com/llms.txt - Sitemap: https://www.matthewswong.com/sitemap.xml - API description (OpenAPI): https://www.matthewswong.com/openapi.json