Mengekstrak dan menyisipkan CSS penting dengan Kritis

Baik Anda menggunakan library UI atau membuat gaya sendiri, pengiriman CSS dalam jumlah yang signifikan akan menunda rendering karena browser harus mendownload dan mengurai file CSS sebelum dapat menampilkan halaman.

Galeri es krim responsif ini dibuat dengan Bootstrap. Library UI seperti Bootstrap mempercepat pengembangan, tetapi sering kali mengorbankan CSS yang membengkak dan tidak perlu, yang dapat memperlambat waktu pemuatan. Bootstrap 4 berukuran 187 KB, sedangkan Semantic UI, library UI lainnya, berukuran 730 KB tanpa kompresi. Meskipun diminifikasi dan dikompresi gzip, Bootstrap masih memiliki ukuran sekitar 20 KB, jauh di atas batas 14 KB untuk perjalanan bolak-balik pertama.

Critical adalah alat yang mengekstrak, meminifikasi, dan menyejajarkan CSS di atas lipatan. Hal ini memungkinkan konten paruh atas dirender sesegera mungkin, meskipun CSS untuk bagian lain halaman belum dimuat. Dalam codelab ini, Anda akan mempelajari cara menggunakan modul npm Critical.

Ukur

  • Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.

Untuk menjalankan audit Lighthouse di situs ini:

  1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  2. Klik tab Lighthouse.
  3. Klik Seluler.
  4. Centang kotak Performance.
  5. Hapus centang pada kotak lainnya di bagian Audit.
  6. Klik Simulasi 3G Cepat, Pelambatan CPU 4x.
  7. Centang kotak Kosongkan Penyimpanan. Jika opsi ini dipilih, Lighthouse tidak akan memuat resource dari cache, yang menyimulasikan pengalaman pengunjung pertama kali saat membuka halaman.
  8. Klik Jalankan Audit.

Panel Audit Chrome DevTools, yang didukung oleh Lighthouse

Saat menjalankan audit di komputer, hasil pastinya dapat bervariasi, tetapi dalam tampilan filmstrip, Anda akan melihat aplikasi memiliki layar kosong selama beberapa saat sebelum akhirnya merender konten. Inilah sebabnya First Contentful Paint (FCP) tinggi dan skor performa keseluruhan tidak bagus.

Audit Lighthouse yang menampilkan skor performa 84, FCP 3 detik, dan tampilan filmstrip saat memuat aplikasi

Lighthouse hadir untuk membantu Anda memperbaiki masalah performa, jadi cari solusi di bagian Peluang. Menghapus resource pemblokir render tercantum sebagai peluang dan di sinilah Critical bersinar.

Bagian 'Peluang' audit Lighthouse yang mencantumkan 'Hilangkan resource yang memblokir rendering'

Optimalkan

  • Klik Remix to Edit untuk membuat project dapat diedit.

Untuk mempercepat proses, Critical sudah diinstal dan file konfigurasi kosong disertakan dalam codelab.

Dalam file konfigurasi critical.js, tambahkan referensi ke Critical, lalu panggil fungsi critical.generate(). Fungsi ini menerima objek yang berisi konfigurasi.

const critical = require('critical');

critical.generate({
    // configuration
},(err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

Penanganan error tidak wajib, tetapi merupakan cara mudah untuk mengukur keberhasilan operasi di konsol.

Mengonfigurasi Kritis

Tabel di bawah berisi beberapa opsi Penting yang berguna. Anda dapat melihat semua opsi yang tersedia di GitHub.

Opsi Jenis Penjelasan
base string Direktori dasar untuk file Anda.
src string File sumber HTML.
dest string Target untuk file output. Jika CSS disisipkan, file output-nya adalah HTML. Jika tidak, outputnya adalah file CSS.
width, height nomor Lebar dan tinggi area pandang dalam piksel.
dimensions array Berisi objek dengan properti lebar dan tinggi. Objek ini mewakili area pandang yang ingin Anda targetkan dengan CSS paruh atas. Jika memiliki kueri media di CSS, Anda dapat membuat CSS penting yang mencakup beberapa ukuran area pandang.
inline boolean Jika disetel ke true, CSS penting yang dihasilkan akan disisipkan dalam file sumber HTML.
minify boolean Jika ditetapkan ke benar, Critical akan meminifikasi CSS penting yang dihasilkan. Dapat dihilangkan saat mengekstrak CSS penting untuk beberapa resolusi karena Critical otomatis meminimlisir CSS tersebut untuk menghindari penyertaan aturan duplikat.

Berikut adalah contoh konfigurasi untuk mengekstrak CSS penting untuk beberapa resolusi. Tambahkan ke critical.js atau coba dan sesuaikan opsi.

critical.generate({
  base: 'public/',
  src: './index.html',
  dest: './index.html',
  inline: true,
  dimensions: [
    {
      height: 500,
      width: 300,
    },
    {
      height: 720,
      width: 1280,
    },
  ]
}, (err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

Dalam contoh ini, index.html adalah file sumber dan file tujuan karena opsi inline disetel ke benar. Critical pertama-tama membaca file sumber HTML, mengekstrak CSS penting, lalu menimpa index.html dengan CSS penting yang disisipkan di <head>.

Array dimensions memiliki dua ukuran area pandang yang ditentukan: 300 x 500 untuk layar ekstra kecil dan 1280 x 720 untuk layar laptop standar.

Opsi minify dihilangkan karena Critical otomatis meminimalkan CSS yang diekstrak saat ada beberapa ukuran area pandang yang ditentukan.

Menjalankan Kritis

Tambahkan Critical ke skrip Anda di package.json:

scripts: {
  "start": "node server.js",
  "critical": "node critical.js"
}
  1. Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin perlu menggunakan opsi Layar Penuh).

Untuk membuat CSS penting, di konsol, jalankan:

npm run critical
refresh
Pesan sukses yang bertuliskan &#39;CSS penting telah dibuat&#39; di konsol
Pesan sukses di konsol

Sekarang di tag <head> dari index.html, CSS penting yang dihasilkan disejajarkan di antara tag <style>, diikuti dengan skrip yang memuat CSS lainnya secara asinkron.

index.html dengan CSS penting yang disisipkan
CSS penting yang disisipkan

Ukur lagi

Ikuti langkah-langkah dari awal codelab untuk menjalankan audit performa Lighthouse lagi. Hasil yang Anda dapatkan akan terlihat seperti ini:

Audit Lighthouse yang menampilkan skor performa 100, FCP 0,9 detik, dan tampilan filmstrip yang lebih baik saat memuat aplikasi