Meminimalkan pekerjaan thread utama

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:

Screenshot audit pekerjaan Minimalkan thread utama Lighthouse

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

Gaya dan tata letak

Rendering

Mengurai HTML dan CSS

Penguraian dan kompilasi skrip

Pembersihan sampah memori

Referensi