penthouse
2.3.3
Generator CSS Jalur Kritis
Penthouse adalah generator css jalur kritis asli, membantu Anda mempercepat rendering halaman untuk situs web Anda. Berikan CSS lengkap situs Anda dan halaman yang ingin Anda buatkan CSS penting, dan Penthouse akan mengembalikan CSS penting yang diperlukan untuk merender konten paruh atas halaman dengan sempurna. Baca selengkapnya tentang jalur kritis css di sini.
Prosesnya otomatis dan CSS yang dihasilkan siap diproduksi apa adanya. Di balik layar Penthouse menggunakan dalang untuk menghasilkan css kritis melalui chromium:headless.
(Jika Anda tidak ingin menulis kode, Anda dapat menggunakan versi yang dihosting online.)
yarn add --dev penthouse
(atau npm install , jika tidak menggunakan benang)
penthouse ( {
url : 'http://google.com' ,
cssString : 'body { color: red }'
} )
. then ( criticalCss => {
// use the critical css
fs . writeFileSync ( 'outfile.css' , criticalCss ) ;
} )https://github.com/pocketjoso/penthouse/tree/master/examples
Penthouse dioptimalkan untuk menjalankan banyak pekerjaan secara paralel. Satu contoh browser bersama digunakan kembali dan setiap pekerjaan dijalankan di tab browsernya sendiri. Hanya ada begitu banyak pekerjaan yang dapat Anda jalankan secara paralel sebelum mesin Anda mulai kehabisan sumber daya. Untuk menjalankan banyak pekerjaan secara efektif, lihat contoh banyak url.
Hanya url dan cssString yang diperlukan - semua opsi lainnya bersifat opsional. Perhatikan bahwa file html yang ditemukan melalui url diharapkan memiliki gaya; penthouse tidak memasukkan gaya apa pun, ia hanya menggunakan cssString (atau css ) untuk memangkas menjadi css penting.
| Nama | Jenis | Bawaan | Keterangan |
|---|---|---|---|
| url | string | Url yang dapat diakses. Gunakan protokol file:/// untuk file html lokal. | |
| cssString | string | Css asli untuk mengekstrak css penting | |
| css | string | Jalur ke file css asli di disk (jika menggunakan cssString ) | |
| lebar | integer | 1300 | Lebar untuk area pandang kritis |
| tinggi | integer | 900 | Tinggi untuk area pandang kritis |
| tangkapan layar | object | Konfigurasi untuk tangkapan layar (tidak digunakan secara default). Lihat contoh tangkapan layar | |
| keepLargerMediaQueries | boolean | false | Pertahankan kueri media bahkan untuk nilai lebar/tinggi yang lebih besar dari area pandang kritis. |
| forceInclude | array | [] | Array pemilih css untuk tetap berada di css kritis, meskipun tidak muncul di area pandang kritis. String atau regex (fe ['.keepMeEvenIfNotSeenInDom', /^.button/] ) |
| forceExclude | array | [] | Array pemilih css yang akan dihapus di css kritis, meskipun muncul di area pandang kritis. String atau regex (fe ['.doNotKeepMeEvenIfNotSeenInDom', /^.button/] ) |
| propertiToRemove | array | ['(.*)transition(.*)', 'cursor', 'pointer-events', '(-webkit-)?tap-highlight-color', '(.*)user-select'] ] | Properti css untuk menyaring dari css kritis |
| batas waktu | integer | 30000 | MS; batalkan pembuatan CSS penting setelah waktu ini |
| dalang | object | Pengaturan untuk dalang. Lihat Contoh browser dalang khusus | |
| halamanLoadSkipTimeout | integer | 0 | MS; berhenti menunggu pemuatan halaman setelah waktu ini (untuk situs ketika peristiwa pemuatan halaman tidak dapat diandalkan) |
| renderWaktu Tunggu | integer | 100 | MS; tunggu beberapa saat setelah pemuatan halaman sebelum ekstraksi css penting dimulai (juga sebelum tangkapan layar "sebelum" diambil, jika digunakan) |
| permintaan blockJS | boolean | true | disetel ke false untuk memuat JS (tidak disarankan) |
| maxEmbeddedBase64Panjangnya | integer | 1000 | karakter; menghapus sumber daya berkode base64 inline yang lebih besar dari ini |
| maxElementsToCheckPerSelector | integer | undefined | Dapat ditentukan untuk membatasi jumlah elemen yang akan diperiksa per pemilih css, sehingga mengurangi waktu eksekusi. |
| agen pengguna | string | 'Penthouse Critical Path CSS Generator' | tentukan string agen pengguna mana saat memuat halaman |
| customPageHeader | object | Tetapkan header http tambahan untuk dikirim dengan permintaan url. | |
| kue | array | [] | Untuk memformat setiap cookie, lihat dokumen setCookie dalang |
| ketat | boolean | false | Membuat Penthouse melakukan kesalahan saat mengurai CSS asli. Opsi lama, tidak disarankan. |
| diizinkanResponseCode | number|regex|function | Biarkan Penthouse berhenti jika kode respons server tidak cocok dengan nilai ini. tipe number dan regex diuji terhadap respon.status(). Suatu function juga diperbolehkan dan mendapat Respon sebagai argumen. Fungsi tersebut harus mengembalikan boolean . |
Pencatatan dilakukan melalui modul debug di bawah namespace penthouse . Anda dapat melihat lebih lanjut tentang pencatatan log pada dokumentasi mereka.
# Basic verbose logging for all components
env DEBUG= " penthouse,penthouse:* " node script.jsInstal dependensi yang hilang untuk menjalankan Chrome tanpa kepala:
sudo apt-get install libnss3
Anda mungkin memerlukan daftar deps yang lebih panjang, tergantung pada lokasi Anda, lihat jawaban ini
Langkah pertama yang baik adalah dengan menguji url + css Anda di generator css jalur kritis yang dihosting, untuk menentukan apakah masalahnya ada pada input passing Anda (css + url), atau dengan pengaturan lokal Anda: https://jonassebastianohlsson.com /generator jalur kritis
Jika Anda melihat sekilas konten tanpa gaya muncul setelah menerapkan css penting Anda, maka ada sesuatu yang salah. Di bawah ini adalah penyebab paling umum dan beberapa saran umum terkait:
Umumnya Anda harus memastikan bahwa semua elemen yang ingin Anda gayakan dalam css penting muncul (terlihat) di HTML halaman Anda (dengan Javascript dinonaktifkan). Render pertama halaman Anda, yang dibantu oleh css penting menjadi lebih cepat, terjadi sebelum JS dimuat, itulah sebabnya Penthouse berjalan dengan JavaScript dinonaktifkan. Jadi jika html Anda pada dasarnya kosong, atau konten asli Anda disembunyikan sebelum memuat spinner atau sejenisnya, Anda harus mengatasi hal ini sebelum Anda bisa mendapatkan manfaat kinerja menggunakan css penting.
Jika html Anda baik-baik saja, tetapi bervariasi berdasarkan hal-hal seperti pengguna yang masuk, iklan pihak ketiga, dll, maka Anda dapat menggunakan parameter forceInclude untuk memaksa gaya tambahan tertentu tetap berada di css penting, bahkan jika Penthouse tidak melihatnya di halaman selama pembuatan css kritis.
Masalah ini dapat terjadi jika Anda memiliki elemen yang muncul di awal DOM, namun dengan gaya yang diterapkan untuk berpindah ke luar area pandang kritis (menggunakan posisi absolut atau transformasi). Penthouse tidak melihat posisi absolut dan mengubah nilai dan hanya akan melihat elemen tersebut tidak menjadi bagian dari viewport kritis, dan karenanya Penthouse tidak akan menganggap gayanya penting (sehingga elemen tanpa gaya akan muncul ketika css kritis digunakan). Solusi: Pertimbangkan apakah itu benar-benar harus muncul begitu awal di DOM, atau gunakan properti forceInclude untuk memastikan gaya untuk "menyembunyikan"/memindahkannya tertinggal di css penting.
Masalah dengan karakter khusus seperti → setelah konversi? Pastikan Anda menggunakan format heksadesimal yang benar di CSS Anda. Anda selalu bisa mendapatkan format ini dari konsol browser Anda, dengan memasukkan '→' .charCodeAt(0).toString(16) (jawaban untuk mesin terbang panah ini adalah 2192 ). Saat menggunakan format heksadesimal di CSS, format tersebut harus diawali dengan garis miring terbalik, seperti: 2192 (fe content: '2192'; )
