buecher.de'nin BT departmanı önemli AdWords açılış sayfalarında yapacağı değişiklikler için Google PageSpeed Insights'ı temel aldı. Bu önlemleri uygulamak, mobil açılış sayfalarının yüklenme sürelerini yaklaşık 2 saniye kısalttı (-%35, Google Analytics) ve sayfaların görünür kısımlarının ekrana daha çabuk gelmesini sağladı. (Webpagetest.org Hız Endeksi 2,5 saniye 1). PageSpeed Endeksi puanlarının 63'ten 93'e çıkması da bu değişiklikleri yansıtıyordu. buecher.de, orta ve uzun vadede bu iyileştirmelerin sipariş başına maliyet, dönüşüm oranı ve hemen çıkma oranını olumlu yönde etkileyeceğine inanıyor.

buecher.de Haziran 1999'da booxtra adıyla ortak girişim olarak kuruldu ve Kasım 2001'den bu yana faaliyetlerini buecher.de adı altında yürütüyor. E-ticaret şirketi, Almanya sınırları içinde minimum sipariş tutarı zorunluluğu olmaksızın ücretsiz gönderim sağlıyor. buecher.de'nin Arama Motoru Pazarlamacılığı Yöneticisi Ruslan Pakentryger, "buecher.de, yalnızca internette faaliyet gösteren bir şirket olarak ürün çeşitliliği, en yeni ürünleri sunması ve hızı sayesinde satışlarını artırıyor. %95 oranındaki müşteri memnuniyetine bu sayede ulaştık," açıklamasını yapıyor.

buecher.de rekabetin oldukça yoğun olduğu bir pazarda faaliyet gösteriyor. Rakiplerin sayısı fazla, ancak Almanya'daki Sabit Kitap Fiyatı Yasaları nedeniyle yayıncılık sektöründeki rekabet fiyata dayanmıyor. Çoğu müşteri siteye artık mobil cihazlarıyla erişip alışveriş yaptığı için, site optimizasyonları uzun zamandır tartışılan bir konu haline geldi. Uzun vadede başarılı olmak için güçlü performansa sahip bir mobil sayfanın yanı sıra, buna uygun AdWords bütçeleri ve kampanyaları kaçınılmaz olarak görülüyor. buecher.de'de Kıdemli Ön Uç Geliştirici olan Martin Wagner, "En son büyük optimizasyon, Haziran 2015'teki duyarlı mağaza lansmanımız kapsamında uygulanmıştı" diyor ve şöyle devam ediyor: "Sonrasında, ana sayfamızın PageSpeed Endeksi puanı 100 üzerinden 91'e ulaştı. Sonraki aylarda, bu puan aralıklarla kontrol edildi. Özellikle mobil ve masaüstü arasında ayrıma gidildikten sonra fark edilir şekilde düştü."

Optimizasyon öncesini gösteren resim2:

Optimizasyon sonrasını gösteren resim:


Mayıs 2016'da, şirket bu düşük puanın ana nedenini saptadı. Ancak sorunu ortadan kaldıracak basit bir teknik çözüm bulamadı. CSS ve JavaScript dosyaları sayfa oluşturulmasını engelleyerek içeriğin ekranlarda gösterilmesini geciktiriyordu. Bu CSS ve JavaScript dosyalarının sayfanın sonuna kadar yüklenmemesini sağlamak için, ekranın üst kısmındaki alana yönelik önemli CSS kurallarını ve JavaScript kodunu "satır içi" olarak eklemenin bir yolunu bulmaları gerekiyordu. Kısa yüklenme süreleri ve sorunsuz çalışan sayfalar performans pazarlamacılığının başarısıyla yakından ilgili olduğu için, Şubat 2017'de bu konu tekrar ele alındı ve BT bununla ilgili çalışmalarını kararlılıkla sürdürdü.

Her geçen gün, mobil satın almaların sayısının geçen yıllara kıyasla belirgin ölçüde arttığını görüyoruz. Mobil sipariş başına maliyet, sağlıklı bir kar marjına ulaşabilmemiz için büyük önem taşıyor. Kullanıcıların sayfayı daha çabuk görmesini, sayfada daha uzun süre kalmasını ve ayrıca mobil dönüşüm gerçekleştirmesini sağladığı için kısaltılan sayfa yüklenme sürelerinin bu maliyeti düşürmesini bekliyoruz.

Ruslan Pakentryger, Arama Motoru Pazarlamacılığı Yöneticisi, buecher.de.

Ekip, performansa ilişkin bir dizi en iyi uygulamanın kontrolüne dayanan Google'ın PageSpeed Insights'ını kullanmaya başladı. Bu kontrollerde, bir defa mobil kullanıcı aracısı ve bir defa da masaüstü kullanıcı aracısıyla olmak üzere URL'ye iki defa ulaşılarak bir sayfanın mobil cihazlarda ve masaüstü bilgisayarlarda gösterdiği performans ölçülür. PageSpeed puanı 0 ilâ 100 arasında olabilir. 85 puan yüksek performans göstergesidir. PageSpeed Insights, görünür içeriğin kaydırma yapmadan yüklenmesi için gereken süre ve sayfanın tam olarak yüklenmesi için gereken süreye göre performansı artırma olasılığını ölçer.3

En son optimizasyondan önce web sitesinin puanı 100 üzerinden 63'tü. Bunun ardından, buecher.de mağazanın tam kapsamlı bir analizini yaptı. Ana sayfa, ürün sayfaları ve kategori sayfaları gibi her tür sayfa, olası en iyi çözümü bulmak amacıyla ayrı ayrı test edildi."Mobil optimizasyonu pahalıydı ancak yapılması mümkündü”, diyen Martin şöyle devam ediyor: "Kritik CSS'ye ilişkin teknik çözüm en etkili sonuçları getirdi. Analizi yürütmekten, önlemlerin tümünü uygulamaya kadar geçen süre yaklaşık bir aydı.” Bu değişiklikler sayesinde, özellikle banner'lardakiler olmak üzere resim gösteriminde daha iyi performans alabildik. Artık resimler otomatik olarak yeniden boyutlandırılıyor ve banner yönetimi sistemine yüklenirken dosya boyutu optimize ediliyor.

Bizim için, daha iyi sayfa yüklenme sürelerinin anahtarı, sayfa oluşturulmasını olumsuz etkileyen, ayrıca sayfanın görünür kısmının görüntülenmesini engelleyen CSS ve JavaScript dosyalarının optimize edilmesiydi.

Martin Wagner, Kıdemli Ön Uç Geliştirici, buecher.de

Diğer bir adım, web yazı tiplerinin ve JavaScript'in eşzamansız ve mümkün olduğunca tutarlı yüklenmesini sağlamaktı. Pikselleri ve widget'ları buecher.de sayfasına entegre edilmiş harici üçüncü taraf sağlayıcıların bazı widget'ları iyi optimize edilmediği için bu alanda da sorunla karşılaştık. Örneğin, bazı widget'lar eşzamanlı olarak jQuery'yi bekliyordu. Ancak yıllardır buecher.de'de eşzamansız olarak başlatılmaktaydılar ve bu da uygulama maliyetlerini artırıyordu.

Tarayıcı önbelleğinin çalıştırma zamanı da resimler ve komut dosyaları için değiştirildi. Resimlerin dinamik şekilde yüklenmesi ayrı ayrı sayfalarda ek iyileştirmeler sağladı. Artık resimler yalnızca kullanıcıya görünür olan alana girdiklerinde görüntüleniyor. Son olarak, belge nesne modelindeki (DOM) öğelere öncelik tanındı. Örneğin, kayarak çıkan menü artık yalnızca gerektiğinde yükleniyor.

"Bu optimizasyonun ardındaki pazarlama hedefi elbette dönüşüm oranını artırmaktı,"diyen Ruslan devam ediyor: "Daha iyi yükleme süreleri daha iyi bir kullanıcı deneyimi sağladığından, özellikle mobilde olmak üzere, AdWords çalışmalarımızı, verimimizi ve gelir hedeflerimizi doğrudan destekliyor.” Sayısız araştırma, yüklenme süresi ile dönüşüm oranı arasında sıkı bir bağ olduğunu gösteriyor. Saniyenin onda biri kadar bir süre bile mobil cihazlarda dönüşüm oranlarını %7 kadar düşürebiliyor. Yüklenme süresinin hemen çıkma oranlarını etkilediği de saptanmıştır. Bir veya iki saniyelik bir fark, mobil cihazlarda hemen çıkma oranını %103 kadar yükseltiyor.4

Google PageSpeed Insights temel alınarak gerçekleştirilen bu optimizasyon sonucunda, buecher.de kendisine ve rakiplerine ait sayfaların mobil yüklenme sürelerini sürekli izlemeye başladı. buecher.de üzerinde tüm sayfa türlerini içeren 15 sayfa izleniyor. Ve bu sayfaların hepsi artık en az 92'lik bir Mobil PageSpeed Insights puanına ulaşıyor. Mobil ana sayfa artık belirgin ölçüde daha hızlı yükleniyor. Yükleme 5,3 saniye yerine yaklaşık 3,5 saniye alıyor. Martin ve Ruslan, "Bu önlemleri başarıyla uyguladığımızdan bu yana, postayla sipariş ulaştıran ilk beş medya satıcısı arasında en yüksek mobil puana sahip olduğumuzu görmek bizi mutlu ediyor," diyor.

Çalışma alanları arasında iş birliği yapmanın kolay olmasından ikisi de memnun. Ruslan, "Açık kapı politikası uyguluyoruz," diyor. Martin şunları ekliyor: "Ve projeyi BT bünyesinde tamamladığımız için, optimizasyon süreci boyunca daha az iletişim ihtiyacı duyduk. Yapılarımız, departmanlar arasında da doğrudan iletişime sahip olmamızı sağladı." Uygulanan önlemlerden birçoğu mağaza geliştirme sürecine kalıcı olarak entegre edildi ve bu önlemler, yüklenme hızının uzun dönemde mükemmel düzeyde kalmasını sağlıyor.

Ekibin geleceğe yönelik büyük iddiaları var. Martin, "Şu anki puanı korumaya ve mümkünse sürekli yükseltmeye çalışıyoruz,” diyor ve ekliyor: "Kısa süre önce, Google PageSpeed Race 2017 kaynaklarını bu projeye tekrar bağladık ve şimdiden daha da fazla gelişme sağlandığını gördük. İddialı hedefimiz 100 üzerinden ortalama 95 puana ulaşmak."

Kaynaklar