Bagian Peluang laporan Mercusuar Anda mencantumkan semua lembar gaya dengan CSS yang tidak digunakan dengan potensi penghematan 2 KiB atau lebih. Hapus CSS yang tidak terpakai untuk mengurangi byte yang tidak perlu dikonsumsi oleh aktivitas jaringan
Bagaimana CSS yang tidak digunakan memperlambat kinerja
Menggunakan tag <link>_ adalah cara umum untuk menambahkan gaya ke halaman
<!DOCTYPE html><html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
File main.css yang diunduh browser dikenal sebagai lembar gaya eksternal, karena disimpan terpisah dari HTML yang menggunakannya
Secara default, browser harus mendownload, mengurai, dan memproses semua stylesheet eksternal yang ditemuinya sebelum dapat menampilkan, atau merender, konten apa pun ke layar pengguna. Tidak masuk akal bagi browser untuk mencoba menampilkan konten sebelum stylesheet diproses, karena stylesheet mungkin berisi aturan yang memengaruhi gaya halaman
Setiap lembar gaya eksternal harus diunduh dari jaringan. Perjalanan jaringan ekstra ini dapat secara signifikan meningkatkan waktu yang harus ditunggu pengguna sebelum mereka melihat konten apa pun di layar mereka
CSS yang tidak digunakan juga memperlambat konstruksi pohon render browser. Pohon render mirip dengan pohon DOM, kecuali ia juga menyertakan gaya untuk setiap node. Untuk membuat pohon render, browser harus berjalan di seluruh pohon DOM, dan memeriksa aturan CSS mana yang berlaku untuk setiap node. Semakin banyak CSS yang tidak digunakan, semakin banyak waktu yang mungkin dibutuhkan browser untuk menghitung gaya untuk setiap node
Cara mendeteksi CSS yang tidak terpakai
Tab Cakupan Chrome DevTools dapat membantu Anda menemukan CSS yang kritis dan tidak kritis. Lihat
Anda juga dapat mengekstrak informasi ini dari Dalang. Lihat
Sebariskan CSS kritis dan tunda CSS non-kritis
Mirip dengan kode sebaris dalam tag <script>, gaya kritis sebaris diperlukan untuk cat pertama di dalam blok <style> di head halaman HTML. Kemudian muat gaya lainnya secara asinkron menggunakan tautan preload
Pertimbangkan untuk mengotomatiskan proses mengekstraksi dan menyisipkan CSS "Above the Fold" menggunakan alat Kritis
Pelajari lebih lanjut di Tunda CSS yang tidak penting
Panduan khusus tumpukan
Drupal
Pertimbangkan untuk menghapus aturan CSS yang tidak digunakan. Hanya lampirkan pustaka Drupal yang diperlukan ke halaman atau komponen yang relevan di halaman. Lihat untuk detailnya
Jika Anda memiliki aturan gaya CSS di lembar gaya Anda yang tidak digunakan pada halaman, maka Anda memiliki "CSS yang tidak digunakan"
Adalah umum untuk menemukan ketika stylesheet berkembang, bahwa ada aturan yang tidak lagi digunakan
Bahkan lembar gaya baru dapat menyertakan "CSS yang Tidak Digunakan", terutama jika Anda menggunakan kerangka kerja CSS dan tidak menggunakan semua aturan
Alasan kami ingin menghapus aturan CSS yang Tidak Digunakan ini adalah karena memperlambat kinerja
Bagaimana CSS yang Tidak Digunakan Memperlambat Kinerja?
Saat browser merender, browser perlu menambahkan setiap elemen satu per satu ke halaman
Untuk setiap elemen seperti tombol, perlu dilihat gaya mana yang harus diterapkan
Semakin banyak gaya yang Anda miliki di lembar gaya, semakin lama proses ini berlangsung
Jadi jika Anda memiliki 100 elemen pada halaman dan 100 aturan, maka itu harus dijalankan melalui gaya 100 * 100
Semakin panjang daftar aturan ini, semakin besar pengaruhnya terhadap kinerja web Anda
Kita bisa mempercepat rendering halaman dengan mengurangi style di stylesheet
Yang meningkatkan kinerja web
Mari kita lihat bagaimana Anda dapat melihat apakah situs Anda memiliki CSS yang tidak terpakai
Cara Mengidentifikasi CSS yang Tidak Digunakan
Untuk menemukan CSS yang tidak terpakai di halaman Anda, kami dapat menggunakan Alat Pengembang Chrome
Kunjungi halaman yang ingin Anda uji dan klik kanan latar belakang
Pilih opsi "Periksa" dan itu akan membuka Alat Pengembang Chrome
Kita perlu membuka alat "cakupan" dan ada beberapa langkah untuk membukanya
Pertama, pastikan "laci konsol" terbuka dengan menekan tombol "Esc".
Setelah Anda membuka laci, cari tab "Cakupan".
Jika hilang maka tekan menu tiga titik di samping kata “Console” dan pilih “Coverage”
Untuk mulai merekam liputan, kita perlu menekan tombol rekam
Tekan segarkan dan Anda akan melihat file CSS dan JS Anda dimuat di jendela
Klik pada file CSS Anda dan Anda akan melihat bilah merah dan hijau di sebelah setiap gaya
Bilah hijau berarti bahwa gaya ini sedang digunakan oleh halaman
Bilah merah menunjukkan bahwa aturan tidak digunakan
Anda juga dapat melihat pada tabel di atas bahwa file CSS memiliki 97. 1% CSS yang tidak digunakan
Jadi kita sekarang tahu apa yang digunakan dan apa yang tidak
Mari kita lihat menghapusnya
Hapus CSS yang Tidak Digunakan
Cara sederhana adalah dengan menggunakan alat online seperti UnCSS Online
Alat sederhana ini memungkinkan Anda untuk memasukkan file CSS dan file HTML
Ini kemudian akan mencari tahu aturan CSS mana yang diterapkan dan hanya menampilkan CSS yang digunakan
Setelah Anda memiliki hasilnya, Anda dapat menyalinnya kembali ke file CSS dan menambahkannya ke halaman
Alat ini baik untuk tugas satu kali dan dapat berguna untuk halaman web statis
Jika Anda memiliki pengembang yang bekerja di situs Anda, maka Anda perlu mengotomatiskan proses ini
Mari kita lihat beberapa rekomendasi yang dapat Anda berikan kepada tim pengembangan
Hapus CSS yang Tidak Digunakan Secara Otomatis
Alat UnCSS online di atas menggunakan perpustakaan ini https. //github. com/uncss/uncss di belakang layar
Jika kita perlu menggunakan alat UnCSS secara teratur, sebaiknya gunakan perpustakaan ini sebagai bagian dari alur kerja pengembang
Untuk melakukan itu instal uncss menggunakan node
npm install -g uncss _
Kami kemudian dapat menggunakannya di baris perintah seperti ini
Usage: uncss [options] <file or URL, ...> e.g. uncss https://getbootstrap.com/docs/3.3/examples/jumbotron/ > stylesheet.css Options: -h, --help output usage information -V, --version output the version number -i, --ignore <selector, ...> Do not remove given selectors -m, --media <media_query, ...> Process additional media queries -C, --csspath <path> Relative path where the CSS files are located -s, --stylesheets <file, ...> Specify additional stylesheets to process -S, --ignoreSheets <selector, ...> Do not include specified stylesheets -r, --raw <string> Pass in a raw string of CSS -t, --timeout <milliseconds> Wait for JS evaluation -H, --htmlroot <folder> Absolute paths' root location -u, --uncssrc <file> Load these options from <file> -n, --noBanner Disable banner -a, --userAgent <string> Use a custom user agent string -I, --inject <file> Path to javascript file to be executed before uncss runs -o, --output <file> Path to write resulting CSS to
CSS kritis
Ada satu lagi peningkatan yang bisa kita lakukan pada CSS
Selain menghapus CSS yang tidak digunakan oleh halaman, kita dapat menyisipkan CSS kritis
Ini berarti bahwa salah satu gaya paruh atas masuk ke dalam file HTML. Gaya ini kemudian dihapus dari lembar gaya CSS eksternal
Untuk melakukan ini kita bisa menggunakan alat pengembang lain yang disebut Critical
Ini secara otomatis akan mengambil CSS paruh atas dan menambahkannya di dalam tag <script> di <head> halaman
Ini akan meningkatkan kecepatan halaman "First Paint" karena browser tidak perlu meminta file lain
CSS yang tersisa (paro bawah) menjadi file terpisah. Ini kemudian ditambahkan secara asinkron ke halaman menggunakan tautan preload
Mengambil CSS paruh bawah ini, kita kemudian dapat menggunakan tugas UnCSS di atas untuk membuat file ini sekecil mungkin
Untuk menjalankan alat menggunakan node
npm i -D critical
Kemudian Anda dapat menggunakannya sebagai bagian dari tugas Gulp
const critical = require('critical'); critical.generate({ inline: true, base: 'test/', src: 'index.html', target: 'index-critical.html', width: 1300, height: 900 }); _
Critical juga dapat memperkecil keluaran CSS, yang juga saya rekomendasikan
GulpJS
Rekomendasi terakhir yang dapat Anda buat adalah menggunakan alat alur kerja otomasi seperti GulpJS
GulpJS memungkinkan pengembang untuk mengotomatiskan proses pengaturan CSS Kritis dan kemudian menghapus CSS yang tidak terpakai
Penutup, Cara Menghapus CSS yang Tidak Digunakan
Kami telah melihat cara menghapus CSS yang tidak digunakan
Kami perlu menghapus CSS yang tidak terpakai karena setiap CSS yang tidak terpakai di situs Anda akan menyebabkan situs melambat
Kami telah melihat bagaimana Anda dapat mengidentifikasi CSS yang tidak terpakai menggunakan Alat Pengembang Chrome. Gunakan laporan Cakupan untuk melihat persentase CSS yang tidak digunakan di setiap halaman