File CSS adalah resource yang memblokir perenderan: file tersebut harus dimuat dan diproses sebelum browser merender halaman. Halaman web yang berisi style sheet berukuran besar dan tidak perlu memerlukan waktu yang lebih lama untuk dirender.
Dalam panduan ini, Anda akan mempelajari cara menunda CSS yang tidak 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 yang berisi delapan class, tetapi tidak semuanya diperlukan untuk merender konten yang "terlihat".
Tujuan panduan ini adalah untuk mengoptimalkan halaman ini sehingga hanya gaya penting yang dimuat secara sinkron, sedangkan gaya lainnya (termasuk gaya paragraf) yang dimuat dengan cara yang tidak memblokir.
Ukur
Jalankan Lighthouse di halaman dan buka bagian Performance.
Laporan tersebut menunjukkan metrik First Contentful Paint dengan nilai "1s", dan peluang Eliminate render-blocking resource, yang mengarah ke file style.css:
![Laporan Lighthouse untuk halaman yang tidak dioptimalkan, yang menampilkan FCP '1' dan 'Eliminate blocking resources' di bagian 'Opportunity'](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-unopti-ea4f2b5757cb6.png?hl=id)
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 Performance, klik Reload.
Pada rekaman aktivitas yang dihasilkan, Anda akan melihat bahwa penanda FCP ditempatkan segera setelah CSS selesai dimuat:
![Pelacakan performa DevTools untuk halaman yang tidak dioptimalkan, yang menunjukkan FCP yang dimulai setelah CSS dimuat.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/devtools-performance-trac-724db16c16b84.png?hl=id)
Artinya, browser harus menunggu semua CSS dimuat dan diproses sebelum menggambar satu piksel di layar.
Pengoptimalan
Untuk mengoptimalkan halaman ini, Anda perlu mengetahui kelas mana yang dianggap penting. Untuk menentukan hal ini, gunakan Alat Cakupan:
- Di DevTools, buka Command Menu
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.
![Cakupan untuk file CSS, menampilkan 55,9% byte yang tidak digunakan.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/coverage-css-file-showi-7147a6123af9d.png?hl=id)
Klik dua kali laporan untuk melihat detailnya:
- Class yang ditandai dengan warna hijau sangat penting. Browser membutuhkannya untuk merender konten yang terlihat, termasuk judul, subtitel, dan tombol akordeon.
- Class yang ditandai dengan warna merah tidak bersifat 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 tunda CSS yang tidak penting untuk nanti:
Ekstrak definisi class yang ditandai dengan warna hijau di laporan cakupan, dan tempatkan class tersebut dalam blok
<style>
di bagian atas 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 lembar gaya secara asinkron. Anda dapat mempelajaripreload
lebih lanjut dalam Panduan pramuat aset penting.- Atribut
onload
dilink
memungkinkan browser memproses CSS saat style sheet selesai dimuat. - "nulling" pengendali
onload
setelah digunakan membantu beberapa browser menghindari pemanggilan ulang pengendali saat mereka mengganti atributrel
. - Referensi ke lembar gaya di dalam elemen
noscript
menyediakan penggantian untuk browser yang tidak menjalankan JavaScript.
Halaman yang dihasilkan akan terlihat persis seperti versi sebelumnya, bahkan saat sebagian besar gaya dimuat secara asinkron. Berikut adalah tampilan gaya inline dan permintaan asinkron ke file CSS di file HTML:
Memantau
Gunakan DevTools untuk menjalankan rekaman aktivitas Performance lainnya di halaman yang dioptimalkan.
Penanda FCP muncul sebelum halaman meminta CSS, yang berarti browser tidak perlu menunggu CSS dimuat sebelum merender halaman:
![Trace performa DevTools untuk halaman yang dioptimalkan, yang menunjukkan FCP dimulai sebelum CSS dimuat.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/devtools-performance-trac-e14b71d2acb39.png?hl=id)
Sebagai langkah terakhir, jalankan Lighthouse pada halaman yang dioptimalkan.
Dalam laporan tersebut, Anda akan melihat bahwa halaman FCP telah berkurang 0,2 detik (peningkatan 20%):
![Laporan Lighthouse, yang menampilkan nilai FCP '0,8 dtk'.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-showin-893a491e6aa3.png?hl=id)
Saran Hilangkan resource yang memblokir render tidak lagi muncul di bagian Peluang, dan sekarang ada di bagian Lulus Audit:
![Laporan Lighthouse, yang menampilkan 'Menghilangkan resource pemblokiran' di bagian 'Audit yang Lulus'.](https://web.developers.google.cn/static/articles/defer-non-critical-css/image/lighthouse-report-showin-e989cb5e2e2fd.png?hl=id)
Langkah berikutnya & referensi
Dalam panduan ini, Anda telah mempelajari cara menunda CSS yang tidak penting dengan mengekstrak kode yang tidak digunakan secara manual di halaman. Untuk lingkungan produksi yang lebih kompleks, panduan mengekstrak CSS penting mencakup beberapa alat paling populer untuk mengekstrak CSS penting dan menyertakan codelab untuk melihat cara kerjanya dalam praktik