Cakupan Kode menguji setiap pemilih di setiap stylesheet yang dapat dibaca terhadap halaman aktif, sehingga Anda dapat melihat aturan CSS mana yang saat ini tidak cocok dengan apa pun, berapa byte yang terbuang setiap file, dan skrip mana yang menahan cat pertama.
Stylesheet hanya berkembang. Sebuah tema hadir dengan aturan untuk halaman yang tidak Anda miliki, kerangka kerja mengirimkan komponen yang tidak pernah Anda gunakan, dan tiga kali desain ulang kemudian tidak ada yang yakin bagian mana dari file yang memuat beban. Hasilnya adalah CSS yang membebani bandwidth setiap pengunjung dan waktu render untuk menyampaikan aturan yang tidak dapat digunakan halaman.
Cakupan Kode mengukur hal itu secara langsung. Ia menjalankan setiap aturan di setiap stylesheet yang akan dibaca oleh browser — termasuk aturan yang ada di dalam kueri media, @supports, dan @layer blok — dan menguji setiap pemilih terhadap DOM langsung. Aturan yang tidak cocok dengan apa pun saat ini dilaporkan sebagai tidak digunakan, per file, dengan persentase, byte yang terbuang, dan daftar lengkap penyeleksi yang dapat Anda perluas dan salin.
Ia berhati-hati terhadap jebakan yang terlihat jelas. Elemen semu dan kelas semu status dihilangkan sebelum dicocokkan, sehingga aturan :hover atau ::before dinilai berdasarkan apakah pemilih dasarnya ada dan bukan karena kesalahan penghapusan. Stylesheet yang disajikan lintas asal tanpa header CORS tidak dapat dibaca oleh skrip apa pun, sehingga ditandai sebagai tidak dapat dibaca alih-alih dihitung secara diam-diam sebagai sempurna. Dan karena pemindaian mencerminkan halaman sebagaimana adanya pada saat itu, aturan untuk menu, tab, dan modal yang belum terbuka akan terlihat tidak terpakai — jadi bukalah dan tekan Pindai ulang sebelum Anda menghapus apa pun.
Tab JavaScript menjawab pertanyaan berbeda: bobot dan pemblokiran. Ini menginventarisasi setiap skrip yang dimuat halaman dengan ukuran transfernya, waktu pengunduhannya, dan apakah itu async, ditangguhkan, sebuah modul, dimuat secara dinamis atau menahan cat pertama, lalu menjumlahkan berapa banyak byte yang diblokir. Laporan ini sengaja tidak dijual sebagai cakupan eksekusi — mengetahui baris JavaScript mana yang dijalankan memerlukan API debugger Chrome, yang tidak diminta oleh DevSuite Pro, jadi tidak ada apa pun di sini yang berpura-pura menjadi laporan tingkat baris.
Setiap aturan di setiap stylesheet yang dapat dibaca diuji terhadap DOM langsung, termasuk aturan di dalam kueri media, blok @supports dan @layer — tidak diperkirakan dari nama atau ukuran file.
Setiap stylesheet mendapatkan persentase yang tidak terpakai, jumlah aturan yang digunakan versus yang tidak terpakai, dan jumlah byte yang terbuang, diurutkan sehingga pelanggar terburuk berada di urutan teratas.
Perluas file apa pun untuk membaca penyeleksi yang tidak cocok dengan apa pun, lalu salin file tersebut sebagai blok CSS untuk dikerjakan di editor Anda atau diserahkan ke rekan satu tim.
Elemen semu dan kelas semu status seperti :hover dan :focus-within dihilangkan sebelum dicocokkan, sehingga aturan interaktif dinilai secara adil dan bukannya dihapuskan.
Setiap skrip terdaftar dengan ukurannya, waktu pengunduhan dan apakah itu async, ditangguhkan, sebuah modul, dimuat secara dinamis atau memblokir cat pertama — ditambah total byte pemblokiran.
Stylesheet lintas asal yang tidak dapat dibaca ditandai, bukan diberi skor, dan tab JS menyatakan dengan jelas bahwa ia mengukur bobot, bukan garis mana yang dieksekusi. Tidak ada angka yang ditemukan.
Tema yang dibeli mengirimkan CSS untuk lusinan tata letak demo. Lihat berapa banyak bagian yang tidak pernah digunakan situs Anda dan potong file tersebut dengan bukti, bukan dugaan.
Periksa seberapa banyak kerangka kerja CSS yang bertahan pada templat sebenarnya, dan apakah konfigurasi pembersihan atau konfigurasi pengguncangan pohon Anda berfungsi seperti yang Anda pikirkan.
Buat daftar skrip yang menahan rendering, beserta ukurannya, dan putuskan apa yang harus ditunda, dibagi, atau dihapus agar konten dapat ditampilkan di layar lebih cepat.
Pelajari angka-angkanya: file mana yang paling banyak menghabiskan byte, berapa banyak pemblokiran JavaScript, dan di mana jam kerja pertama memberikan hasil paling banyak.
Dengan mengambil alih situs yang tidak Anda buat, bacalah sekilas seberapa banyak CSS dan JavaScript-nya yang masih layak mendapat tempatnya.
Klik ikon Cakupan Kode di dok DevSuite Pro. Pemindaian segera dijalankan dan melaporkan berapa banyak aturan yang diperiksa dan bagian mana yang tidak digunakan.
Baris atas memberi Anda jumlah stylesheet, aturan total, persentase yang tidak terpakai, dan byte yang terbuang. File di bawah ini diurutkan berdasarkan berapa banyak yang terbuang.
Klik tampilkan pemilih yang tidak digunakan pada file apa pun untuk membaca aturan mana yang tidak cocok dengan apa pun di halaman ini.
Buka menu, tab, akordeon, dan modals, lalu tekan Pindai ulang. Aturan yang elemennya hanya ada di negara bagian tersebut akan berpindah dari tidak terpakai ke terpakai — selalu lakukan ini sebelum menghapus.
Menyalin penyeleksi yang tidak digunakan memberi Anda blok CSS untuk dikerjakan; Ekspor JSON menyalin laporan lengkap, termasuk inventaris JavaScript, untuk tiket atau dokumen audit.
Instal DevSuite Pro secara gratis dan buka 71+ alat pengembang untuk browser Anda.
