Performa Website: Rencana Praktis Core Web Vitals
Oleh Apex Horizon Digital
Pekerjaan performa harus dimulai dari halaman, konteks device, dan user journey yang terukur, bukan skor generik. Core Web Vitals saat ini mencakup loading melalui Largest Contentful Paint, stabilitas visual melalui Cumulative Layout Shift, dan responsiveness melalui Interaction to Next Paint. Rencana praktis menggabungkan field data, lab trace terkontrol, inspeksi resource, dan verifikasi before-and-after agar tim memperbaiki bottleneck nyata tanpa menghapus konten atau interaksi berguna secara buta.
Ringkasan utama
- Gunakan field evidence untuk menemukan user terdampak dan lab trace untuk mendiagnosis penyebab.
- Telusuri loading, layout, dan interaction ke resource, component, serta third-party work spesifik.
- Catat bukti before-and-after yang sebanding dan pertahankan monitoring setelah release.
Bangun trace before-and-after yang dapat direproduksi
Pilih route, device, kondisi network, dan journey representatif. Catat URL, versi, lokasi, tool test, device profile, jumlah run, cache state, timestamp, elemen LCP, sumber shift, interaction panjang, request waterfall, pekerjaan JavaScript, kandidat gambar, font, dan request pihak ketiga. Gunakan field data untuk memahami distribusi nyata dan lab data untuk mereproduksi halaman secara terkontrol. Tabel before-and-after harus memakai setup sama serta menampilkan median atau ringkasan lain yang dinyatakan dari beberapa run. Simpan screenshot dan trace file. Jangan menyajikan satu run sangat cepat sebagai hasil.
- Trace loading: response server, discovery resource, download, render delay, dan elemen LCP.
- Trace stability: timestamp shift, elemen terdampak, dimensi hilang, injection, dan perubahan font.
- Trace responsiveness: interaction, input delay, handler work, rendering, dan main-thread task lain.
Perbaiki loading dengan mengikuti jalur LCP
Temukan elemen LCP untuk setiap route penting dan telusuri cara browser menemukannya. Jika berupa gambar, periksa dimensi sumber, kandidat responsive, format, priority, perilaku preload, serta apakah CSS atau client code menunda discovery. Jika berupa teks, periksa response server, blocking stylesheet, font loading, dan client rendering. Kurangi redirect serta server delay yang tidak diperlukan, buat resource terlihat di initial HTML bila tepat, kirim ukuran sesuai, dan hapus render delay yang dapat dihindari. Jalankan kembali trace yang sama setelah setiap perubahan bermakna agar tim tahu intervensi mana yang memindahkan jalur.
- Fase server: routing, data access, caching, compression, redirect, dan response timing.
- Fase discovery: initial HTML, visibilitas preload scanner, penggunaan background CSS, dan client-only insertion.
- Fase render: stylesheet, font, hydration, animation, overlay, dan kompetisi main thread.
Stabilkan layout dan delivery font
Sediakan ruang untuk gambar, video, embed, banner, dan konten dinamis. Beri media dimensi intrinsik atau aspect ratio, lalu pastikan CSS responsive mempertahankan box. Jangan memasukkan consent banner atau pesan campaign di atas konten setelah layout tanpa ruang. Periksa font swap, fallback metric, dan style terlambat ketika pergerakan teks berkontribusi pada shift. Self-hosting tidak otomatis lebih cepat dan remote hosting tidak otomatis lebih lambat. Bandingkan discovery, cache, subset, weight, dan rendering nyata. Verifikasi shift selama loading serta interaction, termasuk menu, filter, accordion, dan validasi form.
- Kontrol media: width, height, aspect ratio, responsive container, dan crop yang dapat diprediksi.
- Kontrol dinamis: region tersedia, titik insertion stabil, dan expansion yang dimulai user bila ruang tidak ada.
- Kontrol font: family serta weight wajib, subset, preload jika tepat, fallback metric, dan display strategy.
Perbaiki responsiveness dan kendalikan third-party code
Catat interaction lambat dan identifikasi input delay, event-handler work, rendering delay, serta pekerjaan lain yang memblokir main thread. Kurangi client code untuk initial route, pecah pekerjaan panjang, hindari kalkulasi layout berulang, dan batasi scope re-render. Review analytics, consent, chat, advertising, personalization, embed, serta experimentation script sebagai produk dengan owner. Dokumentasikan tujuan bisnis, kondisi load, perilaku data, biaya performa, failure behavior, dan kriteria removal. Muat code nonessential setelah critical experience atau setelah consent bila diperlukan, lalu uji halaman dengan setiap integrasi aktif serta nonaktif.
- Kontrol interaction: handler kecil, state update terbatas, pekerjaan noncritical deferred, dan feedback terlihat.
- Kontrol JavaScript: server-rendered content, route-level loading, review dependency, dan bundle ownership.
- Kontrol third-party: owner, tujuan, trigger, consent, timeout, performance budget, dan tanggal review.
Release, bandingkan, dan operasikan rencana
Sebelum release, bandingkan setiap route target memakai metode trace yang dinyatakan dan jalankan accessibility serta functional check agar perubahan performa tidak menghapus konten, label, focus behavior, atau analytics wajib. Setelah release, monitor field data dalam window yang tepat, deployment error, business event, dan laporan support. Catat perubahan, mekanisme yang diharapkan, route, owner, dan kondisi rollback. web.dev mendokumentasikan Core Web Vitals stabil serta panduan optimasi terpisah, tetapi metric harus tetap terkait dengan user dan journey nyata. Tambahkan performance budget serta owner review ke proses release konten, campaign, dan integrasi normal.
- Bukti before: versi, route, setup, measurement berulang, link trace, dan hipotesis dampak user.
- Bukti after: setup sama, run sebanding, functional check, field follow-up, dan validasi business event.
- Kontrol operasi: budget, monitoring, release check, third-party register, aturan gambar, dan owner.