Performans, kullanıcı deneyiminin önemli bir parçasıdır ve işletme metriklerini etkiler. İyi bir geliştiriciyseniz başarılı bir sitenin ortaya çıkacağını düşünmek cazip gelebilir, ancak gerçekte iyi performans, nadiren yan etkiye yol açmaz. Diğer çoğu şeyde olduğu gibi, bir hedefe ulaşmak için hedefi net bir şekilde tanımlamanız gerekir. Programa bir performans bütçesi belirleyerek başlayın.
Tanım
Performans bütçesi, site performansını etkileyen metriklere uygulanan bir dizi sınırdır. Bu değer, bir sayfanın toplam boyutu, mobil ağda yüklenme süresi, hatta gönderilen HTTP isteklerinin sayısı olabilir. Bütçe belirlemek, web performansı konusunu başlatmaya yardımcı olur. Tasarım, teknoloji ve özellik eklemeyle ilgili kararlar alırken referans noktası görevi görür.
Bütçenin olması, tasarımcıların yüksek çözünürlüklü resimlerin etkileri ve seçtikleri web yazı tiplerinin sayısı üzerine düşünmelerini sağlar. Ayrıca geliştiricilerin bir probleme farklı yaklaşımları karşılaştırmasına, çerçeveleri ve kitaplıkları boyutlarına ve ayrıştırma maliyetlerine göre değerlendirmelerine de yardımcı olur.
Metrikleri seçin
Miktara dayalı metrikler ⚖️
Bu metrikler, ağır resimler ve komut dosyaları eklemenin etkisini vurguladıkları için geliştirmenin ilk aşamalarında yararlıdır. Ayrıca hem tasarımcılara hem de geliştiricilere kolayca iletilebilir.
Bir performans bütçesine ekleyebileceğiniz bazı şeylerden (sayfa ağırlığı ve HTTP isteklerinin sayısı gibi) zaten bahsettik. Ancak, bunları daha ayrıntılı sınırlara şu şekilde ayırabilirsiniz:
- Maksimum resim boyutu
- Maksimum web yazı tipi sayısı
- Çerçeveler dahil maksimum komut dosyası boyutu
- Üçüncü taraf komut dosyaları gibi harici kaynakların toplam sayısı
Ancak bu sayılar, kullanıcı deneyimi hakkında pek fazla bir fikir vermez. Aynı sayıda istek veya aynı ağırlığa sahip iki sayfa, kaynakların istendiği sıraya bağlı olarak farklı şekilde oluşturulabilir. Sayfalardan birinde hero resim veya stil sayfası gibi kritik bir kaynak sürecin sonlarında yüklenirse kullanıcılar yararlı bir şey görmek için daha uzun süre bekler ve sayfayı daha yavaş olarak algılar. Diğer sayfada en önemli bölümler hızlı bir şekilde yükleniyorsa sayfanın geri kalanı yüklenmese bile bunu fark etmeyebilir.
Bu nedenle, başka bir metrik türünü izlemek önemlidir.
Aşama zamanlamaları ⏱️
Aşama zamanlamaları, sayfa yükleme sırasında gerçekleşen etkinlikleri (ör. DOMContentLoaded veya yükleme etkinliği) işaretler. En yararlı zamanlamalar, size sayfa yükleme deneyimi hakkında bir şeyler söyleyen kullanıcı odaklı performans metrikleridir. Bu metrikler, tarayıcı API'leri aracılığıyla ve Lighthouse raporlarının bir parçası olarak kullanılabilir.
First Contentful Paint (FCP), tarayıcının DOM'den alınan metin veya resim gibi ilk içerik bitini ne zaman gösterdiğini ölçer.
Etkileşime Hazır Olma Süresi (TTI), bir sayfanın tamamen etkileşimli hâle gelmesi ve kullanıcı girişlerine güvenilir şekilde yanıt vermesinin ne kadar sürdüğünü ölçer. Sayfada bağlantıları, düğmeleri tıklama, yazma veya form öğelerini kullanma gibi herhangi bir kullanıcı etkileşimi beklentiniz olup olmadığını izlemek çok önemli bir metriktir.
Kural tabanlı metrikler 💯
Lighthouse ve WebPageTest, kılavuz olarak kullanabileceğiniz genel en iyi uygulama kurallarına göre performans puanlarını hesaplar. Lighthouse ayrıca, basit optimizasyonlar için ipuçları da sunuyor.
Miktara dayalı ve kullanıcı odaklı performans metriklerinin bir kombinasyonunu takip ederseniz en iyi sonuçları elde edersiniz. Bir projenin ilk aşamalarında varlık boyutlarına odaklanıp FCP ve TTI'yi en kısa sürede takip etmeye başlayın.
Bütçe temel çizgisi oluşturun
Siteniz için neyin en iyi sonucu verdiğini anlamanın tek yolu denemektir. Bulgularınızı araştırıp test edin. Rakiplerinizi analiz ederek rakiplerinizin durumunu görün. 🕵️
Bunun için zamanınız yoksa, işe koyulmanız için aşağıdaki iyi varsayılan sayılardan yararlanabilirsiniz:
- Etkileşime Hazır Olma Süresi 5 Saniyeden Az
- 170 KB'ın altında kritik yol kaynakları (sıkıştırılmış/küçültülmüş)
Bu sayılar, gerçek dünyadaki temel cihazlar ve 3G ağ hızı temel alınarak hesaplanır. Günümüzde internet trafiğinin yarısından fazlası mobil ağlarda gerçekleştiğinden başlangıç noktası olarak 3G ağ hızını kullanmalısınız.
Bütçe örnekleri
İçerikler değişiklik göstereceğinden, sitenizdeki farklı sayfa türleri için bir bütçeniz olmalıdır. Örneğin:
- Ürün sayfamız, mobil cihazlarda en fazla 170 KB JavaScript göndermelidir.
- Arama sayfamız masaüstünde 2 MB'tan az resim içermelidir.
- Moto G4 telefonda ana sayfamız yavaş 3G ile 5 saniyeden kısa sürede yüklenmeli ve etkileşimli hale gelmelidir
- Blogumuzun Lighthouse performans denetimlerinde 80'den yüksek bir puan alması gerekir.
Derleme sürecinize performans bütçeleri ekleyin
Bunun için bir araç seçmek, büyük ölçüde projenizin ölçeğine ve bu göreve ayırabileceğiniz kaynaklara bağlıdır. Oluşturma sürecinize bütçe eklemenize yardımcı olabilecek birkaç açık kaynaklı araç vardır:
Öğe tanımlı bir eşiği aşarsa aşağıdakilerden birini yapabilirsiniz:
- Mevcut bir özelliği veya öğeyi optimize edin 🛠️
- Mevcut bir özelliği veya öğeyi kaldırma 🗑️
- Yeni özelliği veya öğeyi ekleme ✋⛔
Performansı izleme
Sitenizin yeterince hızlı olduğundan emin olursanız ilk lansmandan sonra ölçüm yapmaya devam etmeniz gerekir. Bu metrikleri zaman içinde izleyerek gerçek kullanıcılardan veri alarak performanstaki değişikliklerin temel iş metriklerini nasıl etkilediğini görebilirsiniz.
Son adım
Performans bütçesinin amacı, proje boyunca performansa odaklandığınızdan emin olmak ve bu bütçeyi erkenden belirlemek, daha sonra geri izlemeyi önlemeye yardımcı olur. Bu sayfa, web sitenize neleri eklemeniz gerektiğini belirlemenize yardımcı olacak bir referans noktası olmalıdır. Ana fikir, işlevselliğe veya kullanıcı deneyimine zarar vermeden performansı daha iyi dengeleyebilmek için hedefler belirlemektir.🎯
Sonraki kılavuz, birkaç basit adımda ilk performans bütçenizi tanımlamanızda size yol gösterecektir.