Kami menggunakan cookies untuk meningkatkan pengalaman Anda di website ini. Dengan melanjutkan, Anda menyetujui penggunaan cookies sesuai Kebijakan Privasi kami.
Google makin serius pakai Core Web Vitals sebagai ranking factor. Website lambat = ranking jelek = traffic hilang. Ini cara diagnosa dan perbaiki performa website Anda.
Muhamad Putra Aulia Hidayat
Sejak Google menjadikan Core Web Vitals sebagai ranking factor resmi, website yang lambat bukan hanya frustrasi user — tapi juga kehilangan traffic organic. Di 2026, standar sudah naik dan ekspektasi user makin tinggi.
| Metrik | Kepanjangan | Artinya | Target |
|---|---|---|---|
| LCP | Largest Contentful Paint | Seberapa cepat konten utama muncul | < 2.5 detik |
| CLS | Cumulative Layout Shift | Seberapa stabil layout (tidak loncat-loncat) | < 0.1 |
| INP | Interaction to Next Paint | Responsivitas saat user klik/tap | < 200ms |
# Lighthouse via Chrome DevTools
1. Buka Chrome DevTools (F12)
2. Tab Lighthouse
3. Pilih "Performance"
4. Generate Report
# PageSpeed Insights (pakai data real user)
https://pagespeed.web.dev/
# WebPageTest (lebih detail)
https://www.webpagetest.org/
LCP biasanya adalah hero image atau heading besar. Cara memperbaiki:
1. Preload critical resources
<!-- Di Next.js, pakai priority pada gambar utama -->
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority // Ini penting!
/>
2. Optimasi gambar
// JANGAN
<img src="/hero.jpg" />
// HARUS
import Image from "next/image"
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
quality={85} // Default 75 kadang terlalu rendah
placeholder="blur" // Blur placeholder saat loading
blurDataURL="..." // Base64 preview
priority // Untuk above-the-fold images
/>
3. Hosting di CDN Gambar dari CDN (seperti Vercel Image Optimization) bisa 2-3x lebih cepat dari server biasa.
CLS terjadi ketika elemen halaman berpindah saat loading. Penyebab paling umum:
// PENYEBAB: Gambar tanpa dimensi
<img src="/product.jpg" /> // Layout shift!
// SOLUSI: Selalu tentukan dimensi
<Image src="/product.jpg" width={400} height={300} alt="..." />
// PENYEBAB: Font loading yang tidak smooth
// SOLUSI: Font display swap
@font-face {
font-family: "Inter";
font-display: swap; // Tampilkan fallback font dulu
}
// PENYEBAB: Skeleton loader yang beda ukuran dengan konten asli
// SOLUSI: Pastikan skeleton loader sama persis ukurannya
Ad dan embed yang menyebabkan shift:
/* Reserve space untuk ad sebelum load */
.ad-container {
min-height: 250px; /* Ukuran ad yang diharapkan */
width: 300px;
}
INP menggantikan FID di 2024. Cara meningkatkannya:
1. Hindari long tasks di main thread
// BURUK: Kalkulasi berat di event handler
button.addEventListener("click", () => {
const result = heavyCalculation(bigData) // Blok UI!
displayResult(result)
})
// BAIK: Pindah ke Web Worker atau pecah jadi chunks
button.addEventListener("click", async () => {
const result = await runInWebWorker(heavyCalculation, bigData)
displayResult(result)
})
// Atau pakai scheduler API
button.addEventListener("click", async () => {
displayLoadingState()
await new Promise(resolve => setTimeout(resolve, 0)) // Yield to browser
const result = heavyCalculation(bigData)
displayResult(result)
})
2. Optimasi re-renders di React
// Pakai React Compiler (Next.js 16) untuk auto-optimasi
// Atau manual dengan useMemo/useCallback di area kritis
const expensiveValue = useMemo(
() => computeExpensiveValue(data),
[data]
)
// next/script priorities
import Script from "next/script"
// beforeInteractive: Butuh sebelum halaman interactive (jarang)
// afterInteractive: Default, setelah halaman interactive
// lazyOnload: Setelah semua resource lain loaded
// worker: Di Web Worker (eksperimental)
<Script
src="https://analytics.example.com/script.js"
strategy="lazyOnload" // Jangan block render!
/>
priority<img> diganti dengan <Image> Next.jsfont-display: swaplazyOnloadLCP: < 2.5 detik (hijau di PageSpeed)
CLS: < 0.1 (hijau di PageSpeed)
INP: < 200ms (hijau di PageSpeed)
TTFB: < 800ms (Time to First Byte)
FCP: < 1.8 detik (First Contentful Paint)
Di Digital Uptime, setiap website yang kami deliver wajib lulus audit PageSpeed dengan skor minimal 90. Mau kami audit dan optimasi website Anda? Konsultasi sekarang.
Tips teknologi & bisnis mingguan
Bergabung dengan 2,500+ subscriber yang mendapatkan insight teknologi, tutorial development, dan tips bisnis digital langsung ke inbox mereka setiap minggu.
Dapatkan tips & insight teknologi terbaru langsung ke inbox Anda.
© 2026 PT Digital Uptime Teknologi Informasi. Hak cipta dilindungi.