Core Web Vitals: Panduan Lengkap Optimasi untuk SEO

Update: 8 December 2025

Baca: 4 menit

Apa Itu Core Web Vitals?

Core Web Vitals adalah serangkaian metrik yang dikembangkan Google untuk mengukur user experience di website. Sejak 2021, Core Web Vitals menjadi faktor ranking Google.

Tiga metrik utama:

LCP - Largest Contentful Paint
FID - First Input Delay (diganti INP di 2024)
CLS - Cumulative Layout Shift

Tiga Metrik Core Web Vitals

1. LCP (Largest Contentful Paint)

Apa yang diukur:
Waktu yang dibutuhkan untuk merender elemen konten terbesar yang visible di viewport.

Elemen yang dihitung:

Image (img, background-image)
Video poster
Block-level text elements
SVG

Threshold:

Good: ≤ 2.5 detik
Needs Improvement: 2.5 - 4.0 detik
Poor: > 4.0 detik

Penyebab LCP buruk:

Server response time lambat
Render-blocking resources
Image loading lambat
Client-side rendering

2. FID (First Input Delay) → INP (Interaction to Next Paint)

FID - Apa yang diukur:
Waktu dari pertama user berinteraksi (click, tap) sampai browser merespon.

INP - Apa yang diukur (pengganti FID):
Latency dari semua interaksi selama page visit, mengambil yang worst atau near-worst.

Threshold FID:

Good: ≤ 100ms
Needs Improvement: 100 - 300ms
Poor: > 300ms

Threshold INP:

Good: ≤ 200ms
Needs Improvement: 200 - 500ms
Poor: > 500ms

Penyebab FID/INP buruk:

Heavy JavaScript execution
Long tasks blocking main thread
Third-party scripts
Large DOM size

3. CLS (Cumulative Layout Shift)

Apa yang diukur:
Seberapa banyak elemen visual bergeser selama page loading.

Threshold:

Good: ≤ 0.1
Needs Improvement: 0.1 - 0.25
Poor: > 0.25

Penyebab CLS buruk:

Images tanpa dimensi
Ads tanpa reserved space
Dynamically injected content
Fonts menyebabkan FOIT/FOUT

Tools untuk Mengukur Core Web Vitals

Lab Data (Simulated)

1. Google PageSpeed Insights:

URL: pagespeed.web.dev
Lab + Field data
Recommendations included

2. Lighthouse:

Chrome DevTools
Command line
CI integration

3. WebPageTest:

Advanced testing
Multiple locations
Video comparison

Field Data (Real Users)

1. Google Search Console:

Core Web Vitals report
URL-level issues
Historical data

2. Chrome User Experience Report (CrUX):

Real user data
BigQuery access
CrUX Dashboard

3. web-vitals JavaScript library:

Real-time monitoring
Custom analytics integration

Cara Optimasi LCP

1. Optimize Server Response Time

TTFB (Time to First Byte) target: < 200ms

Strategi:

Use faster hosting
Implement caching
Use CDN
Optimize database queries

2. Eliminate Render-Blocking Resources

CSS optimization:

<!-- Critical CSS inline -->
<style>
  /* Critical above-the-fold styles */
</style>

<!-- Non-critical CSS deferred -->
<link
  rel="preload"
  href="styles.css"
  as="style"
  onload="this.onload=null;this.rel='stylesheet'"
/>

JavaScript optimization:

<!-- Defer non-critical JS -->
<script src="script.js" defer></script>

<!-- Async for independent scripts -->
<script src="analytics.js" async></script>

3. Optimize Images

a. Use modern formats:

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" />
</picture>

b. Preload LCP image:

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

c. Use responsive images:

<img
  srcset="hero-320.jpg 320w, hero-640.jpg 640w, hero-1280.jpg 1280w"
  sizes="100vw"
  src="hero-1280.jpg"
  alt="Hero image"
/>

4. Optimize Fonts

a. Preload important fonts:

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

b. Use font-display:

@font-face {
  font-family: "CustomFont";
  src: url("font.woff2") format("woff2");
  font-display: swap;
}

Cara Optimasi FID/INP

1. Reduce JavaScript Execution Time

Break up long tasks:

// Bad: Long synchronous task
function processLargeArray(array) {
  array.forEach((item) => heavyOperation(item));
}

// Good: Yield to main thread
async function processLargeArrayAsync(array) {
  for (const item of array) {
    heavyOperation(item);
    await new Promise((resolve) => setTimeout(resolve, 0));
  }
}

2. Defer Non-Critical JavaScript

Load third-party scripts later:

// Load script after page interactive
window.addEventListener("load", () => {
  const script = document.createElement("script");
  script.src = "non-critical.js";
  document.body.appendChild(script);
});

3. Use Web Workers

Offload heavy computation:

// main.js
const worker = new Worker("worker.js");
worker.postMessage(data);
worker.onmessage = (e) => {
  console.log("Result:", e.data);
};

// worker.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

4. Optimize Event Handlers

Debounce frequent events:

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

window.addEventListener("scroll", debounce(handleScroll, 100));

Cara Optimasi CLS

1. Set Dimensions on Images and Videos

Always specify width and height:

<img src="image.jpg" width="800" height="600" alt="Description" />

<!-- CSS aspect ratio -->
<style>
  img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
  }
</style>

2. Reserve Space for Ads

Create placeholder:

.ad-container {
  min-height: 250px;
  background: #f0f0f0;
}

3. Avoid Inserting Content Above Existing Content

Bad:

Banner yang muncul di atas content
Notification yang push content down

Good:

Overlay/modal yang tidak shift content
Content yang muncul di reserved space

4. Use transform Instead of Layout Properties

For animations:

/* Bad - causes layout shift */
.element {
  animation: bad-animation 1s;
}
@keyframes bad-animation {
  from {
    top: 0;
    left: 0;
  }
  to {
    top: 100px;
    left: 100px;
  }
}

/* Good - uses transform */
.element {
  animation: good-animation 1s;
}
@keyframes good-animation {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(100px, 100px);
  }
}

5. Optimize Font Loading

Prevent FOUT (Flash of Unstyled Text):

@font-face {
  font-family: "CustomFont";
  src: url("font.woff2") format("woff2");
  font-display: optional;
}

body {
  font-family: "CustomFont", system-ui, sans-serif;
}

Monitoring Core Web Vitals

Setup web-vitals Library

<script type="module">
  import { onCLS, onFID, onLCP } from "https://unpkg.com/web-vitals?module";

  function sendToAnalytics(metric) {
    const body = JSON.stringify(metric);
    // Send to your analytics
    navigator.sendBeacon("/analytics", body);
  }

  onCLS(sendToAnalytics);
  onFID(sendToAnalytics);
  onLCP(sendToAnalytics);
</script>

Google Search Console Monitoring

Login ke Search Console
Go to “Core Web Vitals”
Review Mobile dan Desktop
Click on issues untuk detail
Validate fixes

Kesimpulan

Core Web Vitals adalah metrik penting untuk SEO dan user experience. Optimasi ketiga metrik membutuhkan pendekatan berbeda:

LCP (Loading):

Optimize server response
Eliminate render-blocking resources
Optimize images dan fonts

FID/INP (Interactivity):

Reduce JavaScript execution
Break up long tasks
Defer non-critical scripts

CLS (Visual Stability):

Set dimensions on images
Reserve space for dynamic content
Avoid layout-shifting animations

Action plan:

Measure current Core Web Vitals
Identify biggest issues
Implement fixes by priority
Re-measure dan validate
Setup ongoing monitoring

Good Core Web Vitals = Better rankings + Happy users. Investasikan waktu untuk optimasi, dan hasilnya akan worth it.