Menemukan korelasi antara performa situs dan metrik bisnis adalah kunci untuk mendorong keberhasilan upaya pengoptimalan mereka.
Swappie adalah perusahaan rintisan yang sukses dan menjual ponsel refurbished. Selama beberapa tahun, mereka memprioritaskan penambahan fitur baru daripada performa situs. Namun, saat mereka menyadari bahwa hasil bisnis di situs seluler tertinggal dari versi desktop, terjadilah perubahan. Mereka berfokus untuk mengoptimalkan performa dan segera melihat peningkatan pendapatan seluler.
42%
Peningkatan pendapatan yang berasal dari pengunjung seluler
10pp*
*peningkatan Rel mCvR poin persentase
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 jadi cukup rumit. Karena kampanye dan musim yang sama menjangkau perangkat seluler dan desktop, metrik Rel mCvR menghapus pengaruh parameter eksternal ini, dan hanya menunjukkan apakah situs seluler meningkat atau tidak.
Rata-rata untuk sepuluh situs e-commerce terbesar di Amerika Serikat adalah mCvR Rel sebesar 50%, tetapi Swappie mencapai 24%. Hal ini menunjukkan bahwa situs seluler memiliki tantangan dan perusahaan kehilangan pendapatan, yang menyebabkan peluncuran project peningkatan performa.
Mengukur dampak peningkatan performa
Swappie menggunakan Google Analytics untuk menyiapkan pelacakan harian Rel mCvR dan Waktu Muat Halaman Ponsel Rata-Rata, menggunakan spreadsheet template ini. (Baca petunjuk cara menggunakan spreadsheet.) Mereka juga mulai melacak Data Web Inti melalui Google Analytics dan BigQuery. Dengan pelacakan yang diterapkan, developer mulai mengerjakan performa situs.
Setelah hanya tiga bulan bekerja, dampaknya terlihat jelas–Rel mCvR meningkat dari 24% menjadi 34% dan pendapatan seluler meningkat 42%.
23%
Waktu muat halaman rata-rata lebih rendah
55%
LCP yang lebih rendah
91%
CLS yang lebih rendah
90%
FID yang lebih rendah
Pengoptimalan
Mengoptimalkan LCP dan CLS
Tim pengembangan Swappie menemukan bahwa ada banyak hal yang perlu ditingkatkan dari hal-hal kecil yang diabaikan selama waktu yang lama. Dengan mempelajari situs di area pandang yang berbeda, dan dalam bahasa yang berbeda, masalah LCP dan CLS yang mudah dipecahkan dan berdampak besar pada performa secara keseluruhan dapat diidentifikasi. Misalnya, merender elemen LCP di server, bukan klien, jika memungkinkan, akan menyebabkan penurunan LCP.
Mendeteksi pergeseran tata letak merupakan tantangan, karena pergeseran tersebut mungkin sangat bervariasi berdasarkan area tampilan dan koneksi. Setelah mendapatkan Data Web Inti dari pengguna ke analisis, mereka tahu bahwa mereka berada di jalur yang benar karena CLS telah menurun.
Gambar
Gambar dioptimalkan dengan pramuat, pemuatan lambat, dan ukuran yang tepat. Gambar tersebut memuat gambar utama (misalnya LCP) secara pramuat, sambil memuat gambar di luar area pandang hanya jika diperlukan.
Font
Swappie mengoptimalkan font dengan beralih penyedia. Hal ini memberikan dampak besar karena mereka memerlukan cara yang optimal untuk menangani typeface yang diperlukan oleh berbagai bahasa.
Skrip pihak ketiga
Swappie melakukan banyak upaya untuk meninjau setiap skrip dan widget pihak ketiga, tempat skrip dan widget tersebut digunakan, serta fungsi yang disediakannya. Setelah berdiskusi dengan semua pemangku kepentingan, mereka membuat rencana untuk mengurangi dampak skrip terhadap situs, sekaligus mempertahankan fungsinya. Mereka menghapus hal-hal yang tidak perlu dan mengoptimalkan sisanya, sehingga secara signifikan mengurangi jumlah JavaScript pihak ketiga di situs.
Menghapus kode yang tidak digunakan dan mengoptimalkan pengelompokan
Mengoptimalkan impor dan menghapus JS dan CSS yang tidak digunakan berkontribusi pada peningkatan kecil pada performa situs Swappie, tetapi peningkatan kecil tersebut akan bertambah seiring waktu. Mereka juga mengoptimalkan penyiapan pengelompokan.
Menciptakan budaya performa di Swappie
Hasil yang dicapai Swappie tidak hanya berasal dari perubahan kode, tetapi juga perubahan dalam organisasi dan prioritasnya.
Pemimpin engineering, Teemu Huovinen, menjelaskan:
Anda perlu menautkan kecepatan situs ke metrik bisnis untuk benar-benar menyoroti pentingnya kecepatan situs. Semuanya bergantung pada prioritas saat Anda kekurangan waktu dan resource, yang selalu terjadi. Memprioritaskan nilai pelanggan adalah cara yang tepat, tetapi sangat mudah untuk berfokus pada fitur baru dan peningkatan konversi yang lebih langsung jika Anda menganggap kecepatan situs hanya meningkatkan "rasa" situs. Menautkan kecepatan situs ke metrik bisnis tidak selalu mudah, dan di sinilah penghitungan dengan Rel mCvR sangat membantu kami.
Teemu Huovinen
Setelah tim developer diberi kesempatan untuk berfokus sepenuhnya pada kecepatan situs selama satu kuartal, mereka lebih termotivasi untuk mempelajarinya lebih dalam.
Menggabungkan dampak kami dengan pertumbuhan tim kami adalah hal yang membuatnya lebih mengesankan. Empat dari tujuh developer kami telah memulai dalam sebulan sejak kami mulai mengerjakan performa. Semuanya berkat tim. Sungguh luar biasa bagaimana kami dapat berdiskusi tentang topik ini dan memberikan dampak yang begitu besar.
Teemu Huovinen
Teemu juga menunjukkan pentingnya meluangkan waktu di awal untuk membuat rencana yang didasarkan pada data, mempelajari cara menggunakan tab Performa DevTools, dan menyiapkan analisis pengguna sebelum melakukan peningkatan apa pun. Grafik (terutama grafik yang mengarah ke arah yang benar) adalah sumber masukan dan validasi yang bagus untuk pekerjaan Anda. Melihat Core Web Vitals di lapangan bersama dengan skor Lighthouse (berbasis lab) membantu mereka fokus mengoptimalkan hal yang tepat yang akan memengaruhi sebagian besar orang.