Pelajari cara meningkatkan waktu render dengan teknik CSS penting.
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.
Menyisipkan gaya yang diekstrak di <head>
dokumen HTML menghilangkan kebutuhan dari pembuatan permintaan tambahan untuk mengambil gaya tersebut. CSS lainnya dapat dimuat secara asinkron.
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.
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.
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.