Mengukur Web Performance

Sebelum mengoptimasi, kita harus bisa mengukur. "You can't improve what you don't measure."

Performance API

Browser menyediakan Performance API yang bisa kita gunakan langsung di JavaScript:

// Mengukur waktu eksekusi
performance.mark("start");
// ... kode yang diukur ...
performance.mark("end");
performance.measure("myTask", "start", "end");

const measure = performance.getEntriesByName("myTask")[0];
console.log(measure.duration); // dalam milidetik

Navigation Timing

Untuk mengukur loading halaman secara detail:

const timing = performance.getEntriesByType("navigation")[0];
console.log("DNS lookup:", timing.domainLookupEnd - timing.domainLookupStart);
console.log("TCP connect:", timing.connectEnd - timing.connectStart);
console.log("TTFB:", timing.responseStart - timing.requestStart);
console.log("DOM ready:", timing.domContentLoadedEventEnd - timing.fetchStart);

Resource Timing

Lihat berapa lama setiap resource (CSS, JS, image) diload:

const resources = performance.getEntriesByType("resource");
resources.forEach(r => {
  console.log(r.name, r.duration.toFixed(2) + "ms");
});

Tools Pengukuran

• Chrome DevTools — Performance tab, Lighthouse
• WebPageTest — Real-world testing dari berbagai lokasi
• PageSpeed Insights — Data lab + field dari Google
• web.dev/measure — Quick Lighthouse audit