Mengoptimumkan penghantaran CSS untuk membuat halaman lebih cepat

Untuk mengoptimumkan penghantaran CSS dan meningkatkan kelajuan beban halaman, CSS kritikal yang pertama diperlukan untuk kandungan di atas secara langsung di kepala HTML, kemudian menangguhkan CSS yang tidak kritikal menggunakan REL = "Preload" atau Media = "Cetak" dengan JavaScript Onload Switching; Minifikasi CSS dengan mengeluarkan ruang putih dan komen menggunakan alat seperti cssnano, dan membolehkan mampatan brotli atau gzip untuk mengurangkan saiz fail; Leverage penyemak imbas caching dengan tajuk kawalan cache dan nama fail versi untuk lawatan berulang; Split CSS dengan laluan atau komponen dalam SPA menggunakan pemisahan kod dan import dinamik untuk memuatkan hanya gaya yang diperlukan; Elakkan @import dan perpustakaan luaran yang besar seperti bootstrap penuh jika hanya beberapa komponen yang digunakan; dan menggunakan pemilih CSS yang cekap dengan meminimumkan bersarang yang mendalam dan lebih suka kelas di atas rantai keturunan yang kompleks-Memperbaiki langkah-langkah ini mengurangkan penyekatan, mempercepatkan cat pertama, dan meningkatkan vital web teras.

Mengoptimumkan penghantaran CSS adalah salah satu cara yang paling berkesan untuk meningkatkan kelajuan beban halaman dan prestasi yang dirasakan. Oleh kerana CSS disekat secara lalai, penghantaran yang tidak cekap boleh melambatkan apabila pengguna melihat kandungan. Berikut adalah cara menyelaraskan CSS untuk rendering lebih cepat.

1. Menghapuskan CSS menyekat

Pelayar tidak akan membuat halaman sehingga mereka telah memuat turun dan memproses semua CSS yang dikaitkan, walaupun ia tidak diperlukan dengan segera. Untuk mempercepat penanaman awal:

• CSS Kritikal Inline : Ekstrak CSS minimum yang diperlukan untuk kandungan di atas kali ganda (seperti tajuk, bahagian wira, atau borang log masuk) dan membenamkannya secara langsung di HTML anda.

• Menangguhkan CSS tidak kritikal : Muatkan seluruh CSS anda secara asynchronously menggunakan rel="preload" atau JavaScript. Contoh:

   <link rel = "preload" href = "styles.css" as = "style" onload = "this.onload = null; this.rel = &#39;stylesheet&#39;">

  Atau gunakan media="print" pada mulanya dan beralih kepada all selepas beban:

   <link rel = "stylesheet" href = "non-critical.css" media = "print" onload = "this.media = &#39;all&#39;">

Ini membolehkan penyemak imbas menjadikan kandungan tanpa menunggu muat turun gaya penuh.

2. Minify dan memampatkan CSS

Kurangkan saiz fail untuk mempercepatkan pemindahan:

• Minify CSS : Keluarkan ruang kosong, komen, dan memendekkan pemilih (alat seperti CSSNANO atau POSTCSS Bantuan).
• Dayakan Mampatan : Gunakan gzip atau brotli pada pelayan anda. Brotli biasanya menawarkan mampatan 10-20% lebih baik daripada GZIP.

Malah pengurangan 30% dalam saiz fail dapat meningkatkan masa beban pada sambungan yang lebih perlahan.

3. Leverage penyemak imbas caching

Hidangkan CSS statik dengan tajuk cache yang betul supaya pengunjung yang kembali tidak memuat turunnya semula:

• Tetapkan Cache-Control: public, max-age=31536000 untuk Filename Versioned atau Hashed (misalnya, styles.a1b2c3.css ).
• Gunakan teknik cache-busting (seperti hashing kandungan) supaya kemas kini diambil dengan segera.

Ini mengurangkan kunjungan berulang 'CSS muatan kepada sifar dalam banyak kes.

4. Split dan memuatkan CSS dengan laluan atau komponen (untuk spa)

Dalam aplikasi satu halaman atau rangka kerja berasaskan komponen (React, Vue, dan lain-lain):

• CSS-CSS CSS : Bundle hanya CSS yang diperlukan untuk paparan semasa.
• Gunakan import dinamik : Muatkan gaya khusus komponen pada permintaan.

Sebagai contoh, dalam aplikasi React:

 import ('./ Dashboard.css'); // hanya memuatkan apabila komponen dipasang

Ini menghalang memuatkan gaya yang tidak digunakan di seluruh halaman.

5. Elakkan @import dan perpustakaan luaran yang besar

• @import Dalam CSS Blok muat turun selari dan meningkatkan kelewatan. Gantikan dengan pelbagai <link> tag atau bundle semasa membina.
• Jangan memuatkan keseluruhan kerangka CSS (seperti Bootstrap) jika anda menggunakan hanya beberapa komponen. Gunakan binaan tersuai atau alternatif yang ringan.

6. Gunakan pemilih CSS yang cekap

Walaupun kurang memberi kesan daripada penghantaran, CS yang tidak cekap dapat melambatkan rendering:

• Elakkan pemilih bersarang dan terlalu kompleks (contohnya, div ul li a span ).
• Melekat pada kelas dan ID: .btn-primary lebih cepat daripada keturunan dirantai.

Pelayar moden cepat, tetapi CSS kembung masih boleh menyebabkan jank semasa reflows.

Mendapatkan hak penghantaran CSS bukan tentang melakukan satu perkara yang besar-ia menggabungkan inlining, menangguhkan, memampatkan, dan caching untuk meminimumkan penyekatan dan memaksimumkan kecekapan. Melaksanakan walaupun beberapa ini, dan anda akan melihat cat pertama yang lebih cepat dan skor Web Vitals yang lebih baik.

Pada asasnya: sebaris apa yang kritikal, menangguhkan selebihnya, dan menyimpan fail bersandar.

Atas ialah kandungan terperinci Mengoptimumkan penghantaran CSS untuk membuat halaman lebih cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!