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.
Analisis awal
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:
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 |
| Ponsel | FCP | TTI |
|---|---|---|
| Halaman Beranda | 1.800 md | 6.150 md |
| Halaman hasil | 1.100 md | 7.870 md |
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:
- Kata kunci "terkait:" penelusuran Google
- Fitur situs serupa Alexa
- SimilarWeb
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 |
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 |
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 |
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.
Langkah berikutnya
Pastikan anggaran performa Anda diterapkan di seluruh project dan masukkan ke dalam proses build.