Liputan Kod menguji setiap pemilih dalam setiap helaian gaya yang boleh dibaca terhadap halaman langsung, jadi anda boleh melihat peraturan CSS yang mana pada masa ini tidak sepadan, berapa banyak bait setiap fail yang dibazirkan dan skrip mana yang menahan cat pertama.
Lembaran gaya hanya berkembang. Satu tema tiba dengan peraturan untuk halaman yang anda tidak miliki, rangka kerja menghantar komponen yang tidak pernah anda gunakan, dan tiga reka bentuk semula kemudiannya tiada siapa yang pasti separuh daripada fail itu menanggung beban. Hasilnya ialah CSS yang menelan belanja setiap lebar jalur pelawat dan memberikan masa untuk menyampaikan peraturan yang tidak boleh digunakan oleh halaman.
Liputan Kod mengukurnya secara langsung. Ia menjalankan setiap peraturan dalam setiap helaian gaya yang akan dibenarkan oleh penyemak imbas dibaca — termasuk peraturan yang bersarang di dalam pertanyaan media, @supports dan blok @layer — dan menguji setiap pemilih terhadap DOM langsung. Peraturan yang tidak sepadan dengan apa-apa sekarang dilaporkan sebagai tidak digunakan, setiap fail, dengan peratusan, bait terbuang dan senarai penuh pemilih yang boleh anda kembangkan dan salin.
Ia berhati-hati tentang perangkap yang jelas. Elemen pseudo dan kelas pseudo keadaan dilucutkan sebelum dipadankan, jadi peraturan :hover atau ::before dinilai sama ada pemilih asasnya wujud dan bukannya dihapuskan secara salah. Helaian gaya yang disampaikan silang asal tanpa pengepala CORS tidak boleh dibaca oleh mana-mana skrip, jadi ia dibenderakan sebagai tidak boleh dibaca dan bukannya dikira secara senyap sebagai sempurna. Dan kerana imbasan mencerminkan halaman seperti pada masa itu, peraturan untuk menu, tab dan mod yang belum dibuka akan kelihatan tidak digunakan — jadi bukanya dan tekan Re-scan sebelum anda memadamkan apa-apa.
Tab JavaScript menjawab soalan yang berbeza: berat dan penyekatan. Ia menginventori setiap skrip yang dimuatkan halaman dengan saiz pemindahannya, masa muat turunnya dan sama ada ia tidak segerak, tertunda, modul, dimuatkan secara dinamik atau menahan cat pertama, kemudian menjumlahkan bilangan bait yang disekat. Ia sengaja tidak dijual sebagai liputan pelaksanaan — mengetahui baris JavaScript mana yang dijalankan memerlukan API penyahpepijat Chrome, yang tidak diminta oleh DevSuite Pro, jadi tiada apa-apa di sini yang berpura-pura sebagai laporan peringkat baris.
Setiap peraturan dalam setiap helaian gaya yang boleh dibaca diuji terhadap DOM langsung, termasuk peraturan dalam pertanyaan media, @supports dan blok @layer — bukan dianggarkan daripada nama atau saiz fail.
Setiap helaian gaya mendapat peratusan yang tidak digunakan, kiraan peraturan digunakan-berbanding-tidak digunakan dan bilangan bait terbuang, diisih supaya pesalah paling teruk berada di bahagian atas.
Kembangkan mana-mana fail untuk membaca pemilih yang tidak sepadan dengan apa-apa, kemudian salin fail tersebut sebagai blok CSS untuk digunakan dalam editor anda atau diserahkan kepada rakan sepasukan.
Elemen pseudo dan kelas pseudo keadaan seperti :hover dan :focus-within dilucutkan sebelum dipadankan, jadi peraturan interaktif dinilai secara adil dan bukannya dihapuskan.
Setiap skrip yang disenaraikan dengan saiznya, masa muat turun dan sama ada ia tidak segerak, tertunda, modul, dimuatkan secara dinamik atau menyekat cat pertama — ditambah dengan jumlah bait penyekat.
Lembaran gaya silang asal yang tidak boleh dibaca dibenderakan dan bukannya dijaringkan, dan tab JS menyatakan dengan jelas bahawa ia mengukur berat, bukan baris yang dilaksanakan. Tiada nombor ciptaan.
Tema yang dibeli menghantar CSS untuk berpuluh-puluh susun atur demo. Lihat berapa banyak yang tidak pernah digunakan oleh tapak anda dan potong fail dengan bukti dan bukannya tekaan.
Semak berapa banyak rangka kerja CSS bertahan pada templat sebenar dan sama ada konfigurasi pembersihan atau goncangan pokok anda melakukan apa yang anda fikirkan.
Senaraikan skrip yang menahan pemaparan, dengan saiznya dan tentukan perkara yang perlu ditangguhkan, dipecah atau digugurkan untuk mendapatkan kandungan pada skrin lebih awal.
Masuk dengan nombor: fail manakah yang paling banyak membazirkan bait, jumlah JavaScript yang disekat dan tempat kerja jam pertama yang paling berkesan.
Mengambil alih tapak yang anda tidak bina, dapatkan bacaan pantas tentang berapa banyak CSS dan JavaScriptnya masih mendapat tempatnya.
Klik ikon Liputan Kod dalam dok DevSuite Pro. Imbasan berjalan serta-merta dan melaporkan bilangan peraturan yang disemak dan bahagian mana daripada peraturan tersebut tidak digunakan.
Baris atas memberi anda kiraan lembaran gaya, jumlah peraturan, peratusan yang tidak digunakan dan bait terbuang. Fail di bawah dipesan mengikut jumlah pembaziran.
Klik tunjukkan pemilih yang tidak digunakan pada mana-mana fail untuk membaca dengan tepat peraturan yang sepadan dengan apa-apa pada halaman ini.
Buka menu, tab, akordion dan modal, kemudian tekan Re-scan. Peraturan yang unsur-unsurnya hanya wujud dalam keadaan tersebut akan beralih daripada tidak digunakan kepada digunakan — sentiasa lakukan ini sebelum memadamkan.
Salin pemilih yang tidak digunakan memberi anda blok CSS untuk diselesaikan; Eksport JSON menyalin laporan penuh, termasuk inventori JavaScript, untuk tiket atau dokumen audit.
Pasang DevSuite Pro secara percuma dan buka 71+ alat pembangun untuk pelayar anda.
