Halo Sob! Saat kalian mengembangkan sebuah website, tentunya menginginkan performa website dalam kondisi yang terbaik. Setelah melakukan peningkatan performa website, kalian tidak ingin website mengalami penurunan performa. Sehingga demi mencegah website mengalami penurunan, Jagoan Hosting merekomendasikan untuk melakukan Performance Budget pada website kalian. Simak baik-baik artikel dibawah ini ya Sob!
Apa itu Performace Budget?Performace Budget pada website ini dimaksudkan untuk menjaga kondisi website tetap stabil dan optimal. Menjaga jumlah Permintaan Tetap Rendah Dan Ukuran File Kecil agar proses pemuatan laman web tidak diberikan muatan besar yang menghambat performa dari website itu sendiri.
Nah Jagoan Hosting dapat membantu kalian dalam melakukan performance budget untuk menjaga Kinerja Website kamu guys.
STEP 1: Dapat dilihat pada Lighthouse runtime environments report yang ada pada google chrome
Kalian juga dapat menetapkan file budgeting untuk menerapkan batasan eksplisit pada beberapa atau semua jenis resource ini. Setelah menentukan file budget, kolom Over Budget yang baru memberi tahu kalian apakah melebihi batas yang ditentukan sendiri.
Saat kalian menentukan file budget, Performance Budget hanya melaporkan jenis sumber daya yang kamu tentukan. Tetapi kamu masih dapat mengakses informasi untuk sisa jenis dari laporan untuk mempertahankan permintaan hitungan yang rendah dan ukuran file kecil.
STEP 2: Setup yang dibutuhkan :
Menentukan file budget
Dengan konvensi, file budget biasanya disebut budget.json tetapi kamu dapat menyebutnya apa pun yang kalian suka. Contoh di bawah ini menetapkan budget berikut:
- 300 kilobyte untuk semua skrip
- 100 kilobyte untuk semua gambar
- 200 kilobyte untuk semua sumber daya pihak ketiga
- Total 1000 kilobyte
- 10 permintaan jaringan untuk sumber daya pihak ketiga
- 50 total permintaan jaringan
Contoh JSON
[
{
“resourceSizes”: [
{
“resourceType”: “script”,
“budget”: 300
},
{
“resourceType”: “image”,
“budget”: 100
},
{
“resourceType”: “third-party”,
“budget”: 200
},
{
“resourceType”: “total”,
“budget”: 1000
}
],
“resourceCounts”: [
{
“resourceType”: “third-party”,
“budget”: 10
},
{
“resourceType”: “total”,
“budget”: 50
}
]
}
]
Saat kalian menetapkan budget Ukuran resource, kalian juga menentukan ukuran total transfer maksimum untuk semua sumber daya dalam kategori itu. Misalnya, dalam kode di atas ada budget 300 kilobyte untuk sumber daya skrip. Jika main.js adalah 200 kilobyte dan ads.js adalah 150 kilobyte, telah melampaui budget yang telah ditentukan.
Tabel di bawah ini menjelaskan masing-masing properti budget.json.
STEP 3: Meloloskan file budget sebagai flag
Yang dimaksud dari flag disini adalah field tambahan yang ada didalam table yang digunakan sebagai tanda. Dan flag sendiri memiliki fungsi membedakan data pada sebuah tabel yang sama tanpa perlu membuat tabel baru tentu hal ini dapat menghemat tabel penggunaan space pada database, sehingga lebih efektif, efisien dan meningkatkan performa aplikasi.
Saat menjalankan Lighthouse dari baris perintah, operasikan flag –budget-path (atau –budgetPath) yang diikuti oleh path ke file budget kalian untuk menghitung setiap kali kategori melebihi budget.
lighthouse https://youtube.com –budget-path=budget.json
Lewati flag –output = json diikuti oleh –output-path = report.json untuk menyimpan hasil laporan kalian sebagai JSON di direktori kerja saat ini.
lighthouse https://youtube.com –budget-path=budget.json –output=json –output-path=report.json
Nah, kalau Kamu masih bingung, santai. Kamu bisa hubungi teman-teman Jagoanhosting lewat Live Chat ataupun Open Ticket yak!