Site performansı ile işletme metrikleri arasında korelasyon bulmak, optimizasyon çalışmalarının başarılı olmasını sağlayan temel unsurdu.
Swappie, yenilenmiş telefonlar satan başarılı bir girişimdir. Birkaç yıl boyunca site performansı yerine yeni özellikler eklemeye öncelik verdiler. Ancak mobil sitedeki işletme sonuçlarının masaüstü sürümünün gerisinde kaldığını fark ettiklerinde bir değişiklik yaptılar. Performansı optimize etmeye odaklandılar ve kısa süre içinde mobil gelirde artış elde ettiler.
42%
Mobil ziyaretçilerden elde edilen gelirde artış
10pp*
*yüzdelik puan göreceli mobil DO artışı
Fırsatı öne çıkarma
Göreli Mobil Dönüşüm Oranı (göreli 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 birçok fırsat vardır ancak bunları işletme metriklerine bağlamak oldukça zor olabilir. Aynı kampanyalar ve mevsimsellik hem mobil hem de masaüstüne ulaştığından, göreli mobil DO metriği bu harici parametrelerin etkisini ortadan kaldırır ve yalnızca mobil sitenin iyileşip iyileşmediğini gösterir.
ABD'deki en büyük on e-ticaret sitesinin ortalama göreli mobil DO'su%50 iken Swappie'nin değeri %24'tü. Bu, mobil sitede zorluklar olduğunu ve şirketin gelir elde edemediğini gösteriyordu. Bu nedenle, performans iyileştirme projesi başlatıldı.
Performans iyileştirmelerinin etkisini ölçme
Swappie, bu şablon e-tablosunu kullanarak Rel mCvR ve Mobil Ortalama Sayfa Yükleme Süresinin günlük takibini ayarlamak için Google Analytics'i kullandı. (E-tablonun nasıl kullanılacağına dair talimatları okuyun.) Ayrıca Core Web Vitals'ı Google Analytics ve BigQuery aracılığıyla izlemeye başladılar. İzleme uygulandıktan sonra geliştiriciler site performansı üzerinde çalışmaya başladı.
Yalnızca üç aylık çalışmanın ardından etki net bir şekilde görüldü: Göreli mobil DO% 24'ten% 34'e yükseldi ve mobil gelir %42 arttı.
23%
Daha düşük ortalama sayfa yüklenme süresi
%55
Daha düşük LCP
%91
Daha düşük CLS
%90
Düşük FID
Optimizasyonlar
LCP ve CLS için optimizasyon
Swappie'nin geliştirme ekibi, uzun süredir göz ardı edilen küçük şeylerde iyileştirme yapılabileceğini fark etti. Siteyi farklı ekran boyutlarında ve farklı dillerde inceleyerek LCP ve CLS ile ilgili, çözülmesi kolay ve genel performans üzerinde büyük etkisi olan sorunları tespit ettik. Örneğin, mümkün olduğunda LCP öğesini istemci yerine sunucuda oluşturmak LCP'nin düşmesine neden oldu.
Görünüm alanına ve bağlantıya göre çok fazla değişiklik gösterebildikleri için düzen kaymalarını tespit etmek zordu. Önemli Web Verileri'ni kullanıcılardan analizlerine aktardıktan sonra CLS'nin düştüğünü gördüler ve doğru yolda olduklarını anladılar.
Resimler
Resimler ön yükleme, geç yükleme ve doğru boyutlandırma ile optimize edildi. Önemli resimleri (ör. LCP) önceden yüklerken görüntü alanının dışındaki resimleri yalnızca gerektiğinde yükler.
Yazı Tipleri
Swappie, sağlayıcı değiştirerek yazı tiplerini optimize etti. Farklı dillerin gerektirdiği yazı tiplerini işlemek için optimum bir yönteme ihtiyaç duydukları için bu durum büyük bir etki yarattı.
Üçüncü taraf komut dosyaları
Swappie, her üçüncü taraf komut dosyasını ve widget'ını, kullanıldığı yeri ve sağladığı işlevleri incelemek için çok çaba gösterdi. Tüm paydaşlarla yapılan görüşmelerin ardından, işlevleri korurken komut dosyalarının site üzerindeki etkisini azaltma planları yaptılar. Gereksiz olanları kaldırıp geri kalanı optimize ederek sitedeki üçüncü taraf JavaScript miktarını önemli ölçüde azalttılar.
Kullanılmayan kodları kaldırma ve paketlemeyi optimize etme
İçe aktarma işlemlerini optimize etmek ve kullanılmayan JS ile CSS'yi kaldırmak Swappie'nin site performansında küçük iyileştirmelere yol açtı. Ancak bu küçük iyileştirmeler zaman içinde önemli bir fark yarattı. Ayrıca paket oluşturma kurulumlarını 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 kaynaklanıyor.
Mühendislik yöneticisi Teemu Huovinen konuyla ilgili şunları söylüyor:
Site hızının önemini gerçekten vurgulamak için site hızını işletme metriklerine bağlamanız gerekir. Zamanınız ve kaynaklarınız kısıtlı olduğunda (ki bu her zaman böyledir) önceliklendirme yapmanız gerekir. Müşteri değerine öncelik vermek doğru bir yaklaşımdır ancak site hızını yalnızca sitenin "hissini" iyileştirmek olarak görürseniz yeni özelliklere ve daha doğrudan dönüşüm iyileştirmelerine odaklanmak çok kolaydır. Site hızını işletme metriklerinizle ilişkilendirmek her zaman kolay değildir. Bu noktada Rel mCvR ile hesaplama bize çok yardımcı oldu.
Teemu Huovinen
Geliştirici ekibine bir çeyrek boyunca tamamen site hızına odaklanma fırsatı verildiğinde daha ayrıntılı inceleme yapmak için daha fazla motive oldular.
Etkimizi ekibimizin büyümesiyle bir araya getirmek, bu durumu daha da etkileyici kılıyor. Yedi geliştiricimizden dördü, performans üzerinde çalışmaya başladığımız ay işe başladı. Tüm övgü ekibimize gitsin. Konuyu ele alıp bu kadar büyük bir etki yaratabilmemiz gerçekten inanılmaz.
Teemu Huovinen
Teemu, başlangıçta veri odaklı planlar yapmak, DevTools Performans sekmesini nasıl kullanacağınızı öğrenmek ve iyileştirme yapmadan önce kullanıcı analizlerini ayarlamak için zaman ayırmanın önemine de dikkat çekiyor. Grafikler (özellikle doğru yönde ilerleyenler), çalışmalarınız için mükemmel bir geri bildirim ve doğrulama kaynağıdır. Lighthouse (laboratuvar tabanlı) puanlarının yanı sıra sahadaki Core Web Vitals'a bakmak, en çok kullanıcıyı etkileyecek doğru öğeleri optimize etmeye odaklanmalarını sağladı.