Core Web Vitals untuk portal berita

Astro memberimu keuntungan besar di sini secara bawaan — lalu iklan, embed, dan gambar sampul mengambilnya kembali. Ini yang menentukan skor akhirmu.

Ambang

Yang dinilai adalah persentil ke-75 dari pembaca sungguhan — bukan rata-rata, dan bukan angka di laptopmu. Artinya satu dari empat pembacamu yang paling lambat yang menentukan skormu.

LCP: hampir selalu gambar sampul

<!-- Elemen LCP: eager, prioritas tinggi, ukuran pasti -->
<img
  src={urlGambar(artikel.gambar, 1200)}
  srcset={`${urlGambar(artikel.gambar, 400)} 400w,
           ${urlGambar(artikel.gambar, 800)} 800w,
           ${urlGambar(artikel.gambar, 1200)} 1200w`}
  sizes="(max-width: 700px) 100vw, 700px"
  alt={artikel.gambarAlt ?? artikel.judul}
  width="1200" height="675"
  loading="eager"
  fetchpriority="high"
  decoding="async"
/>

<!-- Preload di head: browser mulai mengunduh sebelum mem-parsing body -->
<link
  rel="preload" as="image"
  href={urlGambar(artikel.gambar, 1200)}
  imagesrcset={`… 400w, … 800w, … 1200w`}
  imagesizes="(max-width: 700px) 100vw, 700px"
  slot="kepala"
/>

CLS: iklan dan island

/* Slot iklan: pesan ruangnya SEBELUM iklan datang */
.slot-iklan {
  min-height: 250px;              /* tinggi unit iklan yang kamu pakai */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--abu-muda);
}

@media (max-width: 700px) {
  .slot-iklan { min-height: 100px; }
}

/* Server island: fallback setinggi isi sungguhannya */
.paywall-rangka { min-height: 360px; }

INP

Astro jarang bermasalah di sini karena hampir tidak ada JavaScript yang berjalan. Kalau INP-mu buruk, penyebabnya hampir pasti pihak ketiga:

Mengukur dari pembaca sungguhan

// src/components/Vitals.astro — kirim ke endpointmu sendiri
<script>
  import { onLCP, onINP, onCLS, onTTFB } from "web-vitals";

  function kirim(metrik) {
    const data = JSON.stringify({
      nama: metrik.name,
      nilai: Math.round(metrik.value),
      rating: metrik.rating,
      jalur: location.pathname,
      koneksi: navigator.connection?.effectiveType,
    });

    // sendBeacon: terkirim meski pembaca menutup tab
    navigator.sendBeacon?.("/api/vitals", data);
  }

  onLCP(kirim); onINP(kirim); onCLS(kirim); onTTFB(kirim);
</script>

// src/pages/api/vitals.ts
export const POST: APIRoute = async ({ request }) => {
  const teks = await request.text();
  const hasil = SkemaVitals.safeParse(JSON.parse(teks));

  if (hasil.success) {
    // Masuk ke log terstruktur → metrik CloudWatch (Fase 10)
    log("info", "vitals", hasil.data);
  }
  return new Response(null, { status: 204 });
};

Lighthouse vs lapangan

Lighthouse berguna untuk membandingkan sebelum-sesudah dari satu perubahan. Untuk mengetahui skormu yang sebenarnya, hanya data lapangan yang berlaku.