Mengoptimalkan Core Web Vitals pada Blog Statis Jekyll

Sejak Google menjadikan Core Web Vitals sebagai faktor ranking resmi, metrik performa ini tidak lagi sekadar angka kosmetik — ia langsung mempengaruhi posisi blog kamu di hasil pencarian. Blog Jekyll secara natural sudah punya keunggulan karena bersifat statis, tapi tetap ada optimasi yang bisa dilakukan untuk meraih skor mendekati sempurna.

Apa itu Core Web Vitals?

Core Web Vitals adalah tiga metrik utama yang digunakan Google untuk mengukur pengalaman pengguna dari sisi performa:

1. LCP — Largest Contentful Paint

Mengukur waktu muat elemen konten terbesar di viewport (biasanya gambar hero atau blok teks utama).

Baik: ≤ 2.5 detik
Perlu Perbaikan: 2.5 – 4.0 detik
Buruk: > 4.0 detik

2. INP — Interaction to Next Paint (menggantikan FID sejak 2024)

Mengukur responsivitas interaksi — seberapa cepat halaman merespons ketika user klik, tap, atau input keyboard.

Baik: ≤ 200 ms
Perlu Perbaikan: 200 – 500 ms
Buruk: > 500 ms

3. CLS — Cumulative Layout Shift

Mengukur stabilitas visual — seberapa sering elemen halaman bergerak/berpindah saat dimuat.

Baik: ≤ 0.1
Perlu Perbaikan: 0.1 – 0.25
Buruk: > 0.25

Tools untuk Mengukur Core Web Vitals

PageSpeed Insights — analisis lengkap dengan data lapangan (CrUX) dan lab
Google Search Console → Core Web Vitals — laporan agregat dari data pengguna nyata
Chrome DevTools → Lighthouse → tab Performance
web.dev/measure — alternatif PageSpeed Insights

Ukur dulu sebelum mengoptimasi — tahu di mana masalahnya baru tahu apa yang harus diperbaiki.

Optimasi LCP

1. Preload Gambar Hero

Gambar terbesar di viewport (biasanya image di front matter) adalah penyebab LCP tinggi yang paling umum. Preload gambar ini di <head>:

<link rel="preload" as="image" href="/assets/images/main/jekyll.png"
      fetchpriority="high">

2. Format WebP dan Kompresi

Gambar yang lebih kecil = dimuat lebih cepat = LCP lebih baik. Konversi semua gambar featured ke WebP dengan kualitas 80:

<picture>
  <source srcset="/assets/images/main/jekyll.png" type="image/webp">
  <img src="/assets/images/main/jekyll.png" alt="Mengoptimalkan Core Web Vitals pada Blog Statis Jekyll" fetchpriority="high">
</picture>

3. Hindari Render-Blocking CSS

Pisahkan CSS kritis (above-the-fold) dari CSS non-kritis:

<!-- CSS kritis inline di <head> -->
<style>
  /* hanya CSS untuk konten yang terlihat pertama kali */
  body { margin: 0; font-family: sans-serif; }
  .header { ... }
  .hero { ... }
</style>

<!-- CSS lainnya dimuat secara async -->
<link rel="preload" href="/assets/css/main.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/css/main.css"></noscript>

4. Gunakan CDN

Blog di Cloudflare Pages atau GitHub Pages sudah menggunakan CDN. Pastikan ini dikonfigurasi dengan benar.

Optimasi CLS

1. Selalu Sertakan Dimensi Gambar

Tanpa width dan height, browser tidak bisa mereservasi ruang sebelum gambar dimuat, sehingga konten di bawahnya “melompat”. Ini adalah penyebab CLS paling umum.

<!-- Kurang baik - menyebabkan layout shift -->
<img src="foto.jpg" alt="Foto">

<!-- Benar - browser mereservasi ruang -->
<img src="foto.jpg" alt="Foto" width="800" height="450">

2. Ukuran Font yang Konsisten

Jika menggunakan Google Fonts atau font eksternal, gunakan font-display: swap dan preload font:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Atau lebih baik, host font secara lokal untuk menghindari request eksternal.

3. Hindari Injeksi Konten Dinamis di Atas Konten

Jangan inject banner, iklan, atau elemen dinamis di atas konten yang sudah dirender. Jika tidak bisa dihindari, reservasi ruang dengan CSS:

.ad-container {
  min-height: 90px;  /* reservasi ruang sebelum iklan dimuat */
}

4. Animasi dengan `transform` Saja

Animasi yang mengubah width, height, top, left, margin, atau padding menyebabkan layout shift. Gunakan transform dan opacity yang tidak menyebabkan reflow:

/* Baik - menggunakan transform */
.card:hover {
  transform: translateY(-4px);
}

/* Buruk - menyebabkan layout shift */
.card:hover {
  margin-top: -4px;
}

Optimasi INP

1. Minimalkan JavaScript

Semakin sedikit JavaScript yang dijalankan saat user berinteraksi, semakin baik INP. Blog statis Jekyll secara alami sudah minim JS.

Audit JavaScript dengan Chrome DevTools → Coverage tab untuk menemukan JS yang tidak terpakai.

2. Defer dan Async untuk Script Eksternal

<!-- Script non-kritis: defer (eksekusi setelah parse HTML selesai) -->
<script defer src="/assets/js/theme.js"></script>

<!-- Script independen: async (eksekusi segera setelah dimuat) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script>

Hindari script yang memblokir render di <head> tanpa defer atau async.

3. Gunakan `requestIdleCallback` untuk Tugas Non-Kritis

// Eksekusi kode non-kritis saat browser idle
if ('requestIdleCallback' in window) {
  requestIdleCallback(function() {
    // inisialisasi search, analytics, dsb.
    initSearch();
  });
} else {
  setTimeout(initSearch, 1000);
}

Checklist Core Web Vitals untuk Jekyll

LCP:

Gambar hero di-preload dengan <link rel="preload">
Gambar hero menggunakan format WebP dan sudah dikompres
fetchpriority="high" pada gambar LCP
CSS tidak memblokir render

CLS:

Semua gambar punya atribut width dan height
Font menggunakan font-display: swap
Tidak ada konten yang di-inject secara dinamis di atas fold

INP:

Script menggunakan defer atau async
Tidak ada script pihak ketiga berat yang memblokir thread utama
JavaScript minimal dan efisien

Kesimpulan

Blog Jekyll statis sudah punya fondasi performa yang kuat. Dengan menambahkan preload untuk gambar LCP, selalu menyertakan dimensi gambar, dan memastikan semua JavaScript non-kritis menggunakan defer, kamu sudah menyelesaikan sebagian besar masalah Core Web Vitals.

Ukur secara berkala di PageSpeed Insights dan pantau tren di Google Search Console untuk memastikan skor tetap di zona hijau.