CSS Kritis dan Pemblokiran Render
Sisipkan CSS kritis yang tampil di bagian atas halaman dan tunda gaya nonkritis untuk menghilangkan pemblokiran render.
CSS Kritis dan Pemblokiran Render adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Cara Peramban Melakukan Perenderan
Peramban mengurai HTML menjadi DOM, CSS menjadi CSSOM, menggabungkannya menjadi pohon render, menjalankan tata letak, lalu menggambar. CSS memblokir perenderan hingga CSSOM selesai — setiap bita CSS di jalur kritis menunda penggambaran pertama.
Apa itu CSS Kritis?
CSS kritis adalah kumpulan gaya minimum yang diperlukan untuk menampilkan konten di bagian atas halaman. Menyisipkannya ke dalam tag <style> di <head> menghilangkan permintaan lembar gaya yang memblokir perenderan untuk tampilan awal.
Sumber Daya yang Memblokir Perenderan
Setiap <link rel="stylesheet"> di bagian kepala dokumen memblokir perenderan. Skrip tanpa pemuatan asinkron atau tertunda juga memblokir penguraian HTML. Mengurangi sumber daya yang memblokir perenderan secara langsung meningkatkan Penggambaran Konten Terbesar (LCP) dan Penggambaran Konten Pertama (FCP).
Mengekstrak CSS Kritis
Alat seperti critical (npm), Penthouse, dan pengekstrak berbasis Puppeteer menampilkan halaman pada ukuran area pandang tertentu, lalu mengambil gaya yang berlaku untuk elemen yang terlihat. Keluaran disisipkan langsung; lembar gaya lengkap dimuat secara asinkron.
Memuat CSS Nonkritis secara Asinkron
Muat lembar gaya lengkap tanpa memblokir menggunakan media="print" dengan pertukaran setelah pemuatan selesai, atau pola rel="preload" + as="style" + onload="this.rel='stylesheet'".
<pre class="snippet"><link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript></pre>Kueri Media sebagai Petunjuk Pemuatan
Berkas CSS yang dimuat dengan kueri media yang tidak cocok (misalnya, media="print") diunduh dengan prioritas rendah dan tidak memblokir perenderan. Ini adalah trik klasik untuk memuat lembar gaya tanpa memblokir jalur kritis.
HTTP/2 dan Pemisahan CSS
Dengan multiplexing HTTP/2, pemisahan CSS menjadi banyak berkas kecil memiliki beban tambahan yang lebih rendah dibandingkan HTTP/1. Muat hanya CSS yang diperlukan untuk setiap rute — home.css, checkout.css — bukan satu bundel monolitik yang menyertakan gaya untuk setiap halaman.
CSS dan Scanner Pemuatan Awal
Scanner pemuatan awal peramban menemukan tag lembar gaya <link> lebih awal dan mulai mengunduhnya sebelum pengurai HTML mencapainya. Pastikan lembar gaya berada di <head> — bukan di badan dokumen — agar Scanner pemuatan awal menemukannya lebih cepat.
Mengukur Dampak Pemblokiran Perenderan
Panel Jaringan Chrome DevTools menampilkan waktu pemblokiran sumber daya dalam diagram air terjun. Lighthouse melaporkan "Hilangkan sumber daya yang memblokir perenderan" beserta penghematan untuk setiap sumber daya. WebPageTest menampilkan renderBlockingResources dalam tampilan rangkaian gambar.
CSS Kritis Sisi Server
Kerangka kerja seperti Next.js dan Astro secara otomatis menyisipkan CSS kritis selama SSR. Server mengidentifikasi gaya yang berlaku untuk HTML awal dan menyisipkannya — tidak diperlukan langkah ekstraksi sisi klien.
Pertimbangan Praktis
Menyisipkan terlalu banyak CSS meningkatkan ukuran HTML, memperlambat TTFB, dan mengurangi efisiensi tembolok (HTML tidak disimpan dalam tembolok selama berkas CSS). Sasar CSS kritis yang disisipkan sebesar 14KB atau kurang agar sesuai dengan jendela kemacetan TCP pertama.
Pemeriksaan Pengetahuan
Mengapa lembar gaya yang memblokir perenderan menunda Penggambaran Konten Pertama?
Ringkasan
CSS kritis menyisipkan gaya bagian atas halaman untuk menghilangkan penundaan akibat pemblokiran perenderan. Muat CSS yang tersisa secara asinkron menggunakan pramuat atau trik kueri media. Ukur dampaknya dengan Lighthouse dan DevTools, lalu sasar muatan CSS kritis di bawah 14KB untuk kinerja optimal.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “CSS Kritis dan Pemblokiran Render” gratis?
Ya — teks lengkap “CSS Kritis dan Pemblokiran Render” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “CSS Kritis dan Pemblokiran Render”?
Sisipkan CSS kritis yang tampil di bagian atas halaman dan tunda gaya nonkritis untuk menghilangkan pemblokiran render. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “CSS Kritis dan Pemblokiran Render” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- CSS Kritis dan Pemblokiran Render
- Tata Letak, Paint, dan Komposit: Alur Render
- will-change dan Promosi Lapisan
- Cakupan CSS dan Gaya yang Tidak Digunakan