Performansın ne kadar önemli olduğunu hepimiz biliyoruz. Ancak performans ve web sitelerini "hızlı" hale getirme hakkında konuştuğumuzda tam olarak neyi kastediyoruz?
Gerçek şu ki performans görecelidir:
- Bir site, güçlü bir cihazla hızlı bir ağda olan bir kullanıcı için hızlı olabilirken düşük kaliteli bir cihazla yavaş bir ağda olan başka bir kullanıcı için yavaş olabilir.
- İki sitenin yüklenmesi tam olarak aynı sürede tamamlanabilir ancak bunlardan biri daha hızlı yükleniyormuş gibi görünebilir (içeriği, sonuna kadar beklemek yerine kademeli olarak yüklerse).
- Bir site hızlı yükleniyor görünebilir ancak daha sonra kullanıcı etkileşimine yavaş (veya hiç) yanıt vermez.
Performans hakkında konuşurken net olmak ve performansı metrikler açısından belirtmek önemlidir. Nicel olarak ölçülebilir objektif ölçütler, ancak ölçtüğünüz metriklerin yararlı olduğundan emin olmak da önemlidir.
Metrikleri tanımlama
Geçmişte web performansı load
etkinliğiyle ölçülmüştür. Ancak load
, sayfanın yaşam döngüsünde iyi tanımlanmış bir an olsa da bu an, kullanıcının önemsediği bir şeyle mutlaka eşleşmez.
Örneğin, bir sunucu hemen "yüklenen" ancak daha sonra load
etkinliği tetiklendikten birkaç saniye sonrasına kadar içerik getirmeyi veya sayfada herhangi bir şey göstermeyi erteleyen minimum bir sayfayla yanıt verebilir. Bu tür bir sayfanın teknik olarak hızlı bir yükleme süresi vardır ancak bu süre, kullanıcının sayfanın yüklenmesini nasıl deneyimlediğiyle uyuşmaz.
Chrome Ekibi'nin üyeleri, son birkaç yıldır W3C Web Performansı Çalışma Grubu ile birlikte çalışarak kullanıcıların bir web sayfasının performansını nasıl deneyimlediklerini daha doğru ölçen yeni API'ler ve metrikler standartlaştırmaya çalışıyor.
Metriklerin kullanıcılarla alakalı olmasını sağlamak için metrikleri birkaç temel soru çerçevesinde ele alıyoruz:
Bu durumla karşılaşıyor musunuz? | Gezinme başarıyla başladı mı? Sunucu yanıt verdi mi? |
Yararlı mı? | Kullanıcıların etkileşimde bulunabileceği yeterli içerik oluşturuldu mu? |
Kullanılabilir durumda mı? | Kullanıcılar sayfayla etkileşime girebiliyor mu yoksa sayfa meşgul mü? |
Bu içerik ilginizi çekti mi? | Etkileşimler akıcı ve doğal mı, gecikme var mı? |
Metrikler nasıl ölçülür?
Performans metrikleri genellikle iki şekilde ölçülür:
- Laboratuvarda: Tutarlı ve kontrollü bir ortamda sayfa yüklemeyi simüle etmek için araçlardan yararlanma
- Alanda: Sayfayı gerçekten yükleyen ve sayfayla etkileşime geçen gerçek kullanıcılar
Bu seçeneklerin hiçbiri diğerinden daha iyi veya daha kötü değildir. Aslında, iyi performans sağlamak için genellikle ikisini de kullanmak istersiniz.
Laboratuvarda
Yeni özellikler geliştirirken performansı laboratuvarda test etmek çok önemlidir. Özellikler üretimde kullanıma sunulmadan önce gerçek kullanıcılardaki performans özelliklerini ölçmek mümkün değildir. Bu nedenle, özellikleri yayınlanmadan önce laboratuvarda test etmek, performans gerilemelerini önlemenin en iyi yoludur.
Sahada
Öte yandan, laboratuvarda test yapmak performans için makul bir proxy olsa da gerçek kullanıcıların sitenizi nasıl deneyimlediğini her zaman yansıtmaz.
Bir sitenin performansı, kullanıcının cihaz özelliklerine ve ağ koşullarına göre önemli ölçüde değişiklik gösterebilir. Ayrıca, kullanıcının sayfayla etkileşimde bulunup bulunmadığına (veya nasıl etkileşimde bulunduğuna) göre de değişebilir.
Sayfa yüklemeleri de her zaman belirlenemez değildir. Örneğin, kişiselleştirilmiş içerik veya reklamlar yükleyen sitelerde kullanıcılar arasında çok farklı performans özellikleri görülebilir. Laboratuvar testleri bu farklılıkları yakalamaz.
Sitenizin kullanıcılarınız açısından nasıl performans gösterdiğini gerçekten öğrenmenin tek yolu, kullanıcılar sitenizi yükleyip siteyle etkileşime geçtiğinde performansını ölçmektir. Bu tür ölçümlere genellikle Gerçek Kullanıcı İzleme (RUM) adı verilir.
Metrik türleri
Kullanıcıların performansı nasıl algıladığıyla ilgili başka metrik türleri de vardır.
- Algılanan yükleme hızı: Bir sayfanın tüm görsel öğelerini ekranda ne kadar hızlı yükleyip oluşturabileceği.
- Yükleme yanıtı: Bir sayfanın, bileşenlerin kullanıcı etkileşimine hızlı yanıt vermesi için gerekli JavaScript kodunu ne kadar hızlı yükleyip yürütebileceği
- Çalışma zamanındaki tepki: Sayfa yüklendikten sonra sayfanın kullanıcı etkileşimine ne kadar hızlı yanıt verebileceği.
- Görsel kararlılık: Sayfadaki öğeler kullanıcıların beklemediği şekilde kayıyor ve etkileşimlerini engelliyor mu?
- Yumuşaklık: Geçişler ve animasyonlar tutarlı bir kare hızında oluşturuluyor mu ve bir durumdan diğerine sorunsuz bir şekilde geçiyor mu?
Tüm bu performans metriği türleri göz önüne alındığında, bir sayfanın tüm performans özelliklerini yakalamak için tek bir metriğin yeterli olmayacağı anlaşılıyor.
Ölçülmesi gereken önemli metrikler
- İlk Zengin İçerikli Boyama (FCP): Sayfanın yüklenmeye başlamasından sayfadaki içeriğin herhangi bir bölümünün ekranda oluşturulmasına kadar geçen süreyi ölçer. (lab, field)
- Largest Contentful Paint (LCP): Sayfanın yüklenmeye başlamasından en büyük metin bloğunun veya resim öğesinin ekranda oluşturulmasına kadar geçen süreyi ölçer. (lab, field)
- Interaction to Next Paint (INP): Sayfayla yapılan her dokunma, tıklama veya klavye etkileşiminin gecikmesini ölçer ve etkileşim sayısına göre sayfanın en kötü etkileşim gecikmesini (veya en yüksek değere yakın bir değeri) sayfanın genel yanıt vermesini tanımlayan tek bir temsili değer olarak seçer. (lab, field)
- Toplam Engelleme Süresi (TBT): FCP ile TTI arasındaki toplam süreyi ölçer. Bu süre, ana iş parçacığının girişe yanıt vermeyi önleyeceği kadar uzun süre engellendiği zamandır. (lab)
- Kümülatif Düzen Değişikliği (CLS): Sayfanın yüklenmeye başlaması ile yaşam döngüsü durumu gizli olarak değiştiği zaman arasında gerçekleşen tüm beklenmedik düzen değişikliklerinin kümülatif puanını ölçer. (lab, field)
- İlk Bayta Geçiş Süresi (TTFB): Ağın, bir kullanıcı isteğine bir kaynağın ilk baytıyla yanıt vermesi için geçen süreyi ölçer. (lab, field)
Bazı durumlarda, eksik alanları kapsayacak yeni metrikler kullanıma sunulur. Diğer durumlarda ise en iyi metrikler, sitenize özel olarak uyarlanmış olanlardır.
Özel metrikler
Daha önce bahsedilen performans metrikleri, web'deki çoğu sitenin performans özellikleri hakkında genel bir fikir edinmenize yardımcı olur. Ayrıca, sitelerin performanslarını rakipleriyle karşılaştırmaları için ortak bir metrik grubuna sahip olmaları açısından da faydalıdır.
Ancak belirli bir sitenin, performansın tam resmini yakalamak için ek metrikler gerektirecek şekilde benzersiz olduğu durumlar olabilir. Örneğin, LCP metriği bir sayfanın ana içeriğinin yüklenmesi tamamlandığında ölçülmek üzere tasarlanmıştır. Ancak en büyük öğenin sayfanın ana içeriğinin bir parçası olmadığı durumlar olabilir ve bu nedenle LCP alakalı olmayabilir.
Web Performansı Çalışma Grubu, bu tür durumları ele almak için kendi özel metriklerinizi uygulamak için yararlı olabilecek daha düşük düzey API'leri de standartlaştırdı:
- User Timing API
- Long Tasks API
- Long Animation Frames API
- Element Timing API
- Navigation Timing API
- Resource Timing API
- Sunucu zamanlaması
Sitenize özgü performans özelliklerini ölçmek için bu API'leri nasıl kullanacağınızı öğrenmek üzere Özel Metrikler başlıklı kılavuzu inceleyin.