Web Performans Bütçenizi Nasıl Belirlersiniz?

Sayfa hızının yıllar geçtikçe hem SEO hem de UX için önemli bir metrik haline gelmesiyle birlikte web performans bütçesi(web performance budget) kavramı da öne çıktı. Web performans konusunun sadece bir departmanın ya da kişinin önceliği olmasının ötesinde tüm birimlerin ortak bakış açısı geliştirmesi gereken konu olduğu günümüzde daha aşikar.

Bunu bir örnekle açıklamak gerekirse; pazarlama departmanları dönüşüm ve remarketing kodlarıyla birlikte, ürün bazlı retargeting yapan Criteo, RTB House gibi araçların kodlarını platformlara yerleştirilmesini isterler. Aynı zamanda göz alıcı fotoğraflar ve animasyonlar da beklentileri içinde olabilir. Paralelde ürün departmanları Hotjar, Clarity gibi ürünlerin kodlarını talep eder. Yazılım departmanları ise gerek frontend'te gerek de backend'te kendi iş yükünün doğrultusunda olabildiğince hızlı şekilde geliştirme yaparlar. İşte buradaki talep ve taleplerin sayfa hızına maliyetleri aslında denge içindedir. Bu dengeyi çok iyi kurmak için web performans bütçesi ortaya çıkmıştır.

Web performans bütçesi platformunuzun belirli bir platformdaki hedef hızını belirleyerek bu hıza ulaşmak için tüm paydaşların uyacağı rakamsal hedefler çıkarılmasıdır. Kısacası hızlı olmanın bedeli web performans bütçesidir.

Her şey bir önermeyle başlıyor. Sayfanızın hangi tip bağlantıda ne kadar hızlı açılacağını hedef belirleyeceğini önermeyi hazırlıyorsunuz. Örnek olarak bazı performans bütçesi önermeleri vermek gerekirse;

• Anasayfa hızlı 3G mobil bağlantıda(1.6 Mbps) 2 saniyenin altında açılabilir mi?
• Arama sonuç sayfası yavaş 3G bağlantıda(780 Kbps) 5 saniyenin altında açılabilir mi?

Sonrasında önermeleri gerçekleştirmek için aksiyon planınızı ve alt metriklerinizi üreterek tümden parçalara doğru iniyorsunuz.

Önermelerin dışında da bazı performans bütçesi hedefleri konulabiliyor. Örnek vermek gerekirse;

• Detay sayfasının mobil Lighthouse skorunun 80 üzerine çıkarılması
• Masaüstü sitedeki tüm görsellerin boyutlarını 500 KB'nin altına düşürülmesi

Performans Bütçesi Metrikleri

Performans bütçesinin metriklerini belirleyebilmek için kabul edilen üç farklı bakış açısı vardır:

Sayı bazlı metrikler

• Maksimum font sayısı / Maksimum font boyutu
• Maksimum görsel sayısı / Maksimum görsel boyutu
• Maksimum script, stil, video vb.. sayısı / Maksimum script, stil, video vb.. boyutu
• Maksimum HTML büyüklüğü
• Maksimum HTTP istek sayısı
• Maksimum 3. parti script sayısı

Zaman bazlı metrikleri

• First Contentful Paint(FCP) süresi
• Largest Contentful Paint(LCP) süresi
• First Input Delay(FID) süresi
• Time to Interactive(TTI) süresi
• Total Blocking Time (TBT) süresi
• Cumulative Layout Shift(CLS) rakamı
• SpeedIndex rakamı

Kural bazlı metrikler

• Lighthouse skoru
• GTmetrix skoru
• Webpagetest skoru
• Yslow skoru

Web performans bütçesi belirlenirken genel olarak tavsiye edilen bu bakış açılarından herhangi birini seçmenin ötesinde hepsini doğru ölçüde birleştirerek kombine etmektir. Sonuca ulaşmak için performans bütçesi simülatörünü kullanarak hedeflediğiniz hıza ulaşabilmeniz adına ulaşılması gereken rakamları bulabilirsiniz.

Sayfa Tiplerini Ayrı Değerlendirin

Performans bütçesini belirlerken önemli noktalarda biri de sitenin tek bir sayfasını baz almamak. Genelde en çok yapılan hatalar arasında sadece anasayfayı test ederek bakmaktır. Bu değerlendirmeyi eksik yapmak anlamına gelecektir.

Yapılması gereken platformu inceleyerek farklı tip sayfaları bularak işe başlamaktır. Ardından platform trafiğini analiz ederek en çok trafik alan sayfaları bularak öncelikleri belirlemektir. Sonrasında yaklaşık şöyle bir tablo çıkacaktır:

• Anasayfa
• Statik listeleme sayfaları
• Dinamik listeleme sayfaları
• Detay sayfaları
• Checkout sayfaları
• Arama sonuç sayfaları
• Kampanya sayfaları
• Blog sayfaları

Yukarıdaki ya da önceliklerinize göre daha az ya da çok sayfa tiplerinin performans bütçelerine ayrı ayrı odaklanmak gerekecektir.

Web performans bütçenizi oluştururken yardım almak istiyorsanız info@fiyort.com adresine yazabilirsiniz.