Cari tutorial

Performance Budget untuk Menjaga Kinerja Pada Web Kamu

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!

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!

 

Hanya Dengan 12.000/bln, Website Kamu Bisa 5x Lebih Cepat!!

Mau Dong!