Audit Core Web Vitals Situs Statis Tanpa Mengarang Skor
Prosedur audit NgodingSantai yang memisahkan fakta struktur halaman, data lab, dan data lapangan sebelum memutuskan optimasi.
Artikel performa mudah terdengar meyakinkan dengan menampilkan skor yang tidak pernah diukur. Audit NgodingSantai mengambil arah sebaliknya: memisahkan fakta source code, data lab pada satu perangkat, dan data lapangan dari pengguna nyata. Perbaikan baru dinyatakan berdampak setelah jenis datanya disebutkan.
- Fakta source: jumlah resource, ukuran file, urutan script, dimensi gambar, dan cache.
- Data lab: hasil Lighthouse atau Performance panel pada konfigurasi tercatat.
- Data lapangan: CrUX atau RUM yang membutuhkan sampel pengguna nyata.
Tentukan halaman dan skenario
Beranda, arsip, dan artikel mempunyai struktur serta resource berbeda. Audit mencatat URL, commit, waktu, browser, viewport, mode jaringan, cache dingin atau hangat, dan apakah extension dinonaktifkan. Tanpa konteks itu, dua skor tidak dapat dibandingkan secara wajar.
Baca LCP sebagai elemen, bukan angka saja
Largest Contentful Paint menilai kapan elemen konten terbesar pada viewport selesai digambar. Pada beranda kandidatnya dapat berupa heading hero atau area ilustrasi. Pada artikel biasanya heading atau gambar studi kasus. Performance panel dipakai untuk melihat elemen aktual, initiator, dan urutan request.
Perbaikan source yang sudah dapat dibuktikan antara lain menentukan width dan height SVG, menjaga konten hero ada langsung di HTML, serta tidak menunggu JavaScript untuk judul artikel. Font eksternal dan library animasi tetap menjadi kandidat yang perlu dinilai berdasarkan waterfall, bukan langsung dihapus tanpa pengukuran.
Audit CLS melalui sumber pergeseran
Cumulative Layout Shift dapat muncul ketika gambar tanpa dimensi, konten disisipkan di atas viewport, atau font mengubah ukuran teks. SVG studi kasus sekarang mempunyai dimensi intrinsik pada markup. Pengumuman berada dalam alur dokumen; ketika ditutup, pergeseran terjadi akibat aksi pengguna sehingga konteksnya berbeda dari pergeseran tak terduga saat pemuatan.
<img src="../assets/images/case-mobile-overflow.svg"
width="1200" height="675"
alt="Diagram audit overflow mobile">Audit INP pada interaksi nyata
Interaksi prioritas situs adalah membuka dropdown kategori, membuka panel mobile, mengganti tema, membuka dialog pencarian, memfilter artikel, dan menyalin kode. Handler harus melakukan sedikit kerja sinkron. Animasi pihak ketiga pada beranda ditunda dan dihormati oleh prefers-reduced-motion.
Kurangi JavaScript yang tidak perlu per halaman
Halaman artikel membutuhkan data related article dan navigasi, tetapi tidak membutuhkan seluruh library animasi beranda. Karena itu library GSAP, Lenis, Lottie, Tilt, dan Splitting hanya dimuat di homepage. Artikel memakai articles.js dan app.js. Script memakai defer agar parsing HTML tidak dihentikan.
Periksa cache dengan nama aset yang sekarang
Aset belum memakai content hash. Nginx memberi cache tujuh hari dan HTML selalu diperiksa ulang. Kebijakan setahun dengan immutable belum dipakai karena pembaruan style.css pada URL sama dapat tertahan. Keputusan performa mempertimbangkan mekanisme invalidasi, bukan hanya umur maksimum.
Jangan mengira preload selalu membantu
Homepage sebelumnya melakukan preload stylesheet yang kemudian tetap dilink. Preload dapat membantu resource kritis, tetapi terlalu banyak preload bersaing dengan dokumen, font, dan gambar. Network waterfall diperiksa untuk memastikan prioritas sesuai. Resource pihak ketiga tidak diberi preconnect tanpa bukti sering dibutuhkan.
Prosedur lab yang dapat diulang
- Deploy commit yang akan diuji dan catat hash.
- Buka profil browser bersih tanpa extension.
- Pilih viewport dan throttling yang sama.
- Jalankan tiga kali, simpan median, dan jangan mencampur cold serta warm cache.
- Periksa trace dan waterfall, bukan hanya skor ringkasan.
- Ubah satu kelompok penyebab, deploy, lalu ulangi konfigurasi yang sama.
Kapan memakai data lapangan
CrUX hanya tersedia jika origin atau URL mempunyai sampel yang cukup. Situs baru atau traffic kecil dapat tidak memiliki data. Ketiadaan data bukan skor nol dan tidak boleh diganti dengan angka simulasi. RUM dapat ditambahkan kemudian setelah kebijakan privasi serta pengumpulan data disiapkan.
Prioritas source sebelum angka
- Konten utama tersedia di HTML dan tidak menunggu render client.
- Gambar mempunyai dimensi dan ukuran yang sesuai kebutuhan.
- Script non-kritis memakai defer dan library dibatasi per halaman.
- Font mempunyai fallback sistem yang dapat dibaca.
- Cache HTML dan aset sesuai strategi versioning.
- Setiap klaim peningkatan menyebut alat, halaman, perangkat, dan tanggal.
Referensi primer
Buat anggaran resource yang dapat diperiksa
Anggaran tidak harus langsung berupa batas skor. Proyek dapat menetapkan bahwa artikel tidak memuat library animasi beranda, gambar baru mempunyai dimensi, script baru harus menjelaskan halaman yang membutuhkannya, dan perubahan font diperiksa melalui waterfall. Batas byte ditambahkan setelah baseline produksi diukur.
Perhatikan layanan eksternal saat menguji
AdSense, font, dan CDN dapat menambah request yang waktunya berubah. Audit membedakan resource milik situs dengan pihak ketiga. Script verifikasi yang diwajibkan tetap dipasang, tetapi hasil lab sebelum dan sesudah iklan tidak dicampur. Pemblokir iklan juga tidak dipakai untuk membuat skor produksi terlihat lebih baik tanpa catatan.
Hubungkan metrik dengan pengalaman
LCP lambat ditelusuri ke elemen yang menunggu; CLS ditelusuri ke sumber pergeseran; INP ditelusuri ke event dan long task. Angka ringkasan hanya penunjuk. Keputusan akhir menyebut apa yang pengguna rasakan, kode yang berubah, dan risiko regresinya.