Cakupan: Temukan JavaScript dan CSS yang tidak digunakan

Kayce Basques
Kayce Basques

Tab Cakupan di Chrome DevTools dapat membantu Anda menemukan kode JavaScript dan CSS yang tidak digunakan. Menghapus kode yang tidak digunakan dapat mempercepat pemuatan halaman dan menghemat data seluler pengguna seluler Anda.

Menganalisis cakupan kode.
Gambar 1. Menganalisis cakupan kode.

Ringkasan

Mengirimkan JavaScript atau CSS yang tidak digunakan adalah masalah umum dalam pengembangan web. Misalnya, Anda ingin menggunakan komponen tombol Bootstrap di halaman Anda. Untuk menggunakan komponen tombol, Anda perlu menambahkan link ke stylesheet Bootstrap di HTML Anda, seperti ini:

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

Stylesheet ini tidak hanya menyertakan kode untuk komponen tombol. File ini berisi CSS untuk semua komponen Bootstrap. Tetapi Anda tidak menggunakan komponen Bootstrap lainnya. Jadi laman Anda mengunduh banyak CSS yang tidak diperlukannya. CSS tambahan ini menjadi masalah karena alasan berikut:

  • Kode tambahan memperlambat pemuatan halaman. Lihat CSS Pemblokiran Render.
  • Jika pengguna mengakses halaman di perangkat seluler, kode tambahan akan menghabiskan data seluler mereka.

Membuka tab Cakupan

  1. Buka Menu Command.
  2. Mulai ketik coverage, pilih perintah Show Coverage, lalu tekan Enter untuk menjalankan perintah. Tab Cakupan akan terbuka di Panel Samping.
Tab Cakupan.
Gambar 2. Tab Cakupan.

Rekam cakupan kode

  1. Klik salah satu tombol berikut di tab Cakupan:
    • Klik Mulai Cakupan Instrumentasi Dan Muat Ulang Halaman Muat ulang jika Anda ingin melihat kode yang diperlukan untuk memuat halaman.
    • Klik Cakupan Instrumen Record jika Anda ingin melihat kode yang digunakan setelah berinteraksi dengan halaman.
  2. Klik Stop Instrumenting Coverage And Show Results Hentikan jika Anda ingin berhenti merekam cakupan kode.

Menganalisis cakupan kode

Tabel di tab Cakupan menunjukkan resource yang dianalisis, dan jumlah kode yang digunakan dalam setiap resource. Klik baris untuk membuka resource tersebut di panel Sources dan melihat perincian baris demi baris untuk kode yang digunakan dan kode yang tidak digunakan. Setiap baris kode yang tidak digunakan akan memiliki garis merah di awal.

Laporan cakupan kode.
Gambar 3. Laporan cakupan kode.
  • Kolom URL adalah URL resource yang dianalisis.
  • Kolom Jenis menunjukkan apakah resource berisi CSS, JavaScript, atau keduanya.
  • Kolom Total Byte adalah ukuran total resource dalam byte.
  • Kolom Unused Bytes adalah jumlah byte yang tidak digunakan.
  • Kolom terakhir tanpa nama adalah visualisasi kolom Total Bytes dan Unused Bytes. Bagian merah batang adalah byte yang tidak digunakan. Bagian hijau digunakan untuk byte.