Tim web di Zalando menemukan bahwa integrasi Lighthouse CI memungkinkan pendekatan proaktif terhadap performa, dengan pemeriksaan status otomatis yang dapat membandingkan commit saat ini dengan cabang utama untuk mencegah regresi performa.
Dengan lebih dari 35 juta pelanggan aktif, Zalando adalah platform fashion online terkemuka di Eropa. Dalam postingan ini, kami menjelaskan alasan kami mulai menggunakan Lighthouse CI, kemudahan implementasi, dan keuntungan bagi tim kami.
Di Zalando, kami mengetahui hubungan antara performa situs dan pendapatan. Sebelumnya, kami menguji pengaruh peningkatan waktu pemuatan di halaman Katalog secara artifisial terhadap rasio pantulan, rasio konversi, dan pendapatan per pengguna. Hasilnya jelas. Peningkatan waktu muat halaman 100 milidetik menghasilkan peningkatan engagement dengan rasio pantulan yang lebih rendah dan peningkatan pendapatan per sesi sebesar 0,7%.
100md
Peningkatan waktu muat halaman
0,7%
Peningkatan pendapatan per sesi
Dukungan perusahaan tidak selalu berarti performa
Terlepas dari dukungan performa yang kuat di dalam perusahaan, jika performa tidak ditetapkan sebagai kriteria pengiriman produk, performa dapat dengan mudah hilang. Saat mendesain ulang situs Zalando pada tahun 2020, kami berfokus untuk menghadirkan fitur baru sekaligus mempertahankan pengalaman pengguna yang istimewa dan menerapkan perubahan pada situs dengan font kustom dan warna yang lebih cerah. Namun, saat situs dan aplikasi yang didesain ulang siap dirilis, metrik pengguna awal mengungkapkan bahwa versi baru lebih lambat. First Contentful Paint hingga 53% lebih lambat, dan Time to Interactive yang diukur kami melaporkan hingga 59% lebih lambat.
Web di Zalando
Situs Zalando dibuat oleh tim inti yang mengembangkan framework, dengan lebih dari 15 tim fitur yang berkontribusi pada microservice frontend. Sambil mendukung rilis baru, kami juga mengalihkan sebagian situs kami ke arsitektur yang lebih terpusat.
Arsitektur sebelumnya yang disebut Mosaic menyertakan cara untuk mengukur performa halaman dengan metrik internal. Namun, sulit untuk membandingkan metrik performa sebelum diluncurkan kepada pengguna sebenarnya karena kami tidak memiliki alat pemantauan performa lab internal. Meskipun melakukan deployment setiap hari, ada feedback loop sekitar satu hari bagi developer yang mengerjakan peningkatan performa.
Data Web dan Lighthouse siap membantu
Kami tidak sepenuhnya puas dengan metrik internal kami karena metrik tersebut tidak beradaptasi dengan baik dengan konfigurasi baru kami. Lebih penting lagi, mereka tidak berpusat pada pengalaman pelanggan. Kami beralih ke Data Web Inti karena mereka menyediakan kumpulan metrik yang ringkas, tetapi komprehensif, dan berfokus pada pengguna.
Untuk meningkatkan performa sebelum rilis, kita perlu membuat lingkungan lab yang tepat. Ini memberikan pengukuran yang dapat direproduksi, selain kondisi pengujian yang mewakili persentil ke-90 data lapangan kami. Kini, engineer yang sedang berupaya meningkatkan performa tahu di mana harus memfokuskan upaya mereka untuk memberikan dampak terbesar. Kami sudah menggunakan laporan audit Lighthouse secara lokal. Jadi iterasi pertama kami adalah mengembangkan layanan berdasarkan modul node Lighthouse, yang perubahannya dapat diuji dari lingkungan staging. Hal ini memberi kami feedback loop performa yang andal sekitar satu jam, sehingga kami dapat memberikan performa yang setara dan menyimpan rilis kami.
Memberikan masukan performa kepada developer terkait permintaan pull
Kami tidak ingin berhenti di situ, karena kami ingin memanfaatkan kesempatan ini untuk tidak hanya reaktif terhadap performa, tetapi juga proaktif. Melakukan peralihan dari modul node Lighthouse ke server Lighthouse CI (LHCI) tidak terlalu sulit. Kami memilih solusi yang dihosting sendiri untuk memberikan integrasi yang lebih baik dengan layanan perusahaan kami yang sudah ada. Aplikasi server LHCI kami dibangun sebagai image Docker, yang kemudian di-deploy ke cluster Kubernetes bersama dengan database PostgreSQL, dan laporan ke GitHub kami.
Framework kami sudah memberikan beberapa masukan performa kepada developer— ukuran paket komponen dibandingkan dengan nilai minimum pada setiap commit. Sekarang kita dapat melaporkan metrik Lighthouse sebagai pemeriksaan status GitHub. Hal ini menyebabkan pipeline CI gagal jika tidak memenuhi nilai minimum performa, dengan link ke laporan Lighthouse mendetail seperti yang ditunjukkan pada gambar berikut.
Memperluas cakupan performa
Kami memulai dengan pendekatan yang sangat pragmatis. Saat ini Lighthouse hanya berjalan di dua halaman terpenting kami: halaman beranda dan halaman detail produk. Untungnya, Lighthouse CI memudahkan Anda untuk memperluas konfigurasi run. Tim fitur yang menangani halaman tertentu di situs kami dapat menyiapkan pernyataan dan pola URL yang cocok. Dengan penerapan ini, kami cukup yakin bahwa cakupan kinerja kami akan meningkat.
Kami sekarang jauh lebih percaya diri saat mem-build rilis yang lebih besar, dan developer dapat menikmati feedback loop yang jauh lebih singkat terkait performa kode mereka.