Bagaimana cara menghapus file css yang tidak perlu?

Question

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

Table of Contents Show

Bagaimana CSS yang tidak digunakan memperlambat kinerja
Cara mendeteksi CSS yang tidak terpakai
Sebariskan CSS kritis dan tunda CSS non-kritis
Panduan khusus tumpukan
Bagaimana CSS yang Tidak Digunakan Memperlambat Kinerja?
Cara Mengidentifikasi CSS yang Tidak Digunakan
Hapus CSS yang Tidak Digunakan
Hapus CSS yang Tidak Digunakan Secara Otomatis
Penutup, Cara Menghapus CSS yang Tidak Digunakan
Bagaimana cara membersihkan file CSS?
Bagaimana cara memperbaiki CSS yang tidak terpakai?
Bisakah saya menghapus file CSS?
Bagaimana cara menyingkirkan CSS yang tidak terpakai di Chrome?

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

Alat Pengembang Chrome. tab cakupan

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

Bagaimana cara membersihkan file CSS?

Cara menghapus CSS yang tidak terpakai secara manual .

Buka Chrome DevTools

Buka menu perintah dengan. cmd + shift + p

Ketik "Cakupan" dan klik opsi "Tampilkan Cakupan".

Pilih file CSS dari tab Cakupan yang akan membuka file di tab Sumber

Bagaimana cara memperbaiki CSS yang tidak terpakai?

4 Cara Menghapus CSS yang Tidak Digunakan. Cara menghapus CSS yang tidak terpakai untuk mengurangi ukuran bundel aplikasi Anda dan mempertahankan kode yang jelas dan sederhana. .

PurgeCss. pengantar. .

MemurnikanCSS. PurifyCSS Online - Hapus CSS yang tidak terpakai. .

uncss. UnCSS Daring. .

Tab Cakupan di Chrome DevTools (Secara Manual) Tab Cakupan ini membantu kami menemukan kode Js dan CSS yang tidak terpakai

Bisakah saya menghapus file CSS?

Anda tidak dapat menghapus file CSS melalui Javascript di browser karena itu adalah bahasa skrip sisi klien . Anda dapat menghapus gaya css yang diterapkan pada elemen html Anda, ya; .