Gunakan Lighthouse untuk anggaran performa

Katie Hempenius
Katie Hempenius

Lighthouse kini mendukung anggaran performa. Fitur ini, yang dikenal sebagai LightWallet, dapat disiapkan kurang dari lima menit dan memberikan masukan terkait metrik performa serta ukuran dan jumlah resource halaman.

Instal Lighthouse

LightWallet tersedia dalam versi command line Lighthouse v5+.

Untuk memulai, instal Lighthouse:

npm install -g lighthouse

Buat Anggaran

Buat file bernama budget.json. Dalam file ini, tambahkan JSON berikut:

[
  {
    "path": "/*",
    "timings": [
      {
        "metric": "interactive",
        "budget": 3000
      },
      {
        "metric": "first-meaningful-paint",
        "budget": 1000
      }
    ],
    "resourceSizes": [
      {
        "resourceType": "script",
        "budget": 125
      },
      {
        "resourceType": "total",
        "budget": 300
      }
    ],
    "resourceCounts": [
      {
        "resourceType": "third-party",
        "budget": 10
      }
    ]
  }
]

Contoh file budget.json ini menetapkan lima anggaran terpisah:

  • Anggaran 3.000 md untuk Saatnya untuk Interaktif.
  • Anggaran 1.000 md untuk Gambar Pertama yang Bermakna
  • Anggaran sebesar 125 KB untuk jumlah total JavaScript di halaman.
  • Anggaran 300 KB untuk ukuran halaman secara keseluruhan.
  • Anggaran sebanyak 10 permintaan untuk jumlah permintaan yang dibuat ke origin pihak ketiga.

Untuk mengetahui daftar lengkap metrik performa dan jenis resource yang didukung, lihat bagian Anggaran Performa di dokumen Lighthouse.

Jalankan Lighthouse

Jalankan Lighthouse menggunakan tanda --budget-path. Tanda ini memberi tahu Lighthouse lokasi file anggaran Anda.

lighthouse https://example.com --budget-path=./budget.json

Lihat Hasil

Jika LightWallet telah dikonfigurasi dengan benar, laporan Lighthouse akan berisi bagian Anggaran dalam kategori Performa.

'Anggaran' di laporan Lighthouse

Dalam laporan Lighthouse versi JSON, hasil Lightwallet dapat ditemukan dalam temuan audit untuk audit performance-budget.