CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya menggunakan stylesheet yang diperkenalkan dengan <link rel="stylesheet">, sebilangan besar CSS inline di kepala, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.

"Render-menyekat CSS" bermaksud bahawa apabila penyemak imbas memuatkan laman web, ia mesti memuat turun dan menghuraikan fail CSS tertentu sebelum ia boleh mula membuat kandungan halaman. Jenis CSS ini dipanggil "menyekat rendering CSS".

Ini bermakna jika fail CSS ini terlalu besar atau beban terlalu perlahan, pengguna akan melihat halaman kosong sehingga sumber dimuatkan. Ini mempunyai kesan yang besar terhadap pengalaman pengguna, terutamanya apabila terminal atau rangkaian mudah alih perlahan.

Kenapa CSS Block Page Rendering?

Tidak semua blok CSS, hanya yang ditandai "kritikal" akan menyebabkan masalah ini. Pelayar merawat semua CSS dalam talian dan luaran secara lalai sebagai sumber yang menyekat rendering, kerana ia boleh menjejaskan susun atur halaman dan penampilan.

Situasi biasa termasuk:

• Stylesheet yang diperkenalkan menggunakan <link rel="stylesheet"> disekat secara lalai.
• Banyak kod CSS sebaris di kepala halaman.
• Stylesheets yang tidak dimuatkan menggunakan pengoptimuman pertanyaan media (seperti gaya cetak) juga mungkin salah sebagai sumber kritikal.

Bagaimana untuk mengurangkan kesan CSS pada rendering?

Untuk meningkatkan kelajuan pemuatan skrin pertama, kunci adalah untuk mengurangkan atau menangguhkan pemuatan CSS yang tidak penting. Berikut adalah beberapa amalan praktikal:

• Ekstrak CSS Kunci : Ekstrak CSS minimum yang diperlukan untuk rendering pertama dan membenamkannya terus ke HTML untuk membiarkan halaman dipaparkan secepat mungkin.
• Lazy Loading of CSS bukan kritikal : Anda boleh menggunakan JavaScript untuk memuat gaya lain selepas memberikan kandungan utama halaman.
• Gunakan sifat media untuk mengoptimumkan pemuatan : Sebagai contoh, tambah media="print" ke CSS cetak supaya rendering skrin pertama tidak akan disekat.
• Memampatkan dan menggabungkan fail CSS : Kurangkan bilangan permintaan dan saiz fail, dan kelajuan kelajuan pemuatan keseluruhan.

Cadangan operasi praktikal

Jika anda adalah pemaju front-end atau bertanggungjawab untuk pengoptimuman prestasi laman web, anda boleh merujuk kepada langkah-langkah berikut untuk mengendalikan CSS menyekat:

• Gunakan alat seperti kritikal untuk mengekstrak CSS kritikal secara automatik.
• Masukkan CSS utama ke dalam header HTML melalui tag <style></style> .
• CSS luaran menggunakan rel="preload" untuk memuatkan secara asynchronously dengan acara onload .
• Gunakan atribut media untuk menangguhkan pemuatan untuk CSS yang tidak kritikal, sebagai contoh:

   <link rel = "stylesheet" href = "non-critical.css" media = "defer">

  Kemudian tukar nilai media melalui skrip untuk mengaktifkan beban.

Nota: Jangan over-optimize

Walaupun penting untuk mengoptimumkan pemuatan CSS, anda tidak boleh pergi ke ekstrem. Sebagai contoh, pemisahan CSS yang berlebihan dan menggunakan skrip kompleks untuk mengawal pesanan pemuatan akan membuat penyelenggaraan sukar dan bahkan membawa isu keserasian.

Hanya mengimbangi pemuatan sumber pada laluan kritikal, yang tidak rumit tetapi mudah diabaikan.

Atas ialah kandungan terperinci Apa itu 'menyekat CSS'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!