Performa adalah bagian penting dari pengalaman pengguna dan memengaruhi metrik bisnis. Anda mungkin berpikir bahwa jika Anda adalah developer yang baik, Anda akan memiliki situs yang berperforma baik, tetapi faktanya performa 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 sekumpulan batas yang diterapkan pada metrik yang memengaruhi performa situs. Ini bisa berupa total ukuran halaman, waktu yang diperlukan untuk memuat di jaringan seluler, atau bahkan jumlah permintaan HTTP yang dikirim. Menetapkan anggaran membantu memulai percakapan tentang performa web. Hal ini berfungsi sebagai titik referensi untuk membuat keputusan tentang desain, teknologi, dan penambahan fitur.
Memiliki anggaran memungkinkan desainer untuk memikirkan efek gambar resolusi tinggi dan jumlah {i>font<i} web yang mereka pilih. Hal ini juga membantu developer membandingkan berbagai pendekatan terhadap masalah dan mengevaluasi framework serta library berdasarkan ukuran dan biaya penguraian.
Pilih metrik
Metrik berbasis kuantitas ⚖️
Metrik ini berguna pada tahap awal pengembangan karena menyoroti dampak dari menyertakan 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 beberapa batasan 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-angka ini tidak memberi Anda banyak informasi tentang pengalaman pengguna. Dua halaman dengan jumlah permintaan atau bobot yang sama dapat dirender secara berbeda, bergantung pada urutan resource yang diminta. Jika resource penting seperti banner besar atau stylesheet di salah satu halaman dimuat terlambat di proses ini, pengguna akan menunggu lebih lama untuk melihat sesuatu yang berguna dan menganggap halaman tersebut lebih lambat. Jika di halaman lain bagian terpenting dimuat dengan cepat, bagian tersebut bahkan mungkin tidak menyadari jika bagian halaman lainnya tidak dimuat dengan cepat.
Itulah sebabnya penting untuk melacak jenis metrik lainnya.
Penentuan 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 pemuatan 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.
Waktu untuk Interaktif (TTI) mengukur waktu yang diperlukan halaman untuk menjadi interaktif sepenuhnya dan merespons input pengguna dengan andal. Metrik ini sangat penting untuk dilacak apakah Anda mengharapkan segala jenis interaksi pengguna di halaman, seperti mengklik link, tombol, mengetik, atau menggunakan elemen formulir.
Metrik berbasis aturan BEGIN
Lighthouse dan WebPageTest menghitung skor performa berdasarkan aturan praktik terbaik umum, yang dapat Anda gunakan sebagai pedoman. Sebagai bonus, Lighthouse juga menawarkan petunjuk untuk pengoptimalan sederhana.
Anda akan mendapatkan hasil terbaik jika melacak kombinasi metrik performa berbasis kuantitas dan yang berpusat pada pengguna. Fokus pada ukuran aset di fase awal proyek dan mulai lacak FCP dan TTI sesegera mungkin.
Menetapkan dasar pengukuran
Satu-satunya cara untuk mengetahui konten yang paling efektif untuk situs Anda adalah dengan mencobanya—lakukan riset, lalu uji temuan Anda. Analisis persaingan untuk melihat bagaimana peringkat Anda. 🕵️
Jika tidak punya waktu untuk itu, berikut angka default yang bagus untuk memulai:
- Kurang dari 5 detik Waktu untuk Interaktif
- Kurang dari 170 KB dari resource jalur kritis (dikompresi/diminifikasi)
Angka ini dihitung berdasarkan perangkat dasar di dunia nyata dan kecepatan jaringan 3G. Lebih dari separuh traffic internet saat ini terjadi di jaringan seluler, jadi Anda harus menggunakan 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 yang berukuran kurang dari 2 MB di desktop
- Halaman beranda kami harus dimuat dan interaktif dalam < 5 detik dengan 3G lambat di ponsel Moto G4
- Blog kami harus mendapatkan skor > 80 dalam audit performa Lighthouse
Menambahkan anggaran performa ke proses build
Memilih alat untuk ini akan sangat bergantung pada skala proyek dan sumber daya yang dapat Anda dedikasikan untuk tugas tersebut. Ada beberapa alat open source yang bisa membantu Anda menambahkan anggaran ke proses build:
Jika sesuatu melampaui batas yang ditentukan, Anda dapat:
- Mengoptimalkan fitur atau aset yang ada 🛠️
- Menghapus fitur atau aset yang ada 🗑️
- Jangan tambahkan fitur atau aset baru 🛍⛔
Lacak performa
Dengan memastikan situs Anda cukup cepat, Anda harus terus melakukan pengukuran setelah peluncuran awal. Dengan memantau metrik ini dari waktu ke waktu dan mendapatkan data dari pengguna sungguhan, Anda akan mengetahui dampak perubahan performa terhadap metrik bisnis utama.
Penutup
Tujuan anggaran performa adalah untuk memastikan Anda berfokus pada kinerja di seluruh proyek dan menetapkannya lebih awal akan membantu mencegah pelacakan kembali di kemudian hari. Ini harus menjadi titik referensi untuk membantu Anda mencari tahu apa yang harus disertakan di situs Anda. Ide utamanya adalah menetapkan sasaran agar Anda bisa menyeimbangkan kinerja dengan lebih baik tanpa membahayakan fungsionalitas atau pengalaman pengguna.🎯
Panduan berikutnya akan memandu Anda menentukan anggaran performa pertama dalam beberapa langkah mudah.