Stylight’ın mobile öncelik veren stratejisi sayfa performansını ve dönüşüm oranlarını artırıyor

Stylight, mobile öncelik verme yolculuğuna, duyarlı bir çerçeveyle mobile öncelik veren ilk ürün geliştirme yaklaşımını ortaya koyduğu 2013 yılında başladı. Yakın bir tarihte, Stylight daha kısa yükleme süreleri elde etmek için en önemli mobil açılış sayfalarını optimize etmeye odaklandı. Stylight ürün ekibi; geliştirici, ürün ve pazarlama ekiplerinin sayfa performansını Lighthouse baz alınarak artırmak için en iyi uygulama, araç ve optimizasyon tekniklerini öğrenmesi amacıyla davet edildiği, üç ay süren oyunlaştırılmış bir etkinlik olan Google PageSpeed Race'e katıldı.

Lighthouse, site kalitesinin artırılması amacıyla kullanılan açık kaynaklı, otomatik bir web sayfası denetim aracı. Aracın rapor işlevi; performans için en iyi uygulamalar, erişilebilirlik, progresif web uygulamaları ve SEO ile denetimleri bir araya getiriyor. Stylight'ın Ürün Direktörü Matthias Hoyer, "Lighthouse aracılığıyla sayfa performansını sürekli izliyorduk. Emeklerimizi ve optimizasyon stratejilerimizi sayfa performansı metrikleri üzerindeki etkiye göre öncelik sırasına koymak harikaydı,” diyor.

Her URL, standartlaştırılmış bir test ortamında bir dizi denetimle test ediliyor ve her denetimde, denetimin neden önemli olduğunu ve belirli sorunların nasıl giderildiğini açıklayan bir referans belgesi bulunuyor. Stylight özellikle, çok sayıda denetimi barındıran, en yeni en iyi uygulamaları (ör. kritik oluşturma yolu, kaynak sıkıştırma, resim optimizasyonu) kontrol eden ve ilk sayfa kurulumu, etkileşime hazır olma süresi, JavaScript başlatma süresi, hatta DOM boyutu gibi temel hız metrikleri hakkında ayrıntılı analizler sunan Performans Kategorisine odaklandı. Lighthouse, başarısız denetimleri listelemenin yanı sıra, bu sorunların giderilmesinin sağladığı hız avantajlarını tahmin ederek çabaları öncelik sırasına koymayı kolaylaştırıyor. Chrome Devtools'da komut satırında kullanılabilen Lighthouse, yakında bir API aracılığıyla da kullanılabilecek.

Stylight ekibi, yükleme süresinin dönüşüm oranları üzerindeki etkisini anladığı ve buna ek olarak organik sıralama güncellemesinde gerekli adımları atmak istediği için Lighthouse skorunda iyileştirmeler yapmayı hedefliyordu. Matthias, “Etkinlikten önceki ana odak noktamız sunucu yükleme süresini optimize etmekti. İşletmemiz, doğru ilişkilendirmeyi sağlamak adına çeşitli harici komut dosyalarına ve izleme piksellerine ihtiyaç duyuyor. Bunu göz önünde bulundurarak, tarayıcı yükleme süresinin ve tarayıcı oluşturmanın birkaç optimizasyon aracı sunduğunu düşündük. Ayrıca, iç sayfa kaynaklarımızın çoğunu optimize ettiğimizi düşündük.” diyor. Lighthouse raporları aracılığıyla performans araçlarını izlemek, Stylight’ın geliştirme çabalarını dört temel alanda yoğunlaştırmasına yardımcı oldu.

1 CSS dosyaları

Stylight, başlık dahilindeki tüm sayfa türleri için tek bir büyük dosya yüklüyordu. CSS kaynaklarını optimize etmek, önemli bir etki yaratarak ana ekran, ürün ayrıntısı ve arama sayfalarının yeniden yapılandırılmasının önünü açtı. CSS dosyaları artık satır içi düzene sahip, sınırlarını ise geçerli sayfa türü için gerekli öğeler belirliyor. (Bu makaleye göz atarak kendi sitenizde CSS sunumunu optimize etmeyi öğrenin.)

2 JavaScript dosyaları

Ekip, Stylight'ın büyük ve tek JavaScript dosyası üzerinde çalışarak JavaScript'i sayfa türüne göre küçülttü. Şimdi komut dosyaları eşzamansız olarak ve sadece gerektiğinde yükleniyor. (Bu PageSpeed Race eğiticisiyle kendi sitenizde engelleyici komut dosyaları oluşturmayı öğrenin.)

3 Resimler

Stylight, ilk görüntü alanının altındaki resimlerin geç yüklenmesini iyileştirdi. Bir eklentinin uyarlanmasıyla sadece görüntü alanında görünen resimler yükleniyor, geri kalan resimler ise kullanıcı etkileşimlerine dayalı olarak gerekli durumlarda yükleniyor. İşlevler arası ekipler Mobil Uyumluluk Testi ile kontrol ederek, geç yüklenen resimlerin Google dizini tarafından hâlâ erişilebilir olmasını da sağladı. (Resimleri optimize etme hakkında ipuçları için bu PageSpeed Race eğiticisini inceleyin.)

4 Harici komut dosyaları

Harici komut dosyalarını Google Etiket Yöneticisi'ne (GTM) dahil etmek de faydalı oldu. Açılış sayfası yüklemesi olan GTM yüklemesi tetikleyicisi, kullanıcı etkileşimleri olarak değiştirildi, böylece bazı harici komut dosyalarının yüklemesi ileri bir noktaya ertelenerek ilk görüntü alanı için gerekli olan kritik kaynakların önündeki engel kaldırıldı. Ayrıca, izleme pikselleri denetlendi ve kullanılmayanlar kaldırıldı. (Google Etiket Yöneticisi'ndeki etkinlik tetikleyiciler hakkında ipuçları için bu makaleye göz atın)