Tunda CSS yang tidak penting

Demián Renzulli
Demián Renzulli
X GitHub Gangguan

File CSS merupakan resource yang memblokir rendering: file ini 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 kelas, 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), 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:

Laporan Lighthouse untuk halaman yang tidak dioptimalkan, yang menunjukkan FCP '1' dan 'Eliminate blocking resource' di bagian 'Opportunity'
Laporan Lighthouse menyarankan untuk menyederhanakan lembar gaya agar halaman dimuat lebih cepat.

Untuk memvisualisasikan cara CSS ini memblokir rendering:

  1. Buka halaman di Chrome.
  2. Tekan Control+Shift+J (atau Command+Option+J di Mac) untuk membuka DevTools.
  3. Klik tab Performa.
  4. Di panel Performance, klik Reload.

Pada rekaman aktivitas yang dihasilkan, Anda akan melihat bahwa penanda FCP ditempatkan segera setelah CSS selesai dimuat:

Trace performa DevTools untuk halaman yang tidak dioptimalkan, yang menunjukkan FCP dimulai setelah CSS dimuat.
Di halaman demo yang tidak dioptimalkan, FCP tidak dapat terjadi hingga 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:

  1. Di DevTools, buka Menu Perintah dengan menekan Control+Shift+P atau Command+Shift+P (Mac).
  2. Ketik "Cakupan" dan pilih Tampilkan Cakupan.
  3. Klik Reload untuk memuat ulang halaman dan mulai merekam cakupan.
Cakupan untuk file CSS, yang menampilkan 55,9% byte yang tidak digunakan.
Laporan cakupan menunjukkan seberapa banyak CSS Anda yang benar-benar digunakan dalam pemuatan halaman awal.

Klik dua kali laporan untuk melihat detailnya:

  • Class yang ditandai dengan warna hijau sangat penting. Browser membutuhkannya untuk merender konten yang terlihat, termasuk tombol judul, subtitel, dan akordeon.
  • Class yang ditandai dengan warna merah tidak bersifat penting, dan hanya memengaruhi konten yang tidak langsung terlihat, seperti paragraf tersembunyi.

Dengan informasi ini, optimalkan CSS Anda sehingga browser dapat mulai memproses gaya penting segera setelah halaman dimuat dan tunda CSS yang tidak penting untuk nanti:

  1. 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>

  2. 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 mempelajari preload lebih lanjut di panduan Pramuat aset penting.
  • Atribut onload di link memungkinkan browser memproses CSS saat style sheet selesai dimuat.
  • "Menullkan" pengendali onload setelah digunakan membantu beberapa browser menghindari memanggil kembali pengendali saat beralih atribut rel.
  • Referensi ke sheet gaya di dalam elemen noscript memberikan penggantian untuk browser yang tidak menjalankan JavaScript.

Halaman yang dihasilkan akan terlihat sama persis seperti versi sebelumnya, meskipun sebagian besar gaya dimuat secara asinkron. Berikut adalah 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:

Rekaman aktivitas kinerja DevTools untuk halaman yang dioptimalkan, yang menampilkan FCP yang dimulai sebelum CSS dimuat.
Di halaman yang dioptimalkan, FCP dapat dimulai sebelum sheet gaya dimuat.

Sebagai langkah terakhir, jalankan Lighthouse di halaman yang dioptimalkan.

Dalam laporan ini, Anda akan melihat bahwa halaman FCP telah berkurang 0,2 dtk (peningkatan 20%):

Laporan Lighthouse, yang menampilkan nilai FCP &#39;0,8 dtk&#39;.
FCP baru yang dikurangi.

Saran Hilangkan resource yang memblokir render tidak lagi muncul di bagian Peluang, dan sebagai gantinya ada di bagian Audit yang Lulus:

Penggambaran laporan Lighthouse, yang menampilkan &#39;Eliminate blocking resource&#39; di bagian &#39;Passed Audits&#39;.
Halaman kini lulus audit resource pemblokiran.

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