File CSS adalah resource pemblokir render: file tersebut harus dimuat dan diproses sebelum browser merender halaman. Laman web yang berisi style sheet yang tidak perlu besar memerlukan waktu lebih lama untuk dirender.
Dalam panduan ini, Anda akan mempelajari cara menunda CSS non-penting untuk mengoptimalkan Jalur Rendering Penting dan meningkatkan First Contentful Paint (FCP).
Contoh: pemuatan CSS yang kurang optimal
Contoh berikut berisi akordeon dengan tiga paragraf teks tersembunyi, yang masing-masing diberi gaya dengan class yang berbeda:
Halaman ini meminta file CSS dengan delapan class, tetapi tidak semuanya diperlukan untuk merender konten "terlihat".
Tujuan panduan ini adalah mengoptimalkan halaman ini sehingga hanya gaya penting yang dimuat secara sinkron, sedangkan yang lainnya (termasuk gaya paragraf), dimuat dengan cara yang tidak memblokir.
Ukur
Jalankan Lighthouse di halaman, lalu buka bagian Performa.
Laporan menampilkan metrik First Contentful Paint dengan nilai "1s", dan peluang Eliminate render-blocking resources, yang mengarah ke file style.css:
Untuk memvisualisasikan cara CSS ini memblokir rendering:
- Buka halaman di Chrome.
- Tekan
Control+Shift+J
(atauCommand+Option+J
di Mac) untuk membuka DevTools. - Klik tab Performa.
- Di panel Performa, klik Muat ulang.
Dalam rekaman aktivitas yang dihasilkan, Anda akan melihat bahwa penanda FCP ditempatkan segera setelah CSS selesai dimuat:
Artinya, browser harus menunggu semua CSS dimuat dan diproses sebelum menggambar satu piksel di layar.
Optimalkan
Untuk mengoptimalkan halaman ini, Anda perlu mengetahui class mana yang dianggap penting. Untuk menentukannya, gunakan Alat Cakupan:
- Di DevTools, buka Menu Perintah
dengan menekan
Control+Shift+P
atauCommand+Shift+P
(Mac). - Ketik "Cakupan", lalu pilih Tampilkan Cakupan.
- Klik Muat ulang untuk memuat ulang halaman dan mulai merekam cakupan.
Klik dua kali laporan untuk melihat detail:
- Class yang ditandai dengan warna hijau sangat penting. Browser memerlukannya untuk merender konten yang terlihat, termasuk judul, subtitel, dan tombol akordeon.
- Class yang ditandai dengan warna merah tidak penting, hanya memengaruhi konten yang tidak langsung terlihat, seperti paragraf tersembunyi.
Dengan informasi ini, optimalkan CSS Anda agar browser dapat mulai memproses gaya penting segera setelah halaman dimuat dan menunda CSS non-penting untuk nanti:
Ekstrak definisi class yang ditandai dengan warna hijau dalam laporan cakupan, dan tempatkan class tersebut dalam blok
<style>
di bagian awal halaman:<style type="text/css">
.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
</style>Muat class lainnya secara asinkron dengan menerapkan pola berikut:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
Ini bukan cara standar untuk memuat CSS. Berikut caranya:
link rel="preload" as="style"
meminta sheet gaya secara asinkron. Anda dapat mempelajaripreload
lebih lanjut di Panduan pramuat aset penting.- Atribut
onload
dilink
memungkinkan browser memproses CSS saat style sheet selesai dimuat. - "Me-null" pengendali
onload
setelah digunakan membantu beberapa browser menghindari memanggil kembali pengendali saat beralih atributrel
. - Referensi ke sheet gaya di dalam elemen
noscript
memberikan fallback untuk browser yang tidak menjalankan JavaScript.
Halaman yang dihasilkan terlihat sama persis dengan versi sebelumnya, meskipun sebagian besar gaya dimuat secara asinkron. Berikut tampilan gaya inline dan permintaan asinkron ke file CSS dalam file HTML:
Memantau
Gunakan DevTools untuk menjalankan rekaman aktivitas Performa lain di halaman yang dioptimalkan.
Penanda FCP muncul sebelum halaman meminta CSS, yang berarti browser tidak perlu menunggu CSS dimuat sebelum merender halaman:
Sebagai langkah terakhir, jalankan Lighthouse di halaman yang dioptimalkan.
Dalam laporan, Anda akan melihat bahwa halaman FCP telah dikurangi sebesar 0,2 detik (peningkatan sebesar 20%):
Saran Eliminate render-blocking resources tidak lagi muncul di bagian Opportunities, dan sebagai gantinya berada di bagian Passed Audits:
Langkah berikutnya & referensi
Dalam panduan ini, Anda telah mempelajari cara menunda CSS non-penting dengan mengekstrak kode yang tidak digunakan di halaman secara manual. Untuk lingkungan produksi yang lebih kompleks, panduan mengekstrak CSS penting membahas beberapa alat paling populer untuk mengekstrak CSS penting dan menyertakan codelab untuk melihat cara kerjanya dalam praktik