Performa adalah bagian penting dari pengalaman pengguna dan memengaruhi metrik bisnis. Sering kali Anda berpikir bahwa jika Anda adalah pengembang yang baik, Anda akan mendapatkan situs yang berkinerja tinggi, tetapi pada kenyataannya, kinerja yang baik jarang sekali menjadi efek samping. Seperti kebanyakan hal lainnya—untuk mencapai tujuan, Anda harus mendefinisikannya dengan jelas. Mulai perjalanan dengan menetapkan anggaran performa.
Definisi
Anggaran performa adalah serangkaian batas yang diberlakukan pada metrik yang memengaruhi performa situs. Hal ini bisa berupa ukuran total halaman, waktu yang diperlukan untuk memuat di jaringan seluler, atau bahkan jumlah permintaan HTTP yang dikirim. Menetapkan anggaran akan membantu memulai percakapan performa web. Ini berfungsi sebagai titik referensi untuk membuat keputusan tentang desain, teknologi, dan penambahan fitur.
Memiliki anggaran memungkinkan desainer untuk memikirkan efek gambar beresolusi tinggi dan jumlah {i>font web<i} yang mereka pilih. Hal ini juga membantu developer membandingkan berbagai pendekatan terhadap suatu masalah dan mengevaluasi framework serta library berdasarkan ukuran dan biaya penguraian.
Pilih metrik
Metrik berbasis jumlah ⚖️
Metrik ini berguna pada tahap awal pengembangan karena menyoroti dampak dari penyertaan gambar dan skrip yang berat. Mereka juga mudah dikomunikasikan kepada desainer dan pengembang.
Kami telah menyebutkan beberapa hal yang dapat Anda sertakan dalam anggaran performa seperti bobot halaman dan jumlah permintaan HTTP, tetapi Anda dapat membaginya menjadi batas yang lebih terperinci seperti:
- Ukuran maksimum gambar
- Jumlah maksimum font web
- Ukuran maksimum skrip, termasuk framework
- Jumlah total resource eksternal, seperti skrip pihak ketiga
Namun, angka ini tidak memberi tahu Anda banyak tentang pengalaman pengguna. Dua halaman dengan jumlah permintaan atau bobot yang sama dapat dirender secara berbeda bergantung pada urutan permintaan resource. Jika sumber daya penting seperti banner besar atau stylesheet di salah satu halaman dimuat dalam proses yang terlambat, pengguna akan menunggu lebih lama untuk melihat sesuatu yang berguna dan menganggap halaman tersebut lebih lambat. Jika di halaman lain bagian yang paling penting dimuat dengan cepat, mereka bahkan mungkin tidak menyadari jika bagian lain di halaman tersebut tidak dimuat dengan cepat.
Inilah mengapa penting untuk melacak jenis metrik yang lain.
Waktu pencapaian 📈️
Waktu pencapaian menandai peristiwa yang terjadi selama pemuatan halaman, seperti peristiwa DOMContentLoaded atau load. Waktu yang paling berguna adalah metrik performa yang berfokus pada pengguna yang memberi tahu Anda sesuatu tentang pengalaman memuat halaman. Metrik ini tersedia melalui API browser dan sebagai bagian dari laporan Lighthouse.
First Contentful Paint (FCP) mengukur saat browser menampilkan bit pertama konten dari DOM, seperti teks atau gambar.
Time to Interactive (TTI) mengukur waktu yang dibutuhkan halaman untuk menjadi sepenuhnya interaktif dan merespons input pengguna secara andal. Metrik ini sangat penting untuk dilacak jika Anda mengharapkan jenis interaksi pengguna apa pun di halaman seperti mengklik link, tombol, mengetik, atau menggunakan elemen formulir.
Metrik berbasis aturan 🔥
Lighthouse dan WebPageTest menghitung skor performa berdasarkan aturan praktik terbaik umum, yang dapat Anda gunakan sebagai panduan. Sebagai bonus, Lighthouse juga menawarkan petunjuk untuk pengoptimalan sederhana.
Anda akan mendapatkan hasil terbaik jika terus melacak kombinasi metrik performa berbasis kuantitas dan yang berfokus pada pengguna. Fokus pada ukuran aset di fase awal proyek dan mulailah melacak FCP dan TTI sesegera mungkin.
Menetapkan dasar pengukuran
Satu-satunya cara untuk benar-benar mengetahui opsi yang paling efektif untuk situs Anda adalah dengan mencobanya—melakukan riset, lalu menguji temuan Anda. Analisis persaingan untuk melihat bagaimana peringkat Anda. 🕵️
Jika Anda tidak sempat melakukannya, berikut ini angka default yang baik untuk membantu Anda memulai:
- Di bawah 5 dtk Waktu untuk Interaktif
- Di bawah 170 KB dari resource critical-path (dikompresi/diminifikasi)
Jumlah ini dihitung berdasarkan perangkat dasar pengukuran di dunia nyata dan kecepatan jaringan 3G. Lebih dari setengah traffic internet saat ini terjadi di jaringan seluler, jadi sebaiknya gunakan kecepatan jaringan 3G sebagai titik awal.
Contoh anggaran
Anda harus memiliki anggaran untuk berbagai jenis halaman di situs Anda karena kontennya akan bervariasi. Contoh:
- Halaman produk kami harus mengirimkan kurang dari 170 KB JavaScript di perangkat seluler
- Halaman penelusuran kami harus menyertakan gambar berukuran kurang dari 2 MB di desktop
- Halaman beranda kami harus dimuat dan interaktif dalam waktu < 5 detik dengan 3G lambat di ponsel Moto G4
- Blog kami harus mendapatkan skor > 80 untuk audit performa Lighthouse
Menambahkan anggaran performa ke proses build
Memilih alat/{i>tool<i} untuk ini akan sangat bergantung pada skala proyek dan sumber daya yang dapat Anda dedikasikan untuk tugas tersebut. Ada beberapa alat open source yang dapat membantu Anda menambahkan anggaran ke proses build Anda:
Jika sesuatu melebihi batas yang ditentukan, Anda dapat:
- Mengoptimalkan fitur atau aset yang sudah ada 🏅️
- Menghapus fitur atau aset yang ada 🗑️
- Jangan tambahkan fitur atau aset baru \t⛔
Lacak performa
Dengan memastikan situs Anda cukup cepat, Anda harus terus melakukan pengukuran setelah peluncuran awal. Memantau metrik ini dari waktu ke waktu dan mendapatkan data dari pengguna nyata akan menunjukkan kepada Anda pengaruh perubahan performa terhadap metrik bisnis utama.
Penutup
Tujuan dari anggaran performa adalah memastikan Anda berfokus pada performa di seluruh project dan menetapkannya lebih awal akan membantu mencegah backtracking di kemudian hari. Harus menjadi titik referensi untuk membantu Anda mengetahui apa yang harus disertakan di situs web. Ide utamanya adalah menetapkan sasaran agar Anda dapat lebih menyeimbangkan performa tanpa mengganggu fungsi atau pengalaman pengguna.🎯
Panduan berikutnya akan memandu Anda dalam menentukan anggaran performa pertama dalam beberapa langkah sederhana.