Optimasi Kecepatan Website 2026 — Cara Mencapai Core Web Vitals 90+

> **Ringkasan Utama** Google Core Web Vitals pada 2026: LCP (Largest Contentful Paint) < 2.5s, INP (Interaction to Next Paint) < 200ms, CLS (Cumulative Layout Shift) < 0.1. Tiga metrik ini secara langsung memengaruhi peringkat pencarian Google. Optimasi dengan dampak tertinggi: ① Konversi gambar ke WebP/AVIF ② Preload font ③ Code splitting JavaScript ④ Deployment CDN edge. Pengguna Next.js dapat mencapai Lighthouse 90+ dengan konfigurasi default yang tepat.

Apa Itu Core Web Vitals?

Core Web Vitals adalah tiga metrik utama pengalaman pengguna dari Google, yang dimasukkan sebagai sinyal peringkat SEO sejak 2021.

Tiga Metrik Inti

| Metrik | Nama Lengkap | Yang Diukur | Baik | Perlu Diperbaiki | Buruk |

|---|---|---|---|---|---|

| **LCP** | Largest Contentful Paint | Waktu untuk merender gambar atau teks terbesar | < 2.5s | 2.5–4s | > 4s |

| **INP** | Interaction to Next Paint | Waktu dari klik pengguna hingga respons visual | < 200ms | 200–500ms | > 500ms |

| **CLS** | Cumulative Layout Shift | Pergeseran tata letak yang tidak terduga saat pemuatan | < 0.1 | 0.1–0.25 | > 0.25 |

Catatan: FID (First Input Delay) digantikan oleh INP pada 2024.

Mengapa Core Web Vitals Penting

**Dampak SEO langsung**: Termasuk dalam algoritma peringkat Google — untuk konten yang sama, situs yang lebih cepat akan unggul

**Bounce rate**: LCP > 3s meningkatkan bounce rate seluler sebesar 53% (riset Google)

**Pendapatan iklan**: AdSense RPM berkorelasi dengan time-on-page → situs lebih cepat = RPM lebih tinggi

**Tingkat konversi**: Keterlambatan 1 detik = penurunan konversi 7% (riset Akamai)

Optimasi LCP

LCP biasanya ditentukan oleh waktu pemuatan hero image atau blok teks terbesar.

Optimasi Gambar (Dampak Tertinggi)

**Perbandingan format:**

| Format | Pengurangan ukuran | Dukungan browser |

|---|---|---|

| JPEG | Baseline | 100% |

| WebP | 25–35% lebih kecil | 98%+ |

| AVIF | 40–50% lebih kecil | 90%+ (2026) |

```html

<picture>

<source srcset="hero.avif" type="image/avif">

<source srcset="hero.webp" type="image/webp">

<img src="hero.jpg" alt="Hero image" width="1200" height="628" loading="eager">

</picture>

```

**Komponen Image Next.js:**

```typescript

import Image from 'next/image'

// LCP images must have priority prop

<Image

src="/hero.jpg"

alt="Hero image"

width={1200}

height={628}

priority // critical — eliminates LCP delay

quality={85}

/>

```

Preloading Resource

```html

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<link rel="preload" as="font" href="/fonts/main.woff2" type="font/woff2" crossorigin>

```

Waktu Respons Server (TTFB)

| Metode | Dampak | Implementasi |

|---|---|---|

| CDN | Caching edge global | Cloudflare, Vercel Edge |

| Cache headers | Instan untuk pengunjung yang kembali | Cache-Control: max-age=31536000 |

| SSG/ISR | HTML yang sudah di-prerender | Next.js generateStaticParams |

Optimasi INP

INP mengukur waktu dari interaksi pengguna apa pun (klik, ketuk, keyboard) hingga saat browser merender frame berikutnya.

Kurangi Pemblokiran Main Thread

```javascript

// Bad: heavy sync computation blocks click response

button.addEventListener('click', () => {

const result = heavyComputation(data) // blocks main thread

updateUI(result)

})

// Good: offload to Web Worker

const worker = new Worker('heavy-worker.js')

button.addEventListener('click', () => {

worker.postMessage(data) // runs in separate thread

})

worker.onmessage = (e) => updateUI(e.data)

```

Code Splitting (Next.js)

```typescript

import dynamic from 'next/dynamic'

// Defer components not visible on first load

const HeavyChart = dynamic(() => import('./HeavyChart'), {

loading: () => <div>Loading chart...</div>,

ssr: false

})

```

Tree Shaking

```javascript

// Bad: imports entire lodash (70KB+)

import _ from 'lodash'

// Good: imports only what you need (1KB)

import chunk from 'lodash/chunk'

```

Optimasi CLS

CLS terjadi ketika iklan, gambar, atau konten dinamis bergeser posisi selama pemuatan.

Selalu Tentukan Dimensi Gambar

```html

<img src="photo.jpg" width="800" height="600" alt="photo">

<img src="photo.jpg" alt="photo">

```

Sisihkan Ruang Iklan

```css

.ad-container {

min-height: 250px; /* pre-reserve ad space */

display: flex;

align-items: center;

justify-content: center;

}

```

Pemuatan Font

```css

@font-face {

font-family: 'MyFont';

src: url('/fonts/myfont.woff2') format('woff2');

font-display: swap; /* show system font immediately, swap when loaded */

}

```

Checklist Lighthouse 90+ (30 item)

**LCP (10 item)**

[ ] Identifikasi elemen LCP (DevTools → tab Performance)

[ ] Tambahkan priority atau preload ke gambar LCP

[ ] Konversi gambar hero ke WebP/AVIF

[ ] Gunakan next/image untuk optimasi otomatis

[ ] Sediakan gambar responsif melalui srcset

[ ] Gunakan CDN (Cloudflare Pages, Vercel Edge)

[ ] Verifikasi TTFB < 600ms

[ ] Gunakan SSG/ISR jika memungkinkan

[ ] Hapus redirect yang tidak diperlukan

[ ] Tunda semua skrip pihak ketiga

**INP (10 item)**

[ ] Periksa skor INP di Lighthouse

[ ] Hapus Long Tasks (50ms+) — tab DevTools Performance

[ ] Pindahkan komputasi berat ke Web Workers

[ ] Bundle JavaScript < 200KB (terkompresi)

[ ] Hapus polyfill yang tidak diperlukan

[ ] Terapkan useMemo/useCallback di React

[ ] Debounce/throttle event handler

[ ] Gunakan transisi CSS alih-alih animasi JS

[ ] Tambahkan async/defer ke tag skrip pihak ketiga

[ ] Optimalkan urutan eksekusi JS untuk elemen LCP

**CLS (10 item)**

[ ] Tetapkan width/height pada semua gambar dan video

[ ] Sisihkan tinggi minimum untuk kontainer iklan

[ ] Tempatkan konten yang disisipkan secara dinamis di bagian bawah

[ ] Terapkan font-display: swap pada aturan @font-face

[ ] Tambahkan tag link preload untuk font

[ ] Animasikan hanya transform/opacity (tanpa properti yang mengubah layout)

[ ] Gunakan skeleton loader untuk memesan ruang konten terlebih dahulu

[ ] Pastikan elemen sticky/fixed tidak mendorong konten

[ ] Pertahankan posisi scroll saat menyisipkan infinite scroll

[ ] Perbaiki tinggi animasi perpindahan tab dengan overflow: hidden

Alat Pengukuran

| Alat | Tujuan | URL |

|---|---|---|

| PageSpeed Insights | Data LCP/INP/CLS pengguna nyata | pagespeed.web.dev |

| Lighthouse | Skor performa berbasis lab | Chrome DevTools → Lighthouse |

| WebPageTest | Pengujian dari lokasi global | webpagetest.org |

| Chrome DevTools | Profiling mendetail | F12 → tab Performance |

| Core Web Vitals Report | Data lapangan CrUX untuk SEO | Search Console |

FAQ

**Q1. Seberapa besar pengaruh Core Web Vitals terhadap peringkat Google?** A. Google menggambarkan CWV sebagai "sinyal penentu saat hasil seimbang" — ketika kualitas konten setara, situs yang lebih cepat akan unggul. Mobile Page Experience menggunakan CWV sebagai komponen peringkat. Bobot pastinya tidak dipublikasikan, tetapi pengujian di dunia nyata secara konsisten menunjukkan perbedaan peringkat antara situs dengan LCP > 4d vs < 2d.

**Q2. Apakah Lighthouse 90+ sama dengan lulus Core Web Vitals?** A. Tidak. Lighthouse menggunakan simulasi lab; Core Web Vitals menggunakan data pengguna nyata (CrUX / Field Data). Skor Lighthouse 100 yang sempurna tidak menjamin CWV lapangan yang baik. Periksa laporan Core Web Vitals di Google Search Console untuk data yang benar-benar memengaruhi peringkat SEO.

**Q3. Apakah Next.js otomatis memberikan performa yang baik?** A. Sebagian. Next.js menyediakan optimasi gambar (next/image), optimasi font (next/font), code splitting, dan SSG/ISR secara bawaan. Namun, developer tetap harus menerapkan atribut priority dengan benar, menghapus skrip pihak ketiga yang tidak perlu, dan menentukan dimensi gambar. Dengan implementasi yang tepat, Lighthouse 85–95+ dapat dicapai.

**Q4. Apakah mengonversi ke WebP mengurangi kualitas gambar?** A. Pada quality=80–90, perbedaannya tidak terlihat oleh mata manusia. WebP menghasilkan ukuran file 25–35% lebih kecil dibanding JPEG pada kualitas visual yang sama. AVIF menawarkan kompresi yang lebih baik lagi. Alat seperti Squoosh, Cloudinary, atau next/image menangani konversi secara otomatis.

**Q5. Bagaimana cara menemukan elemen yang menyebabkan CLS?** A. Di Chrome DevTools → tab Performance, cari penanda "Layout Shift" setelah merekam. PageSpeed Insights juga mencantumkan "Avoid large layout shifts" beserta elemen spesifik yang menyebabkan pergeseran. Penyebab umum: gambar tanpa ukuran, iklan yang dimuat lalu mendorong konten, pergantian font (FOUT), konten yang disisipkan secara dinamis.

**Q6. Seberapa besar skrip pihak ketiga (GA, Hotjar) mengganggu performa?** A. Cukup signifikan — skrip pihak ketiga dapat menurunkan skor Lighthouse sebesar 10–20 poin. GA4 relatif ringan dengan pemuatan async; alat berat seperti Hotjar atau Intercom dapat sangat memengaruhi INP. Gunakan next/script dengan strategy="afterInteractive" atau "lazyOnload" untuk menunda skrip ini sampai halaman utama menjadi interaktif.

**Q7. LCP mobile selalu lebih lambat daripada desktop — bagaimana cara memperbaikinya?** A. Perangkat mobile memiliki jaringan dan CPU yang lebih lambat, sehingga LCP mobile memang lebih sulit dioptimalkan. Perbaikan: ① Sediakan gambar hero yang lebih kecil melalui srcset untuk mobile ② Sembunyikan gambar yang tidak penting di mobile ③ Inline CSS kritis ④ Cache HTML di edge CDN. Target: LCP < 2.5s bahkan di mobile.