Menemukan korelasi antara performa situs dan metrik bisnis adalah kunci untuk mendorong keberhasilan upaya pengoptimalan mereka.
Swappie adalah perusahaan {i>start-up<i} yang sukses dan menjual ponsel refurbished. Selama beberapa tahun, mereka memprioritaskan penambahan fitur baru daripada performa situs. Namun, saat mereka melihat bahwa hasil bisnis pada situs seluler tertinggal di belakang versi desktop, terjadi pergeseran. Mereka berfokus pada pengoptimalan performa dan segera meningkat dalam pendapatan seluler.
42%
Peningkatan pendapatan yang berasal dari pengunjung seluler
10pp*
*poin persentase peningkatan Rel mCvR
Menyoroti peluang
Rasio Konversi Seluler Relatif (Rel mCvR) dihitung dengan membagi Rasio Konversi Seluler dengan Rasio Konversi Desktop. Ada banyak peluang untuk melacak metrik kecepatan, tetapi menghubungkannya ke metrik bisnis bisa sangat sulit. Karena kampanye dan musiman yang sama menjangkau seluler dan desktop, metrik Rel mCvR menghapus pengaruh parameter eksternal ini, dan hanya menunjukkan apakah situs seluler meningkat atau tidak.
Rata-rata sepuluh situs e-commerce terbesar di Amerika Serikat adalah Rel mCvR sebesar 50%, tetapi Swappie berada di 24%. Hal ini menunjukkan bahwa situs seluler memiliki tantangan dan bahwa perusahaan kehilangan pendapatan, yang menyebabkan peluncuran proyek peningkatan kinerja.
Mengukur dampak peningkatan performa
Swappie menggunakan Google Analytics untuk menyiapkan pelacakan harian Rel mCvR dan Waktu Muat Halaman Rata-Rata Seluler menggunakan spreadsheet template ini. (Baca petunjuk cara menggunakan spreadsheet.) Mereka juga mulai melacak Data Web Inti melalui Google Analytics dan BigQuery. Dengan adanya pelacakan, developer mulai meningkatkan performa situs.
Hanya setelah tiga bulan bekerja, dampaknya jelas–Rel mCvR naik dari 24% menjadi 34% dan pendapatan seluler meningkat 42%.
23%
Waktu muat halaman rata-rata yang lebih rendah
55%
LCP lebih rendah
91%
CLS lebih rendah
90%
FID Bawah
Pengoptimalan
Mengoptimalkan LCP dan CLS
Tim pengembangan Swappie menemukan bahwa ada banyak ruang untuk memperbaiki hal-hal kecil yang terabaikan sejak lama. Mempelajari situs di area pandang yang berbeda, dan dalam bahasa yang berbeda, menyoroti masalah terkait LCP dan CLS yang mudah diselesaikan serta berdampak besar pada performa secara keseluruhan. Misalnya, merender elemen LCP di server, bukan di klien, jika memungkinkan, LCP berkurang.
Mendeteksi pergeseran tata letak sangatlah sulit, karena mungkin sangat bervariasi berdasarkan area pandang dan koneksi. Setelah mendapatkan Data Web Inti dari pengguna ke analisis mereka, mereka yakin bahwa mereka berada di jalur yang benar karena CLS menurun.
Gambar
Gambar dioptimalkan dengan pramuat, pemuatan lambat, dan ukuran yang tepat. Gambar tersebut memuat gambar utama di awal (misalnya LCP), saat memuat gambar di luar area pandang hanya jika diperlukan.
Font
Swappie mengoptimalkan font dengan beralih penyedia. Hal ini berdampak besar karena mereka membutuhkan cara optimal untuk menangani tipografi yang dibutuhkan oleh berbagai bahasa.
Skrip pihak ketiga
Swappie berusaha keras untuk meninjau setiap skrip dan widget pihak ketiga, penggunaannya, dan fungsi yang disediakannya. Setelah berdiskusi dengan semua pemangku kepentingan, mereka membuat rencana untuk mengurangi dampak skrip pada situs, sekaligus mempertahankan fungsi. Mereka menghapus hal yang tidak diperlukan dan mengoptimalkan sisanya, sehingga secara signifikan mengurangi jumlah JavaScript pihak ketiga di situs.
Menghapus kode yang tidak digunakan dan mengoptimalkan pemaketan
Mengoptimalkan impor dan menghapus JS dan CSS yang tidak digunakan berkontribusi sedikit pada performa situs Swappie, tetapi peningkatan kecil tersebut bertambah seiring waktu. Mereka juga mengoptimalkan konfigurasi pemaketannya.
Menciptakan budaya pertunjukan di Swappie
Hasil yang dicapai Swappie tidak hanya berasal dari perubahan kode, tetapi juga perubahan pada organisasi dan prioritasnya.
Pimpinan bagian teknik, Teemu Huovinen, menjelaskan:
Anda perlu menghubungkan kecepatan situs ke metrik bisnis untuk benar-benar menyoroti pentingnya hal tersebut. Semua bergantung pada prioritas jika Anda kekurangan waktu dan sumber daya, dan itu yang selalu terjadi. Memprioritaskan nilai pelanggan adalah cara yang tepat, tetapi fokus pada fitur baru dan peningkatan konversi langsung lainnya menjadi lebih mudah jika Anda menganggap kecepatan situs hanya meningkatkan "nuansa" situs. Menautkan kecepatan situs ke metrik bisnis tidak selalu mudah, dan di situlah penghitungan dengan Rel mCvR sangat membantu kami.
Teemu Huovinen
Setelah tim developer diberi kesempatan untuk berfokus sepenuhnya pada kecepatan situs selama seperempat, mereka lebih termotivasi untuk mempelajari lebih dalam.
Berkat penggabungan dampak dan pertumbuhan tim kami, strategi ini menjadi makin mengesankan. Empat dari tujuh developer kami telah memulai dalam satu bulan ketika kami mulai meningkatkan performa. Semua kredit untuk tim ini sungguh menakjubkan, karena kami dapat berkumpul terkait topik tersebut dan memiliki dampak yang luar biasa.
Teemu Huovinen
Teemu juga menunjukkan pentingnya meluangkan waktu di awal untuk membuat rencana berdasarkan data, mempelajari cara menggunakan tab DevTools Performance, dan menyiapkan analisis pengguna sebelum melakukan peningkatan apa pun. Grafik (terutama grafik yang berjalan ke arah yang benar) merupakan sumber masukan dan validasi yang bagus untuk pekerjaan Anda. Melihat Data Web Inti di lapangan bersama skor Lighthouse (berbasis lab) membantu mereka berfokus untuk mengoptimalkan hal yang tepat yang akan memengaruhi sebagian besar orang.