Anggaran performa pertama Anda

Saat menetapkan anggaran pribadi, bisnis, atau keluarga, Anda menetapkan batas pembelanjaan dan memastikan Anda tidak melebihi anggaran tersebut. Anggaran performa berfungsi dengan cara yang sama, tetapi untuk metrik yang memengaruhi performa situs.

Dengan anggaran performa yang ditetapkan dan diterapkan, Anda dapat memastikan bahwa situs akan ditampilkan secepat mungkin. Hal ini akan memberikan pengalaman yang lebih baik bagi pengunjung dan berdampak positif pada metrik bisnis.

Berikut cara menentukan anggaran performa pertama Anda dalam beberapa langkah mudah.

Jika Anda mencoba meningkatkan performa situs yang sudah ada, mulailah dengan mengidentifikasi halaman yang paling penting. Misalnya, halaman landing ini dapat berupa halaman yang memiliki jumlah traffic pengguna tertinggi atau halaman landing produk.

Setelah Anda mengidentifikasi halaman utama, sekarang saatnya menganalisisnya. Pertama, kita akan fokus pada pencapaian pengaturan waktu yang paling baik untuk mengukur pengalaman pengguna.

Di bagian panel Audits di Chrome DevTools, Anda akan menemukan Lighthouse. Jalankan audit di setiap halaman di jendela Tamu untuk mencatat hal ini dua kali:

Panel Lighthouse di Chrome DevTools

Mari kita gunakan mesin telusur yang sangat khusus, Doggos.com, sebagai contoh. Doggos.com bertujuan untuk mengindeks semua hal yang terkait dengan di internet, dan halaman yang paling penting adalah halaman beranda dan hasil penelusuran. Berikut adalah angka FCP dan TTI yang diukur untuk situs di desktop dan perangkat seluler.

Desktop FCP TTI
Halaman Beranda 1.680 md 5.550 md
Halaman hasil 2.060 md 6.690 md
Analisis desktop Doggos.com
Ponsel FCP TTI
Halaman Beranda 1.800 md 6.150 md
Halaman hasil 1.100 md 7.870 md
Analisis seluler Doggos.com

Analisis kompetitif

Setelah Anda menganalisis situs Anda sendiri, kini saatnya untuk menganalisis situs pesaing Anda. Membandingkan hasil dari situs yang serupa dengan situs Anda adalah cara yang bagus untuk mengetahui anggaran performa. Apakah Anda sedang mengerjakan proyek yang mapan atau memulai dari awal, ini adalah langkah penting. Anda akan mendapatkan keunggulan kompetitif jika lebih cepat daripada pesaing Anda.

Jika Anda tidak yakin situs mana yang harus dilihat, berikut adalah beberapa alat yang dapat dicoba:

  1. Kata kunci "terkait:" penelusuran Google
  2. Fitur situs serupa Alexa
  3. SimilarWeb

Screenshot penelusuran Google dengan kata kunci terkait

Untuk mendapatkan gambaran yang realistis, cobalah untuk menemukan 10 atau lebih pesaing.

Anggaran untuk {i>milestone<i} waktu

Mesin telusur khusus kami dalam contoh ini memiliki beberapa pesaing dan kami akan fokus pada pengoptimalan beranda untuk perangkat seluler. Lebih dari setengah dari traffic internet saat ini terjadi di jaringan seluler. Penggunaan nomor seluler secara default tidak hanya bermanfaat bagi pengguna seluler, tetapi juga pengguna desktop.

Buat diagram dengan waktu FCP dan TTI untuk semua situs serupa dan soroti yang tercepat. Diagram seperti ini memberi Anda gambaran yang lebih jelas tentang performa situs Anda dibandingkan dengan pesaing.

Situs/Halaman Beranda FCP TTI
goggles.com 880 md 3.150 md
Doggos.com 1.800 md 6.500 md
quackquackgo.com 2.680 md 4.740 md
ding.xyz 2.420 md 7.040 md
Analisis kompetitif Doggos.com pada jaringan 3G
Doggo di depan komputer
Doggos.com tampaknya baik-baik saja dalam hal metrik FCP, tetapi sangat tertinggal dalam TTI

Anda dapat melakukan peningkatan dan panduan yang bagus untuk itu adalah aturan 20%. Penelitian menyatakan bahwa pengguna mengenali perbedaan dalam waktu respons ketika nilainya lebih besar dari 20%. Artinya, jika Anda ingin jauh lebih baik daripada situs terbaik yang sebanding, Anda harus minimal 20% lebih cepat.

Ukur Waktu saat ini Anggaran (20% lebih cepat daripada persaingan)
FCP 1.800 md 704 md
TTI 6.500 md 2.520 md
Anggaran performa yang akan membuat Doggos.com unggul dalam persaingan

Jika Anda mencoba mengoptimalkan situs yang sudah ada, sasaran tersebut mungkin tampak mustahil untuk dijangkau. Ini bukanlah tanda bagi Anda untuk menyerah. Mulai dengan langkah kecil dan tetapkan anggaran 20% lebih cepat dibandingkan kecepatan Anda saat ini. Terus optimalkan dari sana.

Untuk Doggos.com, anggaran yang direvisi dapat terlihat seperti ini.

Ukur Waktu saat ini Anggaran awal (20% lebih cepat dari waktu saat ini) Tujuan jangka panjang (20% lebih cepat daripada kompetisi)
FCP 1.800 md 1.440 md 704 md
TTI 6.500 md 5.200 md 2.520 md
Merevisi anggaran performa Doggos.com

Menggabungkan berbagai metrik

Anggaran performa yang solid menggabungkan berbagai jenis metrik. Kami telah menentukan anggaran untuk waktu pencapaian penting dan sekarang kami akan menambahkan dua lagi ke kombinasi:

  • metrik berbasis kuantitas
  • metrik berbasis aturan

Anggaran untuk metrik berbasis kuantitas

Berapa pun jumlah total berat halaman yang Anda hasilkan, cobalah untuk menayangkan kurang dari 170 KB resource critical-path (dikompresi/diminifikasi). Hal ini menjamin situs Anda akan cepat bahkan pada perangkat murah dan 3G yang lambat.

Anda dapat memiliki anggaran yang lebih besar untuk pengalaman desktop, tetapi jangan berlebihan. Berat halaman median di desktop dan seluler lebih dari 1 MB menurut data Arsip HTTP selama setahun terakhir. Untuk mendapatkan situs berperforma tinggi, Anda harus menargetkan jauh di bawah angka median ini.

Berikut beberapa contoh berdasarkan anggaran TTI:

Jaringan Perangkat JS Gambar CSS HTML Font Total Anggaran Waktu hingga Interaktif
3G lambat Moto G4 100 30 10 10 20 ~170 KB 5 dtk
4G lambat Moto G4 200 50 35 30 30 ~345 KB 3 dtk
WiFi Desktop 300 250 50 50 100 ~750 KB 2 dtk

Mendefinisikan anggaran berdasarkan metrik kuantitas adalah hal yang rumit. Situs e-commerce dengan banyak foto produk sangat berbeda dari portal berita yang sebagian besar berisi teks. Jika Anda memiliki iklan atau analisis di situs, hal tersebut akan meningkatkan jumlah JavaScript yang Anda kirim.

Gunakan tabel di atas sebagai titik awal dan sesuaikan berdasarkan jenis konten yang sedang Anda kerjakan. Tentukan apa yang akan disertakan dalam halaman Anda, tinjau riset Anda, dan buat perkiraan yang tepat untuk setiap ukuran aset. Misalnya, jika Anda membangun situs web dengan banyak gambar, berikan batas yang lebih ketat pada ukuran JS.

Setelah Anda memiliki situs yang berfungsi, periksa performa metrik performa yang berfokus pada pengguna dan sesuaikan anggaran Anda.

Anggaran untuk metrik berbasis aturan

Metrik berbasis aturan yang sangat efektif adalah skor Lighthouse. Lighthouse menilai aplikasi Anda dalam 5 kategori dan salah satunya adalah performa. Skor performa dihitung berdasarkan 5 metrik yang berbeda, termasuk First Contentful Paint dan Time to Interactive.

Saat Anda mencoba membuat situs yang bagus, tetapkan anggaran skor performa Lighthouse ke minimal 85 (dari 100). Gunakan Lighthouse CI untuk menerapkannya pada permintaan pull.

Memprioritaskan

Tanyakan pada diri sendiri tingkat interaksi yang Anda harapkan di situs Anda. Jika situs adalah situs berita, tujuan utama pengguna adalah membaca konten. Jadi, sebaiknya Anda berfokus untuk merender dengan cepat dan menjaga FCP tetap rendah. Pengunjung Doggos.com ingin mengklik link yang relevan sesegera mungkin, sehingga prioritas utamanya adalah TTI yang rendah.

Ketahui secara persis bagian audiens Anda yang melakukan penjelajahan di desktop vs. di perangkat seluler, dan prioritaskan hal yang sesuai. Salah satu cara untuk mengetahuinya adalah dengan memeriksa apa yang dilakukan audiens Anda di situs pesaing, melalui dasbor laporan Pengalaman Pengguna Chrome.

Data distribusi perangkat dari laporan Pengalaman Pengguna Chrome
Data distribusi perangkat dari laporan Pengalaman Pengguna Chrome

Langkah berikutnya

Pastikan anggaran performa Anda diterapkan di seluruh project dan masukkan ke dalam proses build.