Tunda CSS yang tidak penting

Demián Renzulli
Demián Renzulli
X GitHub Gangguan

File CSS merupakan resource yang memblokir rendering: file harus dimuat dan diproses sebelum browser merender halaman. Halaman web yang berisi lembar gaya besar yang tidak perlu memakan waktu lebih lama untuk dirender.

Dalam panduan ini, Anda akan mempelajari cara menunda CSS yang tidak penting untuk mengoptimalkan Jalur Rendering Penting dan tingkatkan First Contentful Paint (FCP).

Contoh: pemuatan CSS yang kurang optimal

Contoh berikut berisi akordeon dengan tiga paragraf tersembunyi berupa , yang masing-masing diberi gaya dengan class yang berbeda:

Halaman ini meminta file CSS dengan delapan kelas, tetapi tidak semuanya yang diperlukan untuk merender saat ini.

Tujuan dari panduan ini adalah untuk mengoptimalkan halaman ini sehingga hanya gaya penting dimuat secara sinkron, sedangkan sisanya (termasuk gaya paragraf), dimuat dengan cara yang tidak bersifat memblokir.

Ukur

Jalankan Lighthouse di halaman lalu buka Bagian Performa.

Laporan ini menunjukkan metrik First Contentful Paint dengan nilai "1s", dan peluang Meniadakan resource yang memblokir render, yang mengarah ke File style.css:

Mercusuar laporan untuk halaman yang tidak dioptimalkan, yang menampilkan FCP '1' dan 'Hilangkan pemblokiran resource di bagian 'Peluang'
Laporan Lighthouse menyarankan Anda untuk menyederhanakan style sheet untuk membuat halaman Anda 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 langsung ditempatkan setelah CSS selesai memuat:

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 mengecat 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" lalu pilih Show Coverage.
  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 jumlah CSS Anda digunakan pada 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.
  • Kelas yang ditandai dengan warna merah tidak penting, 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 menunda CSS yang tidak penting untuk nanti:

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

  2. Muat class lainnya secara asinkron dengan menerapkan kode berikut pola:

    <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 style sheet secara asinkron. Anda dapat mempelajari preload lebih lanjut di panduan Pramuat aset penting.
  • Atribut onload di link memungkinkan browser memproses CSS saat {i>style sheet<i} selesai dimuat.
  • "nulling" pengendali onload setelah digunakan membantu beberapa browser menghindari memanggil kembali pengendali saat mereka mengganti atribut rel.
  • Referensi ke lembar gaya di dalam elemen noscript menyediakan untuk browser yang tidak mengeksekusi JavaScript.

Halaman yang dihasilkan akan terlihat sama persis seperti versi sebelumnya, bahkan bila sebagian besar gaya dimuat secara asinkron. Berikut cara kerja gaya inline dan permintaan asinkron ke file CSS terlihat seperti dalam HTML file:

Memantau

Gunakan DevTools untuk menjalankan trace Performa lain di halaman yang dioptimalkan.

Penanda FCP muncul sebelum halaman meminta CSS, yang berarti browser tidak perlu menunggu CSS dimuat sebelum merender halaman:

DevTools trace performa untuk halaman yang dioptimalkan, yang menampilkan FCP dimulai sebelum CSS memuat.
Di halaman yang dioptimalkan, FCP dapat dimulai sebelum spreadsheet gaya dimuat.

Sebagai langkah terakhir, jalankan Lighthouse di halaman yang dioptimalkan.

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

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

Saran Eliminasi aset yang memblokir render tidak lagi muncul di Peluang, dan berada di bagian Audit yang Lulus:

Mercusuar laporan, yang menampilkan &#39;Hilangkan pemblokiran resource&#39; tentang &#39;Audit yang Lulus&#39; bagian.
Halaman sekarang meneruskan resource pemblokir audit.

Langkah berikutnya & referensi

Dalam panduan ini, Anda mempelajari cara menunda CSS yang tidak penting dengan mengekstrak secara manual kode yang tidak digunakan di halaman. Untuk lingkungan produksi yang lebih kompleks, panduan ekstrak penting CSS mencakup beberapa alat paling populer untuk mengekstrak CSS kritis dan mencakup codelab untuk melihat caranya kerja dalam praktik