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 menjadikan CSS sebagai aset pemblokir render. Jika file CSS berukuran besar, atau kondisi jaringan buruk, permintaan untuk file CSS dapat meningkatkan waktu yang diperlukan untuk merender file CSS secara signifikan.

Ilustrasi laptop dan perangkat seluler dengan halaman web yang memenuhi tepi layar

Dengan menyisipkan gaya yang diekstrak dalam <head> dokumen HTML, Anda tidak perlu membuat permintaan tambahan untuk mengambil gaya ini. Sisa CSS dapat dimuat secara asinkron.

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

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

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

Jika Anda memiliki First Contentful Paint (FCP) yang buruk dan lihat "Eliminasi resource yang memblokir rendering" kesempatan dalam audit Lighthouse, ada baiknya untuk mencoba CSS penting.

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

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

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

Ringkasan alat

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

Kritis

Penting mengekstrak, meminifikasi, dan menyisipkan CSS paruh atas, serta tersedia sebagai modul npm. Library ini dapat digunakan dengan Gulp (secara langsung) atau dengan Grunt (sebagai plugin) dan tersedia juga plugin webpack.

Ini adalah alat sederhana yang memproses banyak pemikiran. Anda bahkan tidak perlu menentukan stylesheet, bagian Kritis akan secara otomatis mendeteksinya. Alat ini juga mendukung ekstraksi CSS penting untuk berbagai resolusi layar.

criticalCSS

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

Class ini tidak memiliki opsi untuk menyisipkan dan meminifikasi CSS penting, tetapi memungkinkan Anda menyertakan paksa aturan yang sebenarnya tidak termasuk dalam CSS penting dan memberi Anda kontrol yang lebih terperinci untuk menyertakan 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 di aplikasi Angular). Game ini menggunakan Puppeteer di balik layar dan bahkan menampilkan versi yang dihosting secara online.

Penthouse tidak mendeteksi stylesheet secara otomatis, Anda harus menentukan file HTML dan CSS yang ingin dihasilkan oleh CSS penting. Kelebihannya adalah kemampuan ini bagus dalam menjalankan banyak tugas secara paralel.