Rumah >hujung hadapan web >tutorial css >Bagaimana dan mengapa anda harus menyatukan CSS kritikal anda
Bagaimana dan mengapa anda harus menyatukan CSS kritikal anda
- 尊渡假赌尊渡假赌尊渡假赌asal
- 2025-02-20 11:52:15220semak imbas
Meningkatkan Prestasi Web: Strategi dan Petua untuk Mengatasi CSSS Kunci
Artikel ini meneroka cara untuk menyebarkan CSS utama (membenamkan peraturan CSS terus ke dalam dokumen HTML) untuk mengoptimumkan prestasi laman web. Dengan merenung CSS kritikal, rendering web boleh dipercepatkan dengan ketara, terutamanya pemuatan kandungan skrin pertama, mengelakkan kelewatan penangguhan yang disebabkan oleh permintaan HTTP tambahan untuk mendapatkan fail CSS luaran.
Mata utama:
- dengan tepat mengenal pasti CSS utama: CSS kritikal merujuk kepada kod CSS minimum yang diperlukan untuk menjadikan kandungan pada skrin pertama. Ini berbeza dari halaman ke halaman dan memerlukan pengiktirafan dan pengekstrakan dengan alat seperti Google Pagespeed Insights, Penjana CSS Kritikal, dan Penthouse.js.
- Trial-offs: inline CSS kritikal dapat meningkatkan kelajuan pemuatan, tetapi juga meningkatkan saiz dokumen HTML dan boleh menyebabkan redundansi kod (terutama apabila peraturan CSS yang sama digunakan semula pada beberapa halaman). Oleh itu, adalah penting untuk memastikan bahawa CSS yang digariskan memang penting untuk laman web. Alat automasi
- alat: alat seperti grunt, modul npm (seperti kritikal), gulp, dan plug-ins wordpress (seperti autoptimize, di atas pengoptimuman lipatan, dan cache total w3) boleh mengenal pasti secara automatik , Ekstrak dan kunci sebaris.
Pada hari -hari awal Internet, laman web terutamanya menunjukkan maklumat teks. Dengan peningkatan kelajuan rangkaian, pengguna dapat dengan cepat memuat turun gambar dan video definisi tinggi, dan fungsi laman web menjadi semakin kompleks, menggunakan pelbagai kerangka CSS dan JavaScript, plug-in, dll. Memuatkan semua fail yang diperlukan memerlukan masa, dan laman web yang lebih cepat membawa kepada pengalaman pengguna yang lebih baik, yang penting untuk kejayaan laman web. Menggalakkan CSS kritikal dan memuatkan CSS yang tidak kritikal secara asynchronously adalah strategi utama untuk meningkatkan prestasi.
Apakah CSS utama?
Kunci CSS merujuk kepada kod CSS yang digunakan untuk kandungan gaya di laman web (bahagian pertama pengguna melihat, termasuk navigasi dan unsur -unsur lain). Adalah penting untuk membuat kandungan dengan cepat pada skrin pertama.
Harus diingat bahawa pengguna menggunakan pelbagai peranti dan tingkap untuk mengakses laman web, jadi memandangkan kandungan pada skrin utama tidak mencukupi untuk menyelesaikan semua masalah. CSS yang berkaitan dengan susun atur asas dan tipografi juga harus dianggap sebagai CSS kritikal.
Amalan Pembangunan Web Moden Mengesyorkan CSS sebaris, contohnya:
<code class="language-html"><!DOCTYPE html>
<title>优化后的网页</title>
<style type="text/css">
/* 你的最小化关键 CSS 代码 */
</style>
<!-- 你的标记 -->
</code> Mengapa anda perlu sebaris? Alat seperti Google Pagespeed Insights boleh meminta pengoptimuman pemuatan CSS, mencadangkan CSS kritikal dalam talian dan asynchronously loading blocking stylesheets yang diberikan.
Penyemak imbas hanya akan menjadikan kandungan pada laman utama selepas semua fail CSS dimuatkan. Ini menjadi kesesakan apabila sejumlah besar fail perlu dimuatkan. Tidak semua pengguna mempunyai sambungan rangkaian berkelajuan tinggi, dan ia boleh mengecewakan untuk menunggu perpustakaan, CSS, dan JavaScript untuk dimuat sebelum kandungan dimuatkan. Malah pengguna rangkaian berkelajuan tinggi mungkin kehilangan sambungan dalam beberapa kes (seperti melalui terowong). Jika laman web telah menyebarkan CSS kritikal dan tiada fail lain dimuatkan sebelum kandungan utama dipaparkan, pengguna masih dapat mengakses kandungan utama walaupun sekiranya sambungan yang rosak.
Angka berikut menunjukkan perbezaan antara laman web biasa dan laman web yang dioptimumkan: Versi yang dioptimumkan membolehkan pengguna mengakses kandungan kira -kira 0.5 saat lebih awal. Penambahbaikan akan lebih jelas apabila sejumlah besar perpustakaan tambahan perlu dimuatkan.
Adakah CSS utama digariskan?
ia bergantung kepada keadaan. Jika anda tidak menggunakan rangka kerja atau perpustakaan yang besar dan saiz fail CSS anda sendiri juga kecil, anda mungkin tidak perlu menyusup CSS.Jika anda menggunakan bingkai seperti bootstrap, semua fungsi bingkai tidak boleh digunakan. Dalam kes ini, anda boleh mengekstrak hanya CSS kritikal dari lembaran gaya rangka kerja dan memuatkan kerangka sebenar secara asynchronously. Ini akan meningkatkan kelajuan laman web.
Stylesheets inline boleh di -cache, manakala HTML tidak biasanya di -cache (ini biasanya tidak disyorkan!). Ini bermakna kadang -kadang terdapat perbezaan antara kedua -dua. Ingatlah ini apabila membuat kemas kini! Di samping itu, CSS sebaris menyebabkan saiz halaman meningkat setiap kali pengguna memuat laman web. Sebagai contoh, jika laman web mempunyai 30kb css sebaris setiap halaman, pengguna tunggal akan menggunakan 300kb untuk 10 paparan halaman. Ini mungkin tidak terdengar seperti masalah besar, tetapi di beberapa bahagian dunia (dan dalam beberapa pelan data 3G/4G), data mahal. Pastikan bahawa CSS yang anda merancang untuk sebaris adalah sangat penting untuk halaman anda dan jangan sebaliknya.
(Kandungan berikut adalah serupa dengan teks asal. Untuk mengelakkan pertindihan, langkah -langkah terperinci tentang cara mencari CSS utama, gunakan modul, modul NPM, GULP dan alat lain, dan bahagian FAQ akhir ditinggalkan. Ini boleh didapati melalui teks asal Ringkasan
sama ada untuk menyamakan CSS kritikal bergantung kepada corak akses pengguna dan struktur laman web. Jika laman web anda adalah laman web halaman tunggal, pelawat tidak akan mengaksesnya dengan kerap, atau jika anda mempunyai laman web yang kompleks dengan kerangka dan plugin, CSS kritikal sebaris dapat meningkatkan prestasi dengan ketara.
Satu -satunya kebimbangan dengan CSS sebaris adalah bahawa ia meningkatkan saiz halaman setiap lawatan. Ini boleh dikurangkan dengan menggunakan cookies, menghantar CSS kritikal hanya pada lawatan pertama, sementara masih memuatkan dan membuang fail CSS penuh secara asynchronously. Ini agak rumit, tetapi anda boleh mendapatkan yang terbaik dari kedua -dua dunia pada masa yang sama.Atas ialah kandungan terperinci Bagaimana dan mengapa anda harus menyatukan CSS kritikal anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!