Web siteleri zamanla ağırlaşır. Her yeni kampanya bir görsel, her yeni ölçüm ihtiyacı bir betik, her yeni özellik biraz daha JavaScript ekler. Kimse tek başına sorumlu değildir ama sonuçta site yavaşlar. Bu kaymayı durduran araç performans bütçesidir: neyin ne kadar yer kaplayabileceğine dair önceden verilmiş, yazılı ve denetlenen bir karar.
Bütçe nasıl belirlenir?
Bütçe üç farklı türde kurulabilir ve en iyi sonuç üçünün birlikte kullanılmasıyla alınır.
- Metrik bütçesi: hedef metrik eşikleri. Örneğin belirli bir şablonda LCP değerinin sahada 2,5 saniyenin altında kalması.
- Kaynak bütçesi: tür bazında toplam transfer boyutu. Örneğin bir sayfada JavaScript için üst sınır, görseller için üst sınır, yazı tipleri için üst sınır.
- Sayı bütçesi: istek sayısı, üçüncü taraf alan adı sayısı, yazı tipi dosyası sayısı gibi sayılabilir sınırlar.
Bütçeyi soyut bir ideale göre değil, mevcut duruma ve rekabet ortamına göre belirleyin. İyi bir başlangıç, en önemli üç şablonu ölçmek ve mevcut değerlerin biraz altını hedef koymaktır. Bütçe bir kez konduktan sonra en kritik adım, onu otomatik olarak denetlemektir; elle yapılan kontroller ilk yoğun haftada terk edilir.
Görseller: en büyük kalem, en kolay kazanç
Tipik bir sayfada transfer edilen baytların en büyük bölümü görsellerdir ve buradaki iyileştirmeler genellikle kod değişikliği gerektirmez.
Format seçimi. WebP, JPEG ve PNG'ye kıyasla belirgin ölçüde küçük dosyalar üretir ve güncel tarayıcılarda yaygın biçimde desteklenir. AVIF genellikle daha da iyi sıkıştırma sağlar, ancak kodlaması daha yavaştır ve bazı araç zincirlerinde ek kurulum ister. Pratik yaklaşım, kaynağı tek bir yüksek kaliteli dosyada tutmak ve sunum katmanında modern formatları üretip destekleyen tarayıcıya vermektir. Logo, ikon ve basit çizimler için ise en doğru seçenek genellikle SVG'dir: ölçekten bağımsız keskindir ve çok küçüktür.
Doğru boyut. En sık görülen israf, 2000 piksel genişliğindeki bir görselin 400 piksellik bir alanda gösterilmesidir. srcset ve sizes öznitelikleriyle tarayıcıya birkaç boyut sunun; hangi dosyayı indireceğine ekran genişliği ve piksel yoğunluğuna bakarak kendisi karar versin. Görselin kırpımı ekran boyutuna göre değişiyorsa (örneğin geniş ekranda yatay, mobilde kare) picture ögesiyle sanat yönlendirmesi yapın.
Geç yükleme. Görünür alanın altındaki görselleri loading="lazy" ile erteleyin. Ancak ilk ekrandaki ana görsele bunu asla uygulamayın; LCP ögesini geciktirmek, kazanılan her baytı fazlasıyla geri verir.
Yer ayırma. Her görsele genişlik ve yükseklik verin ya da CSS ile en boy oranı tanımlayın. Bu tek alışkanlık, düzen kaymasının en yaygın sebebini ortadan kaldırır.
Yazı tipleri, betikler ve önbellek
Yazı tipleri sessiz bir maliyet kalemidir. Her aile ve her ağırlık ayrı bir dosya demektir; üç ağırlık genellikle yeterlidir. Değişken yazı tipleri, birçok ağırlığı tek dosyada sunarak toplam boyutu düşürebilir. Yalnızca kullandığınız karakter aralığını içeren bir alt küme üretmek ise Türkçe içerikte hem boyut hem doğruluk açısından kazandırır.
Üçüncü taraf betikleri için basit bir kural koyun: her yeni betik, bir sahibi ve bir gerekçesi olmadan eklenemez. Yılda bir kez envanteri gözden geçirin; artık kullanılmayan ısı haritası ve kampanya kodlarının sayfada yıllarca kaldığını görmek şaşırtıcı derecede yaygındır.
Son olarak dağıtım katmanını ihmal etmeyin. Metin tabanlı kaynaklar sıkıştırılarak gönderilmeli, değişmeyen dosyalar uzun süreli önbelleğe alınmalı ve sürüm değişikliği dosya adına yansıtılmalıdır. Böylece kullanıcı aynı dosyayı bir kez indirir, siz de güncelleme yaptığınızda önbelleğin eskimesini beklemek zorunda kalmazsınız.
Bütçeyi yaşatan şey süreçtir
Ölçüm ortamını gerçeğe yaklaştırın
Performans testlerini ofisteki hızlı bağlantı ve güçlü dizüstü bilgisayarla yapmak, kullanıcıların yaşadığı deneyimi gizler. Test ortamını gerçek kitleye yaklaştırın: orta sınıf bir mobil cihaz, kısıtlı ağ profili ve önbelleği boş bir ilk ziyaret. Aradaki fark çoğu zaman şaşırtıcı derecede büyüktür ve önceliklendirmeyi tamamen değiştirir.
Bir de tekrar ziyaret senaryosunu ayrı ölçün. İlk ziyarette ağır ama iyi önbelleklenmiş bir site, sık gelen kullanıcılar için gayet hızlı olabilir; buna karşılık arama sonuçlarından gelen ve siteye ilk kez uğrayan ziyaretçi tamamen farklı bir deneyim yaşar. Hangi senaryonun işiniz için daha belirleyici olduğunu bilmek, bütçeyi nereye harcayacağınızı da belirler.
Performans, bir kez yapılıp bitirilen bir iş değil, her yayında yeniden kazanılan bir durumdur. Bütçeyi geliştirme sürecine yerleştirin: her önemli değişiklikte ölçün, sonucu görünür bir yerde raporlayın ve bütçe aşıldığında bunun bilinçli bir karar olmasını sağlayın. Aşmak bazen doğrudur; fark edilmeden aşmak asla. Ölçüm ve bakım düzenini kurmak için teklif sayfasından bize ulaşabilirsiniz.
