Setelah Anda menentukan anggaran performa, kini saatnya menyiapkan proses build untuk melacaknya. Ada sejumlah alat yang dapat Anda gunakan untuk menentukan nilai minimum metrik performa yang dipilih dan memberikan peringatan jika Anda melebihi anggaran. Cari tahu cara memilih yang paling sesuai dengan kebutuhan dan penyiapan Anda saat ini. 🕵️ ♀️
Anggaran performa Lighthouse
Lighthouse adalah alat audit yang menguji situs di beberapa area utama—performa, aksesibilitas, praktik terbaik, dan seberapa baik performa situs Anda sebagai progressive web app.
Versi command line Lighthouse (v5+) mendukung penetapan anggaran performa berdasarkan:
- ukuran resource
- jumlah resource
Anda dapat menetapkan anggaran untuk salah satu jenis resource berikut:
document
font
image
media
other
script
stylesheet
third-party
total
Anggaran ditetapkan dalam file JSON dan setelah ditentukan, kolom "Melebihi Anggaran" yang baru akan memberi tahu Anda apakah Anda melebihi batas.
![Bagian Anggaran di laporan Lighthouse](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/budgets-section-lighthou-1f943ff9e538d.png?authuser=6&hl=id)
Petunjuk performa Webpack
Webpack adalah alat build yang canggih untuk mengoptimalkan pengiriman kode kepada pengguna. Fitur ini juga mendukung penetapan anggaran performa berdasarkan ukuran aset.
Aktifkan petunjuk performa di webpack.config.js
untuk mendapatkan peringatan atau error command line jika ukuran paket Anda melebihi batas. Ini adalah cara yang bagus untuk tetap memperhatikan ukuran aset selama pengembangan.
Setelah langkah build, webpack akan menampilkan daftar aset yang berkode warna serta ukurannya. Semua yang melebihi anggaran akan ditandai dengan warna kuning.
![Output webpack yang menandai bundle.js](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-output-highlighti-b33963dc70391.png?authuser=6&hl=id)
Batas default untuk aset dan titik entri adalah 250 KB. Anda dapat menetapkan target sendiri dalam file konfigurasi.
![Peringatan ukuran paket webpack](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-bundle-size-warni-412c8dae0aeea.jpg?authuser=6&hl=id)
Anggaran akan dibandingkan dengan ukuran aset yang tidak dikompresi. Ukuran JavaScript yang tidak dikompresi terkait dengan waktu eksekusi dan file berukuran besar dapat memerlukan waktu lama untuk dieksekusi, terutama di perangkat seluler.
![Rekomendasi pengoptimalan performa Webpack](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-performance-optim-174c6e4d62345.jpg?authuser=6&hl=id)
Ukuran Paket
Bundlesize adalah paket npm sederhana yang menguji ukuran aset terhadap batas yang telah Anda tetapkan. Dapat berjalan secara lokal dan terintegrasi dengan CI Anda.
CLI ukuran bundle
Jalankan bundlesize CLI dengan menentukan nilai minimum dan file yang ingin Anda uji.
bundlesize -f "dist/bundle.js" -s 170kB
Bundlesize menghasilkan hasil pengujian berkode warna dalam satu baris.
![Pengujian CLI ukuran bundle yang gagal](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/failing-bundlesize-cli-te-25490fc5a9ce2.png?authuser=6&hl=id)
![Meneruskan pengujian CLI ukuran paket](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/passing-bundlesize-cli-te-b41d7dc6c93a.png?authuser=6&hl=id)
Bundlesize untuk CI
Anda akan mendapatkan nilai maksimal dari bundlesize jika mengintegrasikannya dengan CI untuk secara otomatis menerapkan batas ukuran pada permintaan pull. Jika pengujian ukuran paket gagal, permintaan pull tersebut tidak akan digabungkan. Metode ini berfungsi untuk permintaan pull di GitHub dengan Travis CI, CircleCI, Wercker, dan Drone.
![Status pemeriksaan ukuran bundle di GitHub](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/bundlesize-check-status-742e3e8c62318.jpg?authuser=6&hl=id)
Anda mungkin memiliki aplikasi yang cepat saat ini, tetapi menambahkan kode baru sering kali dapat mengubahnya. Memeriksa permintaan pull dengan bundlesize akan membantu Anda menghindari regresi performa. Bootstrap, Tinder, Trivago, dan banyak lainnya menggunakannya untuk menjaga anggaran mereka.
Dengan ukuran paket, Anda dapat menetapkan nilai minimum untuk setiap file secara terpisah. Hal ini sangat berguna jika Anda memisahkan paket dalam aplikasi.
Secara default, pengujian ini menguji ukuran aset dengan gzip. Anda dapat menggunakan opsi kompresi untuk beralih ke kompresi Brotli atau menonaktifkannya sepenuhnya.
Bot Mercusuar
![Bot Mercusuar](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-3e2ca69e8688f.png?authuser=6&hl=id)
Lighthouse Bot terintegrasi dengan Travis CI dan menerapkan anggaran berdasarkan salah satu dari lima kategori audit Lighthouse. Misalnya, anggaran sebesar 100 untuk skor performa Lighthouse Anda. Terkadang lebih mudah untuk memantau satu angka daripada anggaran aset individual, dan skor Lighthouse mempertimbangkan banyak hal.
![Skor Mercusuar 💪](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-scores-c11f98857eaf.png?authuser=6&hl=id)
Lighthouse Bot menjalankan audit setelah Anda men-deploy situs ke server staging. Di .travis.yml
, tetapkan anggaran untuk kategori Lighthouse tertentu dengan opsi --perf
, --a11y
, --bp
, --seo
, atau --pwa
. Usahakan untuk tetap berada di zona hijau dengan skor minimal 90.
after_success: - ./deploy.sh # Deploy the PR changes to staging server - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test
Jika skor untuk permintaan pull di GitHub berada di bawah nilai minimum yang telah Anda tetapkan, Lighthouse Bot dapat mencegah penggabungan permintaan pull. ⛔
![Status pemeriksaan Bot Lighthouse di GitHub](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-check-stat-76287c5940f5b.png?authuser=6&hl=id)
Lighthouse Bot kemudian memberi komentar di permintaan pull Anda dengan skor yang diperbarui. Ini adalah fitur rapi yang mendorong percakapan tentang performa saat perubahan kode terjadi.
![Skor pelaporan Lighthouse berdasarkan permintaan pull](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-reporting-scor-f1b8e2faca379.png?authuser=6&hl=id)
Jika Anda mendapati permintaan pull diblokir oleh skor Lighthouse yang buruk, jalankan audit dengan Lighthouse CLI atau di Dev Tools. Alat ini menghasilkan laporan yang berisi detail tentang bottleneck dan petunjuk untuk pengoptimalan yang sederhana.
Ringkasan
Alat | CLI | CI | Ringkasan |
---|---|---|---|
Mercusuar | ✔️ | ❌ |
|
webpack | ✔️ | ❌ |
|
ukuranpaket | ✔️ | ✔️ |
|
Bot Mercusuar | ❌ | ✔️ |
|