Checklist rilis Core Web Vitals
Checklist pre-launch internal kami untuk setiap build Revinco: item yang tidak pernah kami kompromi.
- Setiap launch Revinco lolos Core Web Vitals sebelum menyentuh produksi.
- LCP di bawah 1,8s, CLS di bawah 0,05, INP di bawah 200ms. Non-negotiable.
- Segelintir teknik yang sama bekerja di setiap proyek: strategi font, lazy-loading, server component, batas client yang deliberate.
- Disiplinnya membosankan. Hasilnya tidak.
Kenapa Core Web Vitals masih penting
Core Web Vitals tetap menjadi sinyal terukur paling langsung dari Google untuk pengalaman pengguna. Mereka juga berkorelasi kuat dengan conversion rate: situs cepat convert lebih baik, dan Google me-rank mereka lebih baik. Mengabaikan CWV berarti meninggalkan ranking dan revenue di atas meja.
LCP: hal pertama yang penting
Largest Contentful Paint harus di bawah 1,8 detik. Tersangka biasanya: preload font kritis, self-host kalau membantu, serve gambar di ukuran benar dengan aspect ratio yang benar, dan jangan pernah biarkan script pihak ketiga mem-block render. Ship hero image Anda sebagai priority dan lanjut.
CLS: layout yang tidak melompat
Cumulative Layout Shift harus tetap di bawah 0,05. Setiap gambar, iframe, dan slot iklan butuh ruang tercadang via width/height atau aspect-ratio. Web font harus load dengan size-adjust atau font-display: optional. Tidak ada yang terlihat yang boleh reflow setelah first paint.
INP: tetap responsif
Interaction to Next Paint harus di bawah 200ms. Cara terbaik mencapai ini adalah mengirim lebih sedikit JavaScript. Gunakan server component secara default, perlakukan setiap client component sebagai pilihan deliberate, dan offload pekerjaan berat ke Web Workers saat benar-benar tidak bisa dihindari. Hydration tidak gratis.
| Vital | Baik | Perlu perbaikan | Buruk |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2,5 dtk | 2,5 – 4 dtk | > 4 dtk |
| CLS (Cumulative Layout Shift) | ≤ 0,1 | 0,1 – 0,25 | > 0,25 |
| INP (Interaction to Next Paint) | ≤ 200ms | 200ms – 500ms | > 500ms |
Checklist sebenarnya
Sebelum proyek Revinco manapun rilis, kami menjalankan list yang sama: font di-preload dan self-host di mana menguntungkan, semua gambar dengan dimensi eksplisit, tanpa script pihak ketiga yang render-blocking, server component secara default, dan full run Lighthouse + PageSpeed Insights di mobile dan desktop. Kalau ada vital yang kuning, kami perbaiki sebelum deploy.