Menangani Menyekat CSS untuk Laman Web Rendering Cepat

Mengoptimumkan strategi pemuatan CSS dan meningkatkan kelajuan rendering web

Artikel ini membincangkan cara penyemak imbas memuatkan fail CSS dan kesannya terhadap kelajuan rendering web, dan memperkenalkan beberapa strategi pengoptimuman untuk membantu anda meningkatkan pengalaman pengguna anda.

Masalah: CSS menyekat rendering

Jika anda telah menggunakan pandangan kelajuan halaman Google, anda mungkin melihat tip seperti ini:

Pelayar menggunakan DOM dan CSSOM untuk menjadikan laman web. CSS terletak di laluan rendering kritikal, yang bermaksud bahawa penyemak imbas mesti memuat turun dan memproses semua maklumat HTML dan CSS untuk memulakan rendering, yang boleh menyebabkan kelewatan dan memberi kesan kepada pengalaman pengguna. Lembaran gaya luaran khususnya akan menyebabkan pelbagai perjalanan bulat antara penyemak imbas dan pelayan, menyebabkan perbezaan masa antara penyempurnaan muat turun HTML dan rendering halaman.

konsep CSS utama

Walaupun HTML adalah penting untuk rendering halaman, tidak semua CSS adalah kritikal. Apa yang paling penting pengguna adalah kandungan kawasan yang kelihatan (viewport) halaman. Oleh itu, strategi pengoptimuman biasa adalah melambatkan atau memuatkan sumber penyekatan sumber, atau bahagian utama dalam HTML.

Strategi Pengoptimuman

Berikut adalah beberapa kaedah pengoptimuman yang biasa digunakan untuk pemaju:

1. meminimumkan penyekatan dengan jenis media dan pertanyaan media: Split CSS luaran ke dalam fail yang berbeza (mis. style.css print.css Penyemak imbas memuat turun semua helaian gaya, tetapi lebih suka helaian gaya yang tidak menyekat. other.css

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

Gunakan perintah

:

untuk memberitahu penyemak imbas untuk mendapatkan sumber tertentu terlebih dahulu. Digabungkan dengan acara JavaScript, anda boleh melaksanakan lembaran gaya pemuatan tak segerak:
2. preload Pada masa ini, sokongan penyemak imbas preload adalah terhad, dan anda boleh menggunakan polyfill yang disediakan oleh kumpulan filamen. onload

<link rel="preload" as="style" href="style.css" onload="this.rel='stylesheet'">

Penyelesaian Kumpulan Filament: preload Dasar kumpulan filamen termasuk: inline CSS kritikal ke HTML dan memuatkan CSS bukan kritikal secara tidak sengaja menggunakan HTTP/2 Server Push. Mereka menggunakan perpustakaan LoadCSS, yang mengandungi polyfills yang tidak menyokong penyemak imbas

.

3. Letakkan pautan stylesheet dalam badan dokumen: preload Kaedah ini tidak bergantung pada konsep "di atas viewport", tetapi sebaliknya meletakkan pautan stylesheet sebelum kandungan HTML yang sepadan untuk melaksanakan halaman yang diberikan Kandungan dalam urutan. Contohnya:

4. Kesimpulan

Cara pelayar memuat turun gaya gaya boleh menyekat rendering halaman dan mempengaruhi pengalaman pengguna. Beberapa kaedah pengoptimuman yang diperkenalkan dalam artikel ini dapat membantu anda menyelesaikan masalah ini dan meningkatkan kelajuan pemuatan laman web. Kaedah yang mana untuk dipilih bergantung pada saiz dan kerumitan laman web anda.

FAQs (FAQs)

• Apakah jalan rendering kritikal (CRP)? Mengapa penting untuk laman web pemuatan cepat? CRP adalah urutan langkah untuk penyemak imbas untuk menukar HTML, CSS, dan JavaScript ke piksel skrin. Mengoptimumkan CRP boleh mempercepat pemuatan laman web dan meningkatkan pengalaman pengguna.

• Bagaimana untuk mengoptimumkan laluan rendering utama? CRP boleh dioptimumkan dengan mengurangkan saiz fail, meminimumkan bilangan sumber kritikal, dan memendekkan panjang laluan kritikal. Sebagai contoh: Fail termampat, CSS kritikal sebaris, tertunda CSS dan JavaScript yang tidak kritikal, dan gunakan pemuatan tak segerak.

• Apakah sumber penyekatan yang diberikan? Bagaimanakah mereka mempengaruhi kelajuan memuat laman web? Memberi sumber penyekatan adalah fail (biasanya fail CSS dan JavaScript) yang menyekat laman web daripada memaparkan sehingga mereka dimuat turun dan diproses sepenuhnya. Mereka melambatkan rendering web dan melambatkan pemuatan.

• Bagaimana untuk menghapuskan sumber menghalang sumber? Anda boleh menghapuskan penyekatan sumber dengan melambatkan CSS dan JavaScript yang tidak kritikal, CSS kritikal dalam talian, dan pemuatan fail asynchronous.

• Apakah perbezaan antara pemuatan segerak dan pemuatan tak segerak? blok pemuatan Segera Rendering Web Sehingga fail dimuat turun dan diproses sepenuhnya;

• Bagaimana untuk menyamakan CSS kritikal? Mengapa ini bermanfaat? CSS utama dalam talian adalah meletakkan CSS secara langsung dalam dokumen HTML, bukan dalam fail luaran. Ini menghapuskan keperluan untuk permintaan rangkaian yang berasingan, dengan itu mengurangkan masa yang diperlukan untuk membuat laman web.

• Apakah peranan JavaScript dalam laluan rendering kritikal? JavaScript boleh mengendalikan DOM dan CSSOM, tetapi jika ia tidak ditangani dengan betul, ia juga akan menghalang proses rendering.

• Bagaimana untuk meningkatkan kelajuan pemuatan laman web dengan fail termampat? Fail termampat akan memadam aksara yang tidak perlu (seperti ruang dan komen) dalam kod, mengurangkan saiz fail dan mempercepatkan muat turun.

• Alat apa yang boleh digunakan untuk menganalisis dan mengoptimumkan laluan rendering kritikal? alat seperti Google Pagespeed Insights, Lighthouse, dan WebpageTest dapat membantu menganalisis dan mengoptimumkan laluan rendering kritikal.

• Bagaimana untuk mengoptimumkan laluan rendering utama untuk meningkatkan pengalaman pengguna? Mengoptimumkan laluan rendering kritikal dapat mengurangkan masa pemuatan halaman web dan meningkatkan pengalaman pengguna. Kelajuan pemuatan yang lebih cepat dapat meningkatkan kepuasan pengguna dan berpotensi meningkatkan kedudukan enjin carian.

(beberapa kandungan artikel ini disediakan oleh SiteGround)

Atas ialah kandungan terperinci Menangani Menyekat CSS untuk Laman Web Rendering Cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!