Site performansı ile işletme metrikleri arasında bağlantı bulunması, optimizasyon çalışmalarının başarısının anahtarıydı.
Swappie, yenilenmiş telefonlar satan başarılı bir şirkettir. Birkaç yıl boyunca, site performansı yerine yeni özellikler eklemeye öncelik verdiler. Ancak mobil sitedeki ticari sonuçların masaüstü sürümün gerisinde kaldığını fark ettiklerinde bir değişim yaşandı. Performansı optimize etmeye odaklandılar ve kısa süre sonra mobil gelirde bir artış gördüler.
%42
Mobil ziyaretçilerden gelen gelirdeki artış
pp*
*yüzde puanı Rel mobil DO artışı
Fırsatı öne çıkarma
Göreli Mobil Dönüşüm Oranı (Rel mobil DO), Mobil Dönüşüm Oranı'nın Masaüstü Dönüşüm Oranı'na bölünmesiyle hesaplanır. Hız metriklerini izlemek için pek çok fırsat vardır, ancak bunları işletme metrikleriyle ilişkilendirmek oldukça zor olabilir. Aynı kampanyalar ve sezonluk farklılıklar hem mobil hem de masaüstü cihazlara ulaştığından, Rel mobil DO metriği bu harici parametrelerin etkisini ortadan kaldırır ve yalnızca mobil sitenin iyileşmekte olup olmadığını gösterir.
ABD'deki en büyük on e-ticaret sitesinin ortalaması%50 Rel mobil DO'dur, ancak Swappie %24'tür. Bu, mobil sitede zorlukların bulunduğunu ve şirketin gelir kaybına uğradığını gösterdi. Bu da performans iyileştirme projesinin başlatılmasıyla sonuçlandı.
Performans iyileştirmelerinin etkisini ölçme
Swappie, bu şablon e-tabloyu kullanarak Rel mobil DO ve Mobil Ortalama Sayfa Yükleme Süresi'nin günlük izlemesini ayarlamak için Google Analytics'i kullandı. (E-tablonun nasıl kullanılacağıyla ilgili talimatları okuyun.) Ayrıca Google Analytics ve BigQuery aracılığıyla Önemli Web Verilerini izlemeye başladılar. Geliştiriciler, izleme işlevini uygulamaya geçirdikten sonra site performansı üzerinde çalışmaya başladı.
Yalnızca üç aylık bir çalışmadan sonra, etki net bir şekilde görüldü. Reel mobil DO% 24'ten% 34'e yükseldi ve mobil gelir %42 yükseldi.
%23
Daha düşük ortalama sayfa yüklenme süresi
%55
Daha düşük LCP
%91
Daha düşük CLS
%90
Alt FID
Optimizasyonlar
LCP ve CLS için optimizasyon
Swappie'nin geliştirme ekibi, uzun zamandır göz ardı edilen küçük şeylerin iyileştirilmesi gereken birçok alan olduğunu belirledi. Siteyi farklı görüntü alanlarında ve farklı dillerde araştırdılar, LCP ve CLS ile ilgili çözülmesi kolay olan ve genel performans üzerinde büyük etkisi olan sorunları vurguladılar. Örneğin, mümkün olduğunda LCP öğesinin istemci yerine sunucuda oluşturulması LCP'nin azalmasına neden olmuştur.
Düzen kaymalarının algılanması zordu, çünkü görüntü alanına ve bağlantıya göre büyük farklılıklar gösterebilir. Kullanıcılardan Önemli Web Verileri'ni analizlerine aktardıktan sonra CLS azaldığı için doğru yolda olduklarını anladılar.
Resimler
Resimler önceden yükleme, geç yükleme ve uygun boyutlandırma ile optimize edildi. Büyük resimleri (ör. LCP) önceden yüklerken resimleri yalnızca gerektiğinde görüntü alanının dışına yüklerler.
Yazı Tipleri
Sağlayıcı değiştirerek optimize edilmiş yazı tiplerini değiştirin. Bu durum, farklı dillerin gerektirdiği yazı tiplerinin işlenmesi için optimum bir yönteme ihtiyaç duyduğundan büyük bir etki yarattı.
Üçüncü taraf komut dosyaları
Swappie, her bir üçüncü taraf komut dosyası ve widget'ı, nerede kullanıldıklarını ve sağladığı işlevleri incelemek için çok çaba harcadı. Tüm paydaşlarla görüşmelerden sonra, işlevleri korurken komut dosyalarının site üzerindeki etkisini azaltmak için planlar yaptılar. Gereksiz olanları kaldırıp gerisini optimize ederek sitedeki üçüncü taraf JavaScript miktarını önemli ölçüde azalttılar.
Kullanılmayan kodları kaldırma ve gruplandırmayı optimize etme
İçe aktarma işlemlerinin optimize edilmesi ve kullanılmayan JS ve CSS'nin kaldırılması, Swappie'nin site performansına küçük iyileştirmeler sağladı, ancak bu küçük iyileştirmeler zamanla artar. Gruplandırma kurulumunu da optimize ettiler.
Swappie'de performans kültürü oluşturma
Swappie'nin elde ettiği sonuç yalnızca koddaki değişikliklerden değil, kuruluştaki ve önceliklerindeki değişikliklerden de kaynaklanmaktadır.
Mühendislik lideri Teemu Huovinen şu açıklamayı yapıyor:
Bunun önemini gerçekten vurgulamak için site hızını işletme metrikleriyle ilişkilendirmeniz gerekir. Vaktiniz ve kaynaklarınızın kısıtlı olduğu durumlarda işleri önceliklendirebilirsiniz. Bu her zaman için geçerlidir. En iyi yol müşteri değerine öncelik vermektir. Ancak site hızının yalnızca sitenin "hissini" iyileştirdiğini görürseniz, yeni özelliklere ve daha doğrudan dönüşüm iyileştirmelerine odaklanmak çok kolaydır. Site hızını işletme metriklerine bağlamak her zaman kolay değildir. Rel mobil DO ile hesaplama, işte bu noktada bize çok yardımcı oldu.
Teemu Huovinen
Geliştirici ekibine bir çeyrek boyunca tamamen site hızına odaklanma fırsatı verildikten sonra, ekip üyeleri daha ayrıntılı bilgi edinmek için daha istekli oldu.
Yaptığımız etki ile ekibimizin büyümesini bir araya getirmek, performansı daha da etkileyici kılıyor. Yedi geliştiricimizden dördü, performansla ilgili çalışmaya başladığımız ay içinde işe başladı. Ekibimize teşekkür ederiz. Konuyu toparlayıp böylesine büyük bir etkiye sahip olabilmemiz gerçekten inanılmaz.
Teemu Huovinen
Teemu ayrıca veriler ışığında planlar yapmak için başlangıçta zaman ayırmanın, Geliştirici Araçları Performans sekmesinin nasıl kullanılacağını öğrenmenin ve herhangi bir iyileştirme yapmadan önce kullanıcı analizlerini hazırlamanın önemine dikkat çekiyor. Grafikler (özellikle doğru yönde gidenler), çalışmanız için harika bir geri bildirim ve doğrulama kaynağıdır. Sahada Lighthouse (laboratuvar tabanlı) puanlarıyla birlikte Core Web Vitals'ı incelemek, en fazla insanı etkileyecek doğru şeyleri optimize etmeye odaklanmalarına yardımcı oldu.