Performans, kullanıcı deneyiminin önemli bir parçasıdır ve işletme metriklerini etkiler. İyi bir geliştirici olduğunuzda yüksek performanslı bir site elde edeceğinizi düşünmek cazip gelebilir, ancak gerçek şu ki iyi performans nadiren bir yan etki olarak görülür. Diğer birçok konuda olduğu gibi, bir hedefe ulaşmak için o hedefi net bir şekilde tanımlamanız gerekir. Yolculuğa 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, sayfanın toplam boyutu, mobil ağda yüklenme süresi ve hatta gönderilen HTTP isteklerinin sayısı olabilir. Bütçe tanımlamak, web performansı görüşmesinin başlatılmasına yardımcı olur. Tasarım, teknoloji ve özellik ekleme konusunda kararlar alırken bir referans noktası olarak işlev görür.
Bütçenin olması tasarımcıların yüksek çözünürlüklü resimlerin etkilerini ve seçtikleri web yazı tipi sayısını göz önünde bulundurmasını sağlar. Ayrıca geliştiricilerin bir soruna 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ığından geliştirme sürecinin ilk aşamalarında kullanışlıdır. Ayrıca, hem tasarımcılarla hem de geliştiricilerle kolayca iletişim kurabilirler.
Performans bütçesine ekleyebileceğiniz, sayfa ağırlığı ve HTTP isteklerinin sayısı gibi unsurlardan bahsettik. Ancak bunları aşağıdaki gibi daha ayrıntılı sınırlara bölebilirsiniz:
- Maksimum resim boyutu
- Maksimum web yazı tipi sayısı
- Çerçeveler dahil olmak üzere maksimum komut dosyası boyutu
- Üçüncü taraf komut dosyaları gibi harici kaynakların toplam sayısı
Ancak bu sayılar size kullanıcı deneyimi hakkında pek fazla fikir vermez. Aynı sayıda isteğe veya aynı ağırlığa sahip iki sayfa, kaynakların istenme sırasına bağlı olarak farklı şekilde oluşturulabilir. Lokomotif resim veya sayfalardan birindeki stil sayfası gibi kritik bir kaynak sürecin sonlarına doğru yüklenirse kullanıcılar yararlı bir şey görmek için daha uzun süre bekler ve sayfanın daha yavaş olduğunu algılar. Diğer sayfadaki en önemli bölümler hızlı yükleniyorsa, sayfanın geri kalanı yüklenmese de bu bölüm fark edilemeyebilir.
Bu nedenle, başka bir metrik türünü takip etmek önemlidir.
Aşama zamanları ⏱️
Aşama zamanlamaları, sayfa yükleme sırasında gerçekleşen DOMContentLoaded veya load etkinliği gibi etkinlikleri işaretler. En faydalı zamanlamalar, sayfa yükleme deneyimi hakkında size bilgi veren kullanıcı odaklı performans metrikleridir. Bu metriklere, tarayıcı API'ları aracılığıyla ve Lighthouse raporlarının bir parçası olarak erişilebilir.
İlk Zengin İçerikli Boyama (FCP), tarayıcının DOM'deki metin veya resimler gibi ilk içerik bitini ne zaman görüntülediğini ölçer.
Etkileşime Hazır Olma Süresi (TTI), bir sayfanın tamamen etkileşimli hale gelmesi ve kullanıcı girişine güvenilir şekilde yanıt vermesi için geçen süreyi ölçer. Sayfada bağlantıları, düğmeleri tıklama, yazma veya form öğelerini kullanma gibi herhangi bir kullanıcı etkileşimi bekliyorsanız izlemeniz çok önemli bir metriktir.
Kural tabanlı metrikler 💯
Lighthouse ve WebPageTest, performans puanlarını kılavuz olarak kullanabileceğiniz genel en iyi uygulama kurallarına göre hesaplar. Ayrıca Lighthouse, basit optimizasyonlar için ipuçları da sunar.
Miktara ve kullanıcı odaklı performans metriklerinin bir kombinasyonunu takip ederseniz en iyi sonuçları elde edersiniz. Bir projenin ilk aşamalarında öğe boyutlarına odaklanın ve mümkün olan en kısa sürede FCP ve TTI'yı izlemeye başlayın.
Bir temel oluşturun
Siteniz için neyin en iyi sonucu verdiğini anlamanın tek yolu onu denemektir. Araştırma yapıp bulgularınızı test edin. Ne durumda olduğunuzu görmek için rekabeti analiz edin. 🕵️
Bunun için zamanınız yoksa, işe koyulmanıza yardımcı olacak bazı varsayılan değerleri aşağıda bulabilirsiniz:
- Etkileşim Süresi 5 sn'den Az
- 170 KB'ın altında kritik yol kaynakları (sıkıştırılmış/küçültülmüş)
Bu sayılar, gerçek dünyadaki referans 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şmektedir. Bu nedenle, 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ızda, mobil cihazlarda 170 KB'tan az JavaScript kodu bulunmalıdır.
- Arama sayfamız, masaüstü bilgisayarlarda 2 MB'tan az resim içermelidir
- Ana sayfamız Moto G4 telefonda yavaş 3G bağlantısıyla 5 saniyeden kısa süre içinde yüklenmeli ve etkileşimli hale gelmelidir
- Blogumuz Lighthouse performans denetimlerinde 80'den fazla puan almalıdır
Derleme işleminize performans bütçeleri ekleyin
Bunun için kullanılacak araç, projenizin ölçeğine ve göreve ayırabileceğiniz kaynaklara bağlıdır. Derleme sürecinize bütçe eklemenize yardımcı olabilecek birkaç açık kaynak araç vardır:
Belirli bir eşiği aşan öğeler için aşağıdakilerden birini yapabilirsiniz:
- Mevcut bir özelliği veya öğeyi optimize edin 🛠️
- Mevcut bir özelliği veya öğeyi kaldırın 🗑️
- Yeni özelliği veya öğeyi eklemeyin ✋⛔
Performansı izleme
Sitenizin yeterince hızlı olduğundan emin olmak, ilk lansmandan sonra ölçüme devam etmeniz gerektiği anlamına gelir. Bu metrikleri zaman içinde izlemek ve gerçek kullanıcılardan veri almak, performanstaki değişikliklerin temel işletme metriklerini nasıl etkilediğini gösterir.
Son adım
Performans bütçesinin amacı proje boyunca performansa odaklanmanızı sağlamaktır ve bu bütçeyi erkenden belirlemek daha sonra geri izlemeyi önlemeye yardımcı olur. Bu metin, web sitenize ne ekleyeceğinize karar vermenize yardımcı olacak bir referans noktası olmalıdır. Ana fikir, işlevselliğe veya kullanıcı deneyimine zarar vermeden performansı daha iyi dengeleyebilmeniz için hedefler belirlemektir.🎯
Bir sonraki kılavuz, birkaç basit adımda ilk performans bütçenizi belirlemenizi sağlayacak.