# Cara Meningkatkan Core Web Vitals Next.js untuk Pemula > Cara meningkatkan Core Web Vitals Next.js untuk pemula: ukur LCP, CLS, INP, atur priority dan sizes next/image, pakai next/font, plus error umum. URL: https://www.matthewswong.com/id/blog/cara-meningkatkan-core-web-vitals-nextjs/ - Author: Matthews Wong (https://www.matthewswong.com/id/about/) - Published: 2026-10-17 - Updated: 2026-10-17 - Category: Web Dev > **Key takeaway:** Cara meningkatkan Core Web Vitals di Next.js: ukur dulu dengan PageSpeed Insights, beri gambar hero priority serta width dan height atau fill, tulis sizes untuk gambar responsif, pakai width dan height tetap untuk gambar kecil, dan muat font lewat next/font. Target baik menurut web.dev: LCP 2,5 detik, INP 200 milidetik, CLS 0,1. Kamu menjalankan PageSpeed Insights untuk pertama kali dan melihat LCP berwarna merah, padahal halamannya hanya berisi satu gambar besar dan beberapa teks. Kamu menambahkan komponen Image seperti di dokumentasi, tetapi skornya tidak berubah. Atau teks di atas lipatan melompat sesaat setelah font masuk. Pemula biasanya tersangkut di sini karena tidak tahu bagian mana yang lambat, jadi semua perbaikan terasa seperti tebakan. Panduan ini membenahi tiga hal yang paling sering menjadi penyebab: gambar hero, ukuran gambar responsif, dan font. Semua nama prop dan perilakunya saya cocokkan dengan dokumentasi Next.js 15 dan web.dev. Contohnya mengikuti pola yang dipakai situs ini: hero blog memakai fill, sizes, dan priority, logo kecil memakai width dan height tetap, dan font dihosting sendiri lewat next/font/local. Saya tidak menjanjikan berapa milidetik yang kamu hemat; itu harus kamu ukur di halamanmu sendiri. Ingin memahami konsepnya dulu dari nol? Ada pelajaran gratis Core Web Vitals, next/image, dan next/font dengan diagram interaktif dan kuis. Artikel ini adalah versi praktik langkah demi langkahnya. Yang kamu butuhkan Project Next.js 15 dengan App Router yang bisa di-build (npm run build). Satu halaman dengan gambar besar di bagian atas (hero) dan beberapa gambar kecil seperti logo. Browser Chrome dengan DevTools, dan akses ke pagespeed.web.dev untuk situs yang sudah online. Kemauan mengukur sebelum dan sesudah setiap perubahan, satu perubahan per kali. Kalau kamu butuh gambaran performa Next.js yang lebih luas, baca juga panduan optimasi performa Next.js setelah selesai di sini. ## Langkah 1: Ukur dulu, bedakan data lapangan dan data lab Sebelum mengubah kode, ketahui angka awalnya. PageSpeed Insights menampilkan dua jenis data. Data lapangan berasal dari Chrome User Experience Report (CrUX), yaitu kunjungan nyata selama 28 hari terakhir, dan ditampilkan pada persentil ke-75. Data lab berasal dari Lighthouse yang berjalan di lingkungan simulasi. Jika halamanmu belum punya cukup sampel, PageSpeed Insights memakai data tingkat origin, dan kalau itu pun kurang, tidak ada data lapangan yang ditampilkan. Tiga metrik dan batas baik menurut web.dev, semuanya dinilai pada persentil ke-75: LCP (Largest Contentful Paint, kecepatan elemen terbesar muncul) 2,5 detik atau kurang, INP (Interaction to Next Paint, respons terhadap klik dan ketukan) 200 milidetik atau kurang, dan CLS (Cumulative Layout Shift, seberapa banyak tata letak bergeser) 0,1 atau kurang. Hasil yang kamu harapkan dari langkah ini: tiga angka awal yang kamu catat, dan kamu tahu mana yang merah. Lighthouse tidak bisa mengukur INP karena tidak ada interaksi pengguna; ia memakai Total Blocking Time sebagai pengganti di lab. Data lab dan data lapangan bisa berbeda karena kondisinya berbeda. Pakai lab untuk mencari penyebab, pakai lapangan untuk menilai hasil akhir. ## Langkah 2: Perbaiki gambar hero dengan priority LCP biasanya adalah gambar atau blok teks terbesar yang terlihat saat halaman dibuka, dan di banyak halaman itu adalah gambar hero. Komponen Image dari next/image melakukan lazy load secara default. web.dev menyatakan jangan pernah me-lazy-load gambar LCP, karena unduhannya baru dimulai setelah browser memastikan gambar itu ada di viewport. Pada hero, tambahkan priority. Untuk hero yang lebarnya mengikuti layar, pakai fill di dalam pembungkus yang punya rasio aspek tetap. Dokumentasi mensyaratkan induk dari gambar fill berposisi relative, fixed, atau absolute. Beginilah hero blog di situs ini dibuat. Hasil yang diharapkan: gambar hero ikut diunduh sejak awal dan ruangnya sudah dipesan, sehingga tidak ada lompatan saat gambar muncul. Ingat, width dan height adalah ukuran intrinsik untuk menghitung rasio aspek; ukuran tampilan tetap diatur CSS. Keduanya wajib kecuali gambar diimpor statis atau memakai fill. ## Langkah 3: Tulis sizes untuk gambar responsif Browser tidak tahu selebar apa gambar akan ditampilkan saat membaca HTML, jadi sizes yang memberitahunya. Menurut dokumentasi Next.js, jika sizes hilang browser mengira gambar selebar viewport, yang bisa mengunduh gambar yang tidak perlu besar. Pakai sizes setiap kali gambar memakai fill atau dibuat responsif lewat CSS. sizes juga mengubah markup: tanpa sizes, Next.js menghasilkan srcset terbatas (misalnya 1x dan 2x) yang cocok untuk gambar berukuran tetap; dengan sizes, ia menghasilkan srcset lengkap berisi lebar seperti 640w dan 750w. Browser hanya mengunduh satu kandidat yang dipilihnya. Periksa HTML hasil build untuk memastikannya. ## Langkah 4: Pakai width dan height tetap untuk gambar kecil Kebalikannya juga penting. Marquee sertifikasi di situs ini menampilkan logo 44 piksel. Komentar di kodenya mencatat bahwa fill dengan sizes berbasis piksel mencantumkan setiap lebar terkonfigurasi di srcset, sekitar 1 KB HTML per tile. Perbaikannya adalah ukuran tetap. Aturan sederhananya: gambar fluid seperti hero dan sampul kartu memakai fill dan sizes; gambar berukuran tetap seperti logo dan avatar memakai width dan height. Kalau kamu penasaran bagaimana srcset dan cache gambar bekerja di balik layar, baca bedah internal optimasi gambar next/image . ## Langkah 5: Muat font lewat next/font next/font melakukan self-hosting file font bersama aset statis lainnya, sehingga browser tidak mengirim request ke penyedia font. Untuk font Google, CSS dan file diunduh saat build. Menurut dokumentasi, ini memungkinkan memuat font web tanpa layout shift. Default display adalah swap dan default preload adalah true. Rekomendasi dokumentasi: pakai font variabel. Kalau build di CI tidak boleh bergantung pada jaringan ke penyedia font, simpan file-nya di repo dan pakai next/font/local. Situs ini pindah ke cara itu setelah build Docker di CI gagal mengunduh font dari Google dan seluruh deploy ikut gagal. Satu file font variabel sekarang mencakup bobot 400 sampai 800. Menurut dokumentasi, next/font menyediakan opsi adjustFontFallback (aktif secara default untuk font Google) agar font cadangan disesuaikan dan CLS berkurang. Untuk font lokal, nilainya Arial, Times New Roman, atau false. Jangan matikan kecuali kamu tahu alasannya. ## Langkah 6: Verifikasi hasilnya Build produksi lalu baca HTML yang benar-benar dikirim, bukan kodenya. Hasil yang diharapkan: ada link preload untuk gambar hero, gambar responsif membawa string sizes yang kamu tulis, dan tidak ada request ke penyedia font. Setelah itu jalankan PageSpeed Insights lagi dan bandingkan dengan angka di Langkah 1. Data lab berubah segera, tetapi data lapangan memakai jendela 28 hari, jadi perbaikan baru terlihat penuh setelah beberapa minggu. Bagaimana dengan INP? next/image dan next/font menyasar pemuatan dan kestabilan. INP menyangkut kecepatan respons setelah klik atau ketukan, dan itu biasanya soal pekerjaan berat di event handler, bukan gambar. Ukur interaksi nyata sebelum menebak. Error umum dan cara memperbaikinya Tujuh dari delapan masalah ini adalah kesalahan penerapan yang gampang dikenali; yang kedelapan adalah salah paham cara membaca angka. Gejala Penyebab Perbaikan LCP merah, hero muncul terlambat Hero memakai default next/image, yaitu lazy load, sehingga unduhan menunggu layout Tambahkan priority pada gambar hero Setelah menambah priority, LCP tidak membaik priority dipasang di banyak gambar, padahal web.dev menyebut lebih dari satu atau dua gambar membuatnya tidak membantu Pasang hanya pada gambar yang menjadi elemen LCP Next.js meminta width dan height, atau tata letak melompat saat gambar muncul Rasio aspek tidak diketahui, sehingga ruang tidak dipesan Set width dan height, impor gambar secara statis, atau pakai fill di dalam pembungkus berposisi Gambar fill tidak tampil atau ukurannya aneh Elemen induk tidak berposisi relative, fixed, atau absolute Beri induknya position relative dan tinggi atau rasio aspek yang jelas Ponsel mengunduh gambar yang terlalu besar sizes tidak ditulis, jadi browser mengira gambar selebar viewport Tulis sizes sesuai lebar tampilan sebenarnya per breakpoint HTML membengkak oleh srcset panjang untuk logo atau ikon kecil fill dengan sizes piksel mencantumkan setiap lebar terkonfigurasi Pakai width dan height tetap agar srcset hanya 1x dan 2x Gambar dari domain lain gagal dengan 400 Bad Request Host gambar belum didaftarkan di remotePatterns pada konfigurasi Next.js Tambahkan hostname dan path-nya ke images.remotePatterns, lalu restart Lab hijau, tetapi PageSpeed Insights lapangan masih merah Data lab adalah simulasi; data lapangan adalah pengguna nyata selama 28 hari pada persentil ke-75 Nilai hasil dari data lapangan, pakai lab untuk debugging, dan tunggu jendela 28 hari Checklist sebelum deploy Kamu sudah mencatat LCP, INP, dan CLS awal dari PageSpeed Insights. Gambar hero punya priority, dan hanya satu atau dua gambar yang punya. Setiap gambar punya width dan height, atau fill di dalam pembungkus berposisi. Gambar fluid punya sizes; gambar kecil berukuran tetap tidak memakai fill. Font dimuat lewat next/font, sekali di satu modul, dengan subsets atau file lokal. HTML hasil build diperiksa dengan curl, lalu PageSpeed Insights dijalankan ulang. Belajar lebih dalam Artikel ini fokus pada langkah praktik. Penjelasan konsepnya, termasuk empat subbagian LCP dan diagram jalur satu gambar dari HTML sampai tampil, ada di pelajaran gratis berikut. Pelajaran: dasar Core Web Vitals, next/image, dan next/font Aturan yang bisa kamu bawa: ukur dulu, perbaiki elemen LCP dengan priority, jelaskan ukuran gambar lewat width, height, atau sizes, dan biarkan next/font menghosting font. Satu perubahan, satu pengukuran. ## Sumber dan bacaan resmi - web.dev: Web Vitals - web.dev: Optimize Largest Contentful Paint - Google: tentang PageSpeed Insights - Dokumentasi Next.js 15: komponen Image - Dokumentasi Next.js 15: modul Font ## Source links - https://web.dev/articles/vitals - https://web.dev/articles/optimize-lcp - https://developers.google.com/speed/docs/insights/v5/about - https://nextjs.org/docs/15/app/api-reference/components/image - https://nextjs.org/docs/15/app/api-reference/components/font ## FAQ ### Bagaimana cara meningkatkan LCP di aplikasi Next.js? Cari elemen terbesar, biasanya gambar hero, lalu tambahkan priority pada komponen next/image-nya agar dipreload dan tidak di-lazy-load. web.dev menyatakan jangan pernah me-lazy-load gambar LCP. Pasang priority hanya pada satu atau dua gambar, karena lebih dari itu justru tidak membantu. ### Kenapa layout Next.js saya bergeser saat gambar dimuat? Browser tidak tahu rasio aspek gambar, sehingga tidak memesan ruang. Set width dan height, impor gambar secara statis, atau pakai fill di dalam pembungkus yang berposisi dan punya rasio aspek tetap. Hal yang sama berlaku untuk font: next/font menghindari layout shift lewat self-hosting dan penyesuaian font cadangan. ### Apakah prop sizes di next/image wajib ditulis? Ya, setiap kali gambar memakai fill atau dibuat responsif lewat CSS. Tanpa sizes, browser mengira gambar selebar viewport dan bisa mengunduh file yang terlalu besar. Dengan sizes, Next.js juga menghasilkan srcset lengkap berisi daftar lebar. ### Kenapa skor Lighthouse bagus tetapi data lapangan PageSpeed Insights jelek? Lighthouse adalah data lab dari lingkungan simulasi, sedangkan data lapangan berasal dari pengguna Chrome nyata selama 28 hari terakhir pada persentil ke-75. Keduanya mengukur kondisi yang berbeda, jadi bisa tidak sama. Pakai data lab untuk debugging dan data lapangan untuk menilai apakah pengguna benar-benar terbantu. ### Apakah next/image atau next/font bisa memperbaiki INP? Tidak secara langsung. Keduanya menyasar pemuatan dan kestabilan visual, yaitu LCP dan CLS. INP mengukur seberapa cepat halaman merespons klik, ketukan, dan penekanan tombol, jadi kamu perlu memeriksa apa yang dikerjakan event handler dan mengukur interaksi nyata. --- - HTML version: https://www.matthewswong.com/id/blog/cara-meningkatkan-core-web-vitals-nextjs/ - English: https://www.matthewswong.com/en/blog/cara-meningkatkan-core-web-vitals-nextjs/ - 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