Merilis, dan Bekerja Sebagai Developer · 4/8

Performa yang dirasakan pengguna

Core Web Vitals, ukuran bundle, gambar, dan mengukur sebelum mengoptimasi.

Baca 30 menit

Setelah pelajaran ini kamu bisa

Menyebutkan Core Web Vitals dan ambang batasnya
Mengukur sebelum mengoptimasi
Menjelaskan apa yang sebenarnya membuat halaman lambat
Menetapkan performance budget yang bisa kamu tegakkan

Pekerjaan performa punya satu aturan yang mengalahkan semua teknik: ukur dulu. Intuisi developer tentang apa yang lambat lebih sering salah daripada benar, dan mengoptimasi hal yang salah menghabiskan waktu dan menambah kerumitan tanpa hasil.

Metrik	Mengukur	Baik	Buruk
LCP	Kapan konten utamanya muncul	≤ 2,5s	> 4,0s
INP	Seberapa cepat halaman merespons sentuhan	≤ 200ms	> 500ms
CLS	Seberapa banyak layout-nya melompat	≤ 0,1	> 0,25

Coba sendiri

Menilai terhadap ambang batas sungguhan, dan menghitung CLS dari pergeseran layout.

const THRESHOLDS = {
  LCP: { good: 2500, poor: 4000, unit: "ms" },
  INP: { good: 200, poor: 500, unit: "ms" },
  CLS: { good: 0.1, poor: 0.25, unit: "" },
};

function rate(metric, value) {
  const t = THRESHOLDS[metric];
  if (value <= t.good) return "good";
  if (value <= t.poor) return "needs improvement";
  return "POOR";
}

const measurements = [
  ["LCP", 1800], ["LCP", 3200], ["LCP", 5100],
  ["INP", 90],   ["INP", 340],  ["INP", 720],
  ["CLS", 0.02], ["CLS", 0.18], ["CLS", 0.41],
];

console.log("metric  value      rating");
for (const [metric, value] of measurements) {
  console.log(metric.padEnd(8) + String(value).padEnd(11) + rate(metric, value));
}

console.log("");
console.log("--- how CLS is actually computed ---");
// Each shift scores (fraction of viewport affected) x (fraction moved).
const shifts = [
  { what: "web font swapped in", impactFraction: 0.35, distanceFraction: 0.04 },
  { what: "image with no width/height loaded", impactFraction: 0.60, distanceFraction: 0.22 },
  { what: "cookie banner appeared on top", impactFraction: 0.15, distanceFraction: 0.10 },
];

let cls = 0;
for (const s of shifts) {
  const score = s.impactFraction * s.distanceFraction;
  cls += score;
  console.log("   " + s.what.padEnd(36) + score.toFixed(3));
}
console.log("   " + "TOTAL CLS".padEnd(36) + cls.toFixed(3) + "  -> " + rate("CLS", cls));
console.log("");
console.log("The image alone contributes " + (0.6 * 0.22).toFixed(3) + " - more than the whole");
console.log("'good' budget of 0.1. Setting width and height on images fixes it,");
console.log("and it is one attribute.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Apa yang sebenarnya membuat halaman lambat

Penyebab	Perbaikan	Besaran keuntungannya
Gambar tanpa optimasi	Format modern, ukuran tepat, lazy load	Besar
JavaScript terlalu banyak	Server Component, dynamic import	Besar
Request waterfall	`Promise.all`, atau pindahkan ke server	Besar
Query database N+1	Satu query dengan join	Besar
Font yang memblokir render	`font-display: swap`, preload	Sedang
Tanpa caching	Cache apa yang tidak berubah per request	Sedang
Function lambat di dalam loop	`useMemo`, setelah diukur	Biasanya sangat kecil

Performance budget

Coba sendiri

Pemeriksaan budget yang bisa dijalankan CI. Perhatikan biaya satu library di koneksi lambat.

const BUDGET = { js: 170, css: 60, images: 400 };   // kilobytes

const current = { js: 142, css: 34, images: 380 };

// A realistic slow-3G figure: about 50 KB/s of usable throughput.
const KB_PER_SECOND = 50;

console.log("asset    budget  actual   status");
let totalKb = 0;
for (const key of Object.keys(BUDGET)) {
  totalKb += current[key];
  const over = current[key] > BUDGET[key];
  console.log(
    key.padEnd(9) + (BUDGET[key] + "kb").padEnd(8) + (current[key] + "kb").padEnd(9) +
    (over ? "OVER by " + (current[key] - BUDGET[key]) + "kb" : "ok")
  );
}

console.log("");
console.log("total " + totalKb + "kb  =>  " + (totalKb / KB_PER_SECOND).toFixed(1) + "s on a slow connection");
console.log("");

// What adding one chart library does.
const CHART_LIBRARY_KB = 95;
const after = { ...current, js: current.js + CHART_LIBRARY_KB };
const afterTotal = Object.values(after).reduce((a, b) => a + b, 0);

console.log('adding a chart library (+' + CHART_LIBRARY_KB + "kb of JS):");
console.log("   js: " + after.js + "kb vs budget " + BUDGET.js +
  "  ->  OVER by " + (after.js - BUDGET.js) + "kb");
console.log("   total load time: " + (afterTotal / KB_PER_SECOND).toFixed(1) + "s (was " +
  (totalKb / KB_PER_SECOND).toFixed(1) + "s)");
console.log("");
console.log("CI can fail on this, which turns 'the site feels slower lately'");
console.log("into a review comment on the pull request that caused it.");
console.log("");
console.log("For reference, this project's own .next/static is about 1.1MB total,");
console.log("but only a fraction of that loads on any single page.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Jalankan Lighthouse di halaman beranda proyek ini, lalu di sebuah halaman pelajaran, dan bandingkan. Catat LCP masing-masingnya dan apakah lolos. Lalu atur Network ke Slow 3G, muat ulang sebuah halaman pelajaran, dan perhatikan apa yang muncul lebih dulu — itu HTML yang sudah di-prerender datang sebelum JavaScript apa pun.

Hasil yang diharapkan

Konten yang bisa dibaca sebelum JavaScript-nya termuat, karena halamannya sudah di-prerender.

Cek pemahaman

Sebuah halaman mendapat skor CLS 0,28. Perbaikan mana yang paling mungkin berpengaruh?

Membungkus perhitungan mahal dengan useMemoMengatur width dan height eksplisit pada gambar supaya ruangnya disiapkan sebelum ia termuatMengurangi ukuran bundle JavaScriptMenambah lebih banyak boundary <Suspense>

Pilih jawaban dulu