Baik Anda menggunakan library UI atau membuat gaya sendiri, mengirimkan sejumlah besar CSS menunda rendering karena browser harus mendownload dan mengurai file CSS sebelum dapat menampilkan halaman.
Galeri es krim responsif ini dibangun dengan Bootstrap. Library UI seperti Bootstrap mempercepat pengembangan, tetapi hal ini sering kali mengorbankan CSS yang membengkak dan tidak diperlukan, yang dapat memperlambat waktu pemuatan Anda. Bootstrap 4 berukuran 187 KB, sedangkan Semantic UI, library UI lainnya, berukuran besar 730 KB tanpa kompresi. Meskipun diminifikasi dan di-gzip, bobot Bootstrap tetap sekitar 20 KB, jauh di atas batas 14 KB untuk perjalanan pulang pergi pertama.
Kritis adalah alat yang mengekstrak, meminifikasi, dan menyisipkan CSS paruh atas. Hal ini memungkinkan konten paruh atas dirender sesegera mungkin, meskipun CSS untuk bagian lain dari halaman belum dimuat. Dalam codelab ini, Anda akan mempelajari cara menggunakan modul npm Critical.
Ukur
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan
Layar penuh
.
Untuk menjalankan audit Lighthouse di situs ini:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Klik Seluler.
- Centang kotak Performa.
- Hapus centang lainnya di bagian Audit.
- Klik Simulasi 3G Cepat, Lambat CPU 4x.
- Pilih kotak centang Hapus Penyimpanan. Jika opsi ini dipilih, Lighthouse tidak akan memuat sumber daya dari cache, yang menyimulasikan pengalaman pengunjung kali pertama terhadap halaman tersebut.
- Klik Run Audits.
Ketika Anda menjalankan audit pada komputer Anda, hasil yang tepat dapat bervariasi, tetapi dalam tampilan setrip film, Anda akan melihat aplikasi memiliki layar kosong cukup lama sebelum akhirnya merender konten. Itulah sebabnya First Contentful Paint (FCP) tinggi dan skor performa keseluruhan tidak tinggi.
Lighthouse hadir untuk membantu Anda memperbaiki masalah performa, jadi cari solusinya di bagian Peluang. Hilangkan resource yang memblokir render dicantumkan sebagai peluang, dan di situlah Kritis menunjukkan keunggulannya.
Optimalkan
- Klik Remix to Edit agar project dapat diedit.
Untuk mempercepat proses, Critical sudah diinstal dan file konfigurasi kosong disertakan dalam codelab.
Di file konfigurasi critical.js, tambahkan referensi ke Kritis, 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.
Konfigurasi Penting
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 dibuat inline file outputnya adalah HTML. Jika tidak, output-nya 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 Anda memiliki kueri media dalam CSS, hal ini memungkinkan Anda menghasilkan CSS penting yang mencakup beberapa ukuran area pandang. |
inline |
boolean | Jika disetel ke benar (true), CSS penting yang dihasilkan akan disisipkan dalam file sumber HTML. |
minify |
boolean | Jika disetel ke benar (true), nilai Kritis akan meminifikasi CSS kritis yang dihasilkan. Dapat dihilangkan saat mengekstrak CSS penting untuk beberapa resolusi karena Critical secara otomatis akan meminifikasinya untuk menghindari penyertaan aturan duplikat. |
Di bawah ini adalah contoh konfigurasi untuk mengekstrak CSS penting untuk beberapa resolusi. Tambahkan ke critical.js atau coba-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 merupakan file sumber sekaligus file tujuan karena opsi inline ditetapkan ke benar (true). Penting terlebih dahulu membaca file sumber HTML, mengekstrak CSS penting, lalu menimpa index.html dengan CSS penting yang disisipkan dalam <head>.
Array dimensions memiliki dua ukuran area pandang yang ditetapkan: 300x500 untuk layar ekstra kecil dan 1280x720 untuk layar laptop standar.
Opsi minify dihilangkan karena Critical secara otomatis meminifikasi CSS yang diekstrak saat ada beberapa ukuran area pandang yang ditentukan.
Jalankan Kritis
Tambahkan Penting ke skrip Anda di package.json:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- 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
Kini di tag <head> pada index.html, CSS penting yang dihasilkan disisipkan di antara tag <style>, diikuti dengan skrip yang memuat CSS lainnya secara asinkron.
Ukur lagi
Ikuti langkah-langkah dari awal codelab untuk menjalankan kembali audit performa Lighthouse. Hasil yang Anda dapatkan akan terlihat seperti ini:
