Tim web di Zalando menemukan bahwa mengintegrasikan 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 mode online terkemuka di Eropa. Dalam postingan ini, kami menjelaskan alasan kami mulai menggunakan Lighthouse CI, kemudahan penerapannya, dan manfaatnya bagi tim kami.
Di Zalando, kami mengetahui hubungan antara performa situs dan pendapatan. Sebelumnya, kami menguji pengaruh peningkatan waktu pemuatan secara artifisial di halaman Katalog terhadap rasio pantulan, rasio konversi, dan pendapatan per pengguna. Hasilnya jelas. Peningkatan waktu muat halaman sebesar 100 milidetik menghasilkan peningkatan interaksi dengan rasio pantulan yang lebih rendah dan peningkatan pendapatan per sesi sebesar 0,7%.
100md
Peningkatan waktu pemuatan halaman
0,7%
Peningkatan pendapatan per sesi
Dukungan perusahaan tidak selalu menghasilkan performa
Meskipun dukungan performa yang kuat di dalam perusahaan, jika performa tidak ditetapkan sebagai kriteria pengiriman produk, performa tersebut dapat dengan mudah terlewatkan. Saat mendesain ulang situs Zalando pada tahun 2020, kami berfokus untuk menghadirkan fitur baru sekaligus mempertahankan pengalaman pengguna yang sangat baik dan menerapkan perubahan tampilan 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 Waktu untuk Interaktif yang kami ukur dilaporkan 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. Selain mendukung rilis baru, kami juga melakukan transisi pada 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 siklus masukan sekitar satu hari bagi developer yang mengerjakan peningkatan performa.
Web Vitals dan Lighthouse sebagai solusi
Kami tidak sepenuhnya puas dengan metrik internal karena tidak beradaptasi dengan baik dengan konfigurasi baru kami. Yang lebih penting, mereka tidak berfokus pada pengalaman pelanggan. Kami beralih ke Data Web Inti karena menyediakan serangkaian metrik yang ringkas, tetapi komprehensif dan berfokus pada pengguna.
Untuk meningkatkan performa sebelum rilis, kami perlu membuat lingkungan lab yang tepat. Hal ini memberikan pengukuran yang dapat direproduksi, selain kondisi pengujian yang mewakili persentil ke-90 data lapangan kami. Sekarang, engineer yang mengerjakan peningkatan performa tahu tempat untuk memfokuskan upaya mereka guna memberikan dampak terbesar. Kami sudah menggunakan laporan audit Lighthouse secara lokal. Jadi, iterasi pertama kami adalah mengembangkan layanan berdasarkan modul node Lighthouse, tempat perubahan dapat diuji dari lingkungan staging kami. Hal ini memberi kami siklus masukan performa yang andal selama sekitar satu jam, yang memungkinkan kami meningkatkan performa dan menyelamatkan rilis kami.
Memberikan masukan performa kepada developer terkait permintaan pull
Kami tidak ingin berhenti di situ saja, karena kami ingin memanfaatkan peluang ini untuk tidak hanya bereaksi terhadap performa, tetapi juga proaktif. Beralih 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 yang ada. Aplikasi server LHCI kami dibuat sebagai image Docker, yang kemudian di-deploy ke cluster Kubernetes bersama dengan database PostgreSQL, dan melaporkan ke GitHub kami.
Framework kami sudah memberikan beberapa masukan performa kepada developer— ukuran paket komponen dibandingkan dengan nilai 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 perluasan konfigurasi run. Tim fitur yang mengerjakan halaman tertentu di situs kami dapat menyiapkan pola URL dan pernyataan yang cocok. Dengan adanya hal ini, kami cukup yakin bahwa cakupan performa kami akan meningkat.
Sekarang kami jauh lebih yakin saat mem-build rilis yang lebih besar, dan developer dapat menikmati loop masukan yang jauh lebih singkat tentang performa kode mereka.