Dengan kecepatan halaman menjadi metrik penting untuk SEO dan UX selama bertahun-tahun, konsep a anggaran kinerja web juga telah menjadi yang terdepan. Kini semakin jelas bahwa kinerja web adalah topik yang memerlukan perspektif bersama di semua departemen, bukan hanya menjadi prioritas satu departemen atau individu.

Untuk menjelaskan hal ini dengan sebuah contoh: departemen pemasaran mungkin ingin menerapkan konversi dan kode pemasaran ulang/penargetan ulang, bersama dengan alat-alat seperti Rumah Criteo dan RTB, yang menggunakan penargetan ulang berbasis produk. Mereka mungkin juga mengharapkan foto dan animasi yang menarik. Sementara itu, departemen produk mungkin meminta integrasi alat seperti itu Hotjar dan Kejelasan. Departemen perangkat lunak, di sisi lain, bertujuan untuk berkembang secepat mungkin baik di frontend maupun backend. Permintaan dan biaya yang terkait dengan tuntutan kecepatan halaman ini sebenarnya seimbang. Anggaran kinerja web telah muncul untuk membangun keseimbangan ini secara efektif.

Anggaran kinerja web melibatkan penetapan kecepatan target untuk platform Anda pada platform tertentu dan menetapkan target numerik yang akan dipatuhi oleh semua pemangku kepentingan untuk mencapai kecepatan ini. Singkatnya, biaya untuk menjadi cepat adalah anggaran kinerja web.

 

gambar-5.png
Sumber: https://wp-rocket.me/blog/performance-budgets/

 

Segala sesuatu dimulai dengan sebuah proposisi. Anda mengusulkan seberapa cepat halaman Anda harus dibuka pada jenis koneksi tertentu. Misalnya, beberapa proposisi anggaran kinerja dapat berupa:

  • Bisakah beranda terbuka di bawah 2 detik pada koneksi seluler 3G yang cepat (1.6 Mbps)?
  • Bisakah halaman hasil pencarian terbuka di bawah 5 detik pada koneksi 3G lambat (780 Kbps)?

Selanjutnya, Anda membuat rencana tindakan dan sub-metrik untuk mencapai proposisi ini, membaginya menjadi beberapa bagian.

Selain proposisi, mungkin terdapat target anggaran kinerja lainnya. Misalnya:

  • Meningkatkan Mercusuar seluler skor halaman detail di atas 80
  • Mengurangi ukuran semua gambar di situs desktop hingga di bawah 500 KB

Metrik Anggaran Kinerja

Ada tiga perspektif berbeda yang diterima untuk menentukan metrik anggaran kinerja:

Metrik berbasis angka

  • Jumlah font maksimum / Ukuran font maksimum
  • Jumlah gambar maksimum / Ukuran gambar maksimum
  • Jumlah maksimum skrip, gaya, video, dll. / Ukuran maksimum skrip, gaya, video, dll
  • Ukuran HTML maksimum
  • Jumlah maksimum permintaan HTTP
  • Jumlah maksimum skrip pihak ketiga

 

gambar-7.png
Sumber: https://web.dev/vitals/

 

Metrik berbasis waktu

  • Pertama kali Contentful Paint (FCP).
  • Waktu Contentful Paint (LCP) Terbesar
  • Waktu Penundaan Input Pertama (FID).
  • Waktu ke waktu Interaktif (TTI).
  • Total Waktu Pemblokiran (TBT) waktu
  • Skor Pergeseran Tata Letak Kumulatif (CLS).
  • Skor Indeks Kecepatan

Metrik berbasis aturan

  • Skor mercusuar
  • skor GTmetrix
  • Skor tes halaman web
  • Skor lambat
kalkulator-anggaran-kinerja.png
Sumber: https://www.performancebudget.io/

Saat menetapkan anggaran kinerja web, umumnya disarankan untuk menggabungkan semua perspektif ini dalam ukuran yang tepat daripada memilih hanya satu. Anda dapat gunakan simulator anggaran kinerja untuk menemukan angka yang dibutuhkan untuk mencapai kecepatan target Anda.

Evaluasi Jenis Halaman Secara Terpisah

Salah satu poin penting ketika menentukan anggaran kinerja adalah tidak mendasarkannya pada satu halaman situs. Kesalahan umum adalah hanya menguji beranda, sehingga menghasilkan evaluasi yang tidak lengkap.

Anda harus mulai dengan memeriksa platform dan mengidentifikasi berbagai jenis halaman. Kemudian, analisis lalu lintas platform untuk mengidentifikasi halaman yang menerima lalu lintas terbanyak dan memprioritaskannya. Hasilnya akan menjadi tabel seperti ini:

  • Beranda
  • Halaman daftar statis
  • Halaman daftar dinamis
  • Halaman detail
  • Halaman checkout
  • Halaman hasil pencarian
  • Halaman kampanye
  • halaman blog

Anda harus fokus anggaran kinerja jenis halaman ini secara terpisah, berdasarkan prioritas.