Proses perender browser adalah yang mengubah kode Anda menjadi halaman web yang dapat berinteraksi dengan pengguna. Secara default, thread utama dari proses perender biasanya menangani sebagian besar kode: mengurai HTML dan membangun DOM, mengurai CSS dan menerapkan gaya yang ditentukan, serta mengurai, mengevaluasi, dan menjalankan JavaScript.
Thread utama juga memproses peristiwa pengguna. Jadi, setiap kali thread utama sibuk melakukan hal lain, halaman web Anda mungkin tidak merespons interaksi pengguna, yang menyebabkan pengalaman buruk.
Cara kerja audit thread utama Lighthouse gagal
Lighthouse menandai halaman yang membuat thread utama tetap sibuk selama lebih dari 4 detik selama pemuatan:
Untuk membantu Anda mengidentifikasi sumber pemuatan thread utama, Lighthouse menampilkan perincian waktu CPU yang digunakan saat browser memuat halaman Anda.
Cara meminimalkan tugas thread utama
Bagian di bawah ini diatur berdasarkan kategori yang dilaporkan Lighthouse. Lihat Anatomi frame untuk ringkasan cara Chromium merender halaman web.
Lihat Melakukan lebih sedikit tugas thread utama untuk mempelajari cara menggunakan Chrome DevTools untuk menyelidiki secara persis apa yang dilakukan thread utama saat halaman dimuat.
Evaluasi skrip
- Mengoptimalkan JavaScript pihak ketiga
- Lakukan debounce pada pengendali input Anda
- Menggunakan pekerja web
Gaya dan tata letak
- Mengurangi cakupan dan kompleksitas penghitungan gaya
- Menghindari tata letak yang besar dan kompleks serta layout thrashing
Rendering
- Tetap gunakan properti compositor saja dan kelola jumlah lapisan
- Menyederhanakan kompleksitas paint dan mengurangi area paint