Mengekstrak CSS penting

Pelajari cara meningkatkan waktu render dengan teknik CSS penting.

Milica Mihajlija

Browser harus mendownload dan mengurai file CSS sebelum dapat menampilkan halaman, yang membuat CSS menjadi resource yang memblokir render. Jika file CSS berukuran besar, atau kondisi jaringan buruk, permintaan file CSS dapat meningkatkan waktu yang dibutuhkan untuk merender laman web secara signifikan.

Ilustrasi laptop dan perangkat seluler dengan halaman web yang meluap ke tepi layar

Menyisipkan gaya yang diekstrak di <head> dokumen HTML menghilangkan kebutuhan dari pembuatan permintaan tambahan untuk mengambil gaya tersebut. CSS lainnya dapat dimuat secara asinkron.

File HTML dengan CSS kritis yang disisipkan di bagian kepala
CSS penting inline

Meningkatkan waktu render dapat membuat perbedaan besar pada performa yang dirasakan, terutama dalam kondisi jaringan yang buruk. Pada jaringan seluler, latensi tinggi tetap menjadi masalah terlepas dari bandwidth.

Perbandingan tampilan setrip film saat memuat halaman dengan CSS pemblokir render (atas) dan halaman yang sama dengan CSS penting inline (bawah) pada koneksi 3G. Strip film atas menampilkan enam frame kosong sebelum akhirnya menampilkan konten. Setrip film bawah menampilkan konten yang bermakna di frame pertama.
Perbandingan pemuatan halaman dengan CSS yang memblokir rendering (atas) dan halaman yang sama dengan CSS penting inline (bawah) pada koneksi 3G

Jika Anda memiliki First Contentful Paint (FCP) yang buruk dan melihat peluang "Menghilangkan resource yang memblokir render" dalam audit Lighthouse, sebaiknya Anda mencoba CSS yang penting.

Audit Lighthouse dengan &#39;Menghilangkan resource yang memblokir render&#39; atau &#39;Tunda CSS yang tidak digunakan&#39;

Untuk meminimalkan jumlah perjalanan bolak-balik ke render pertama, usahakan untuk menjaga konten paruh atas di bawah 14 KB (terkompresi).

Dampak performa yang dapat Anda capai dengan teknik ini bergantung pada jenis situs Anda. Secara umum, makin besar CSS yang dimiliki situs, makin besar kemungkinan dampak dari CSS inline.

Ringkasan alat

Ada sejumlah alat hebat yang dapat secara otomatis menentukan CSS penting untuk suatu halaman. Ini adalah kabar baik karena melakukan ini secara manual akan menjadi proses yang membosankan. Ini membutuhkan analisis seluruh DOM untuk menentukan gaya yang diterapkan ke setiap elemen di area pandang.

Kritis

Mengekstrak, meminifikasi, dan menyisipkan CSS paruh atas secara penting, serta tersedia sebagai modul npm. Plugin ini dapat digunakan dengan Gulp (secara langsung) atau dengan Grunt (sebagai plugin) dan juga ada plugin webpack.

Ini adalah alat sederhana yang membutuhkan banyak pemikiran tentang prosesnya. Anda bahkan tidak perlu menentukan stylesheet karena Kritis otomatis mendeteksinya. Ini juga mendukung ekstraksi CSS penting untuk berbagai resolusi layar.

criticalCSS

CriticalCSS adalah modul npm lain yang mengekstrak CSS paruh atas. Layanan ini juga tersedia sebagai CLI.

Library ini tidak memiliki opsi untuk menyejajarkan dan meminifikasi CSS penting, tetapi memungkinkan Anda menyertakan otomatis aturan yang sebenarnya tidak termasuk dalam CSS penting dan memberi Anda kontrol yang lebih terperinci atas penyertaan deklarasi @font-face.

Penthouse

Penthouse adalah pilihan yang bagus jika situs atau aplikasi Anda memiliki banyak gaya atau gaya yang dimasukkan secara dinamis ke dalam DOM (umum dalam aplikasi Angular). Versi ini menggunakan Puppeteer di balik layar dan bahkan juga menampilkan versi yang dihosting secara online.

Penthouse tidak mendeteksi stylesheet secara otomatis, Anda harus menentukan file HTML dan CSS yang diinginkan untuk menghasilkan CSS penting. Keuntungannya adalah bagus dalam menjalankan banyak tugas secara paralel.