Apa saja cara utama mengoptimalkan performa frontend?

Question

IT Interview Practice · Accepted Answer

**Optimalkan bagian perjalanan pengguna yang benar-benar lambat, lalu ukur apakah perubahan membantu.** Bundle lebih kecil berguna ketika memperbaiki pengalaman atau menurunkan biaya yang relevan.

Misalnya pelanggan dengan ponsel biasa membuka halaman produk, terlambat melihat gambar utama, dan mengalami jeda saat memilih varian. Pemuatan dan interaksi merupakan masalah berbeda; satu optimasi belum tentu memperbaiki keduanya.

## 1. Pastikan gejala melalui pengukuran representatif

Pilih alur, perangkat, dan kondisi jaringan yang penting bagi produk. Gunakan pengukuran pengguna nyata untuk menemukan kelompok terdampak dan pengujian browser terkendali untuk mereproduksi masalah. Laptop pengembangan yang kuat dapat menyembunyikan keterlambatan yang dialami pelanggan.

- LCP mengukur kapan elemen konten terbesar yang terlihat selesai dirender, sehingga membantu menilai pengalaman pemuatan.
- INP menggambarkan respons terhadap interaksi pengguna sepanjang kunjungan halaman.
- CLS mengukur pergeseran tata letak yang tidak diharapkan, seperti konten bergeser saat gambar muncul.

[Core Web Vitals](https://web.dev/articles/vitals) ini menjelaskan aspek pengalaman yang berbeda. Pasangkan dengan tugas nyata, seperti berhasil memilih varian dan memasukkannya ke keranjang, agar perbaikan satu angka tidak menutupi fungsi yang rusak.

## 2. Temukan penyebab keterlambatan konten penting

Periksa waterfall request: linimasa yang menunjukkan kapan sumber daya ditemukan, diunduh, dan selesai. Pada halaman produk tadi, gambar utama mungkin baru mulai dimuat setelah JavaScript diunduh dan request API selesai.

```text
HTML -> JavaScript -> Product API -> Main image
```

Kompresi gambar membantu pengunduhannya, tetapi menemukan gambar lebih awal dapat menghilangkan waktu tunggu sebelumnya. Pertimbangkan menampilkan konten produk yang berguna dalam HTML awal melalui rendering server atau pembuatan statis jika sesuai. Periksa kesegaran data, biaya server, dan JavaScript yang tetap dibutuhkan untuk membuat konten interaktif.

## 3. Kurangi transfer dan eksekusi yang tidak diperlukan

Setelah alur kritis dipahami, hilangkan pekerjaan yang tidak membantu layar saat ini. Utamakan perubahan yang terkait keterlambatan terukur, bukan menerapkan semua optimasi tanpa pertimbangan.

- Sajikan gambar dengan ukuran dan format yang sesuai. Muat gambar di luar layar secara lazy, tetapi jangan menunda gambar utama yang ditunggu pengguna.
- Pisahkan kode berdasarkan rute atau fitur agar halaman produk tidak memuat antarmuka administrasi yang tidak digunakan.
- Hapus dependensi yang tidak perlu dan tinjau skrip pihak ketiga yang dapat menambah waktu jaringan serta pekerjaan main thread.
- Kompres respons teks yang sesuai dan cache aset statis berversi. Tentukan kebijakan aman yang terpisah untuk data personal.

File lebih kecil mengurangi transfer, tetapi browser tetap harus mengurai dan menjalankan kode. Periksa dampak jaringan sekaligus CPU sebelum menyatakan perubahan berhasil.

## 4. Perbaiki interaksi lambat pada penyebabnya

Jika pemilihan varian terlambat, lakukan profiling main thread yang menangani banyak pekerjaan skrip dan rendering halaman. Perhitungan panjang dapat menghalangi respons meskipun semua file sudah dimuat.

Bagi pekerjaan panjang menjadi bagian lebih kecil atau pindahkan komputasi yang sesuai ke worker. Untuk input yang sering berubah, hindari request tidak perlu dan cegah respons lama menimpa pilihan terbaru. Gunakan memoization ketika pengukuran menunjukkan perhitungan berulang mahal, bukan sebagai tambahan otomatis.

Untuk daftar sangat panjang, merender hanya bagian terlihat dapat mengurangi pekerjaan, tetapi pertahankan navigasi keyboard dan aksesibilitas. Sediakan ruang bagi gambar dan konten tertunda lainnya agar tata letak tidak melompat. Perubahan ini menangani gejala berbeda, jadi verifikasi masing-masing terhadap masalah awal.

## 5. Verifikasi seluruh alur setelah perubahan

Ulangi pengujian terkendali yang sama, lalu amati hasil pengguna nyata setelah rilis. Periksa kebenaran fungsi produk, akses keyboard, penyelesaian keranjang, dan peningkatan beban backend, selain metrik performa.

Tetapkan anggaran praktis untuk sumber daya penting dan pantau penurunan performa. Skor laboratorium yang baik saja tidak cukup jika pelanggan nyata masih menunggu atau tidak dapat menyelesaikan tugas. **Hasil akhirnya harus berupa alur yang lebih cepat, stabil, dan dapat digunakan, didukung pengukuran sebelum serta sesudah perubahan.**

1. Pastikan gejala melalui pengukuran representatif

2. Temukan penyebab keterlambatan konten penting

3. Kurangi transfer dan eksekusi yang tidak diperlukan

4. Perbaiki interaksi lambat pada penyebabnya

5. Verifikasi seluruh alur setelah perubahan

Pertanyaan terkait