Bagaimana dan mengapa anda harus menyatukan CSS kritikal anda
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:
<!DOCTYPE html>
<html>
<head>
<title>优化后的网页</title>
<style type="text/css">
/* 你的最小化关键 CSS 代码 */
</style>
</head>
<body>
<!-- 你的标记 -->
</body>
</html>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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Fon Font Google Fon
Apr 09, 2025 am 10:42 AM
Saya melihat Font Google melancarkan reka bentuk baru (tweet). Berbanding dengan reka bentuk besar yang terakhir, ini terasa lebih berulang. Saya hampir tidak dapat memberitahu perbezaannya
Cara membuat pemasa undur animasi dengan HTML, CSS dan JavaScript
Apr 11, 2025 am 11:29 AM
Pernahkah anda memerlukan pemasa undur dalam projek? Untuk sesuatu seperti itu, mungkin semula jadi untuk mencapai plugin, tetapi sebenarnya lebih banyak lagi
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
Bagaimana untuk memilih elemen kanak -kanak dengan item nama kelas pertama melalui CSS?
Apr 05, 2025 pm 11:24 PM
Apabila bilangan elemen tidak ditetapkan, bagaimana untuk memilih elemen anak pertama nama kelas yang ditentukan melalui CSS. Semasa memproses struktur HTML, anda sering menghadapi unsur yang berbeza ...
Panduan Atribut Data HTML
Apr 11, 2025 am 11:50 AM
Semua yang anda ingin tahu mengenai atribut data dalam HTML, CSS, dan JavaScript.
Bukti konsep untuk menjadikan sass lebih cepat
Apr 16, 2025 am 10:38 AM
Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula
Dalam pembangunan front-end, bagaimana menggunakan CSS dan JavaScript untuk mencapai kesan pencahayaan yang serupa dengan antara muka tetapan Windows 10?
Apr 05, 2025 pm 10:21 PM
Cara melaksanakan Windows-like dalam pembangunan depan ...
