Panduan

Audit Performa Website Tanpa Metrik Rekayasa

Respons HTML yang cepat adalah bukti teknis yang sangat berharga, tetapi itu bukan pengukuran yang sama dengan LCP, INP, atau CLS di browser pengguna nyata.

Jawaban Singkat

Gunakan metrik waktu server dan anggaran markup untuk mendeteksi risiko pengiriman. Analisis data lapangan pengguna nyata sebelum mengklaim kepatuhan Core Web Vitals.

Awali dengan jalur respons dan waktu server

Catat waktu resolusi DNS, jabat tangan TLS, waktu ke byte pertama (TTFB), jumlah lompatan pengalihan, kompresi server (Brotli atau Gzip), dan ukuran transfer HTML. Dokumen HTML yang ringan di bawah 150 KB memungkinkan browser mengurai token awal dan merender konten tanpa penundaan. Perbaiki respons yang gagal, pengalihan 301/302 yang tidak perlu, dan pemrosesan backend yang lambat sebelum mengoptimalkan aset sekunder.

Pisahkan anggaran rekayasa markup dari Core Web Vitals

Ukuran HTML, kompleksitas pohon DOM (menjaga total elemen di bawah 1.500), dan jumlah skrip adalah anggaran rekayasa markup dan server. Sebaliknya, Core Web Vitals mengukur pengalaman pengguna nyata dan membutuhkan mesin tata letak browser; metrik lapangan (LCP, INP, CLS) harus dievaluasi pada persentil ke-75 kunjungan nyata (seperti data CrUX) alih-alih ping server sintetis.

Periksa jalur rendering kritis secara mendalam

Identifikasi skrip pemblokir rendering klasik di bagian <head> yang tidak memiliki atribut async, defer, atau type='module'. Tinjau permintaan lembar gaya (usahakan kurang dari 6 file CSS penting) dan volume skrip sebaris (inline). Memindahkan skrip sebaris berukuran besar (> 100 KB) ke dalam file eksternal yang dapat di-cache akan membebaskan thread utama browser selama penguraian HTML awal.

Optimalkan strategi pengiriman aset dan media gambar

Pastikan semua gambar di bawah lipatan layar (below-the-fold) menerapkan loading='lazy' asli serta atribut width dan height eksplisit untuk mencegah pergeseran tata letak kumulatif (CLS). Pertahankan gambar utama di bagian atas layar (LCP) agar dimuat secara langsung (eager) dengan fetchpriority='high' agar tidak tertunda secara tidak sengaja. Terapkan format kompresi modern seperti WebP atau AVIF untuk aset media visual.

Prioritaskan berdasarkan dampak pengguna dan lakukan verifikasi

Atasi kueri basis data backend yang lambat dan aset pemblokir rendering sebelum melakukan optimasi kecil-kecilan. Ukur telemetri lapangan nyata dan jalankan pengujian lab otomatis dengan pembatasan jaringan sebelum dan sesudah setiap perubahan penting untuk memastikan peningkatan kecepatan yang terukur.

Performa situs: Pengiriman HTML, ukuran muatan, dan pemblokir render potensial.

Mulai audit gratis →