Baik Anda menggunakan library UI atau membuat gaya sendiri, akan mengirimkan sejumlah besar rendering CSS yang tertunda karena browser harus mendownload dan mengurai file CSS sebelum dapat menampilkan halaman.
Galeri es krim yang responsif ini dibuat dengan Bootstrap. Library UI seperti Bootstrap mempercepat pengembangan, tetapi hal ini sering kali menyebabkan 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 dikompresi. Meskipun saat diminifikasi dan di-gzip, berat Bootstrap tetap sekitar 20 KB, jauh melebihi batas 14 KB untuk perjalanan pulang pergi pertama.
Penting adalah alat yang mengekstrak, meminifikasi, dan menyisipkan CSS di paruh atas. Dengan begitu, konten paruh atas dapat 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. 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.
- Kosongkan kotak centang lainnya di bagian Audit.
- Klik Simulated Fast 3G, 4x CPU Slowdown.
- Centang kotak Hapus Penyimpanan. Dengan memilih opsi ini, Lighthouse tidak akan memuat sumber daya dari cache, yang menyimulasikan cara pengunjung pertama kali menggunakan halaman tersebut.
- Klik Jalankan Audit.
Ketika Anda menjalankan audit pada komputer Anda, hasil sebenarnya mungkin berbeda, tetapi dalam tampilan setrip film, Anda akan melihat aplikasi memiliki layar kosong untuk beberapa saat sebelum akhirnya merender konten. Itulah sebabnya First Contentful Paint (FCP) memiliki nilai yang tinggi dan alasan skor performa keseluruhannya tidak bagus.
Lighthouse siap membantu Anda memperbaiki masalah performa, jadi cari solusi di bagian Peluang. Hilangkan resource yang memblokir render tercantum sebagai peluang, dan di situlah tombol Kritis muncul.
Pengoptimalan
- Klik Remix untuk Mengedit agar project dapat diedit.
Untuk mempercepat berbagai hal, Penting 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 ini adalah 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 di-inline, file output-nya 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 di 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), tombol Kritis akan meminifikasi CSS penting yang dihasilkan. Dapat dihilangkan saat mengekstrak CSS penting untuk beberapa resolusi karena Penting secara otomatis meminifikasinya untuk menghindari penyertaan aturan duplikat. |
Di bawah ini adalah contoh konfigurasi untuk mengekstrak CSS penting untuk beberapa resolusi. Tambahkan ke critical.js atau bermain-main 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 (true). Kritis terlebih dahulu membaca file sumber HTML, mengekstrak CSS penting, lalu menimpa index.html dengan CSS kritis yang disisipkan dalam <head>.
Array dimensions memiliki dua ukuran area pandang yang ditentukan: 300 x 500 untuk layar kecil tambahan dan 1280 x 720 untuk layar laptop standar.
Opsi minify dihilangkan karena Penting otomatis meminifikasi CSS yang diekstrak saat ada beberapa ukuran area pandang yang ditentukan.
Jalankan Penting
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 harus menggunakan opsi Layar Penuh).
Untuk membuat CSS penting, di konsol, jalankan:
npm run critical
refresh
Sekarang di tag <head> dari index.html, CSS penting yang dihasilkan akan dijadikan inline di antara tag <style>, diikuti dengan skrip yang memuat CSS lainnya secara asinkron.
Ukur lagi
Ikuti langkah-langkah dari awal codelab untuk menjalankan audit performa Lighthouse lagi. Hasil yang Anda dapatkan akan terlihat seperti ini:
