Cat Konten Terbesar adalah berapa lama konten utama tetap kosong. Interaksi dengan Next Paint adalah berapa lama sebuah klik terlihat diabaikan. Jangan ragu untuk membuka Chrome DevTools dan melihat angka sebenarnya di halaman Anda sendiri sebelum memercayai audit. Berikut adalah perbaikan dalam urutan yang biasanya mereka bayarkan.

LCP: berhenti membuat browser menebak-nebak

  1. Browser baru mengunduh gambar hero Anda setelah bisa melihat satu gambar ada. Menambahkan fetchpriority="high" ke img itu menaikkan posisinya dalam antrean dan, menurut pengukuran di sini, memindahkan LCP lebih dari library mana pun.
  2. Pramuat URL pahlawan yang tepat satu kali pada halaman yang sama yang menggunakannya, bukan pada setiap halaman di situs.
  3. Kirimkan pahlawan yang telah diubah ukurannya, diformat sebelumnya, dan dihosting di CDN. JPEG 3 MB melalui 4G adalah tempat lahirnya situs web yang lambat.
  4. Host sendiri font Anda, atau setidaknya muat terlebih dahulu bobot yang sebenarnya Anda gunakan pada teks LCP.
<img src="/img/hero.webp" fetchpriority="high" decoding="async" />

INP: berhenti memblokir thread utama

  • Tampilkan sesuatu dalam bingkai setelah ketukan, dan selesaikan pekerjaan berikutnya. Tombol yang berubah menjadi 'Bekerja...' dalam satu bingkai yang dicat boleh-boleh saja.
  • Satu pendengar berat lebih buruk dari sepuluh pendengar ringan. Gabungkan pekerjaan dengan requestIdleCallback ketika tidak ada yang perlu dilakukan secara instan.
  • Kirimkan lebih sedikit JavaScript. Bundel 300 KB adalah antrian, bukan tempat menyimpan logika.
btn.addEventListener("click", () => {
  setState("saving");
  requestAnimationFrame(() => doHeavyWork());
});
Tidak ada yang mengunjungi untuk kerangka tersebut. Mereka mengunjungi untuk mengetahui halaman dan kecepatannya.

Kemudian ukur ulang, di Lighthouse dan pada ponsel rata-rata yang sebenarnya, karena simulator memaafkan hal-hal yang tidak bisa dilakukan oleh 4G yang sebenarnya. Peningkatan dua puluh persen pada kedua bagian vital adalah normal untuk sore ini.