Performansın ne kadar önemli olduğunu hepimiz duymuşuzdur. Ancak performanstan ve web sitelerini "hızlı" hale getirmekten söz ettiğimizde tam olarak ne kastediyoruz?
Gerçekte, performans görecelidir:
- Bir site bir kullanıcı için hızlı (güçlü bir cihaza sahip hızlı bir ağda) ancak başka bir kullanıcı için yavaş olabilir (düşük özellikli bir cihaza sahip yavaş bir ağda).
- İki sitenin yüklenmesi tamamen aynı sürede tamamlanabilir ancak bunlardan biri daha hızlı yüklenebilir (herhangi bir şey görüntülemek için sonuna kadar beklemek yerine içeriği aşamalı olarak yüklüyorsa).
- Bir site hızlı yükleniyor görünse ancak kullanıcı etkileşimine yavaş yanıt veriyor (veya hiç yanıt vermiyor olabilir).
Performans hakkında konuşurken, net olmak ve metrik bakımından performansı gösterir. Nicel olarak alınabilen nesnel kriterler Ancak, ölçtüğünüz metriklerin doğru olduğundan emin olmak da faydalı olur.
Metrikleri tanımlama
Geçmişte web performansı load
etkinliğiyle ölçülüyordu. Ancak load
, bir sayfanın yaşam döngüsünde iyi tanımlanmış bir an olsa da o an, kullanıcının önemsediği herhangi bir şeye karşılık gelmeyebilir.
Örneğin, bir sunucu "yüklenen" minimum bir sayfayla yanıt verebilir hemen ardından, load
etkinliği etkinleştikten birkaç saniye sonrasına kadar içerik getirmeyi veya sayfadaki herhangi bir şeyi görüntülemeyi erteler. Böyle bir sayfa teknik olarak hızlı bir yükleme süresine sahiptir ancak bu süre, kullanıcının sayfa yükleme deneyimini nasıl deneyimlediğine karşılık gelmez.
Son birkaç yıldır, Chrome ekibinin üyeleri W3C Web Performansı Çalışma Grubu ile birlikte çalışarak kullanıcıların web sayfasının performansını nasıl deneyimlediklerini daha doğru bir şekilde ölçen bir dizi yeni API'yi ve metriği standartlaştırmak için çalışıyorlardı.
Metriklerin kullanıcılar açısından alakalı olmasını sağlamak için metrikleri birkaç temel soru çerçevesinde şekillendiriyoruz:
Bu mümkün mü? | Gezinme başarıyla başlatıldı mı? Sunucu yanıt verdi mi? |
Faydalı mı? | Kullanıcıların etkileşimde bulunabileceği kadar içerik oluşturulmuş mu? |
Kullanılabilir mi? | Kullanıcılar sayfayla etkileşimde bulunabiliyor mu yoksa meşgul mü? |
Keyifli mi? | Etkileşimler sorunsuz ve doğal mı, gecikme içermiyor mu? |
Metrikler nasıl ölçülür?
Performans metrikleri genellikle şu iki yöntemden biriyle ölçülür:
- Laboratuvarda: tutarlı ve kontrollü bir ortamda sayfa yüklemeyi simüle etmek için araçlar kullanma
- Sahada: Sayfayı yükleyen ve etkileşimde bulunan gerçek kullanıcılar
Bu seçeneklerin her ikisi de her zaman diğerinden daha iyi veya daha kötü değildir. Aslında, iyi bir performans sağlamak için genellikle her ikisini de kullanmak istersiniz.
Laboratuvarda
Yeni özellikler geliştirilirken laboratuvardaki performansın test edilmesi çok önemlidir. Özellikler üretimde kullanıma sunulmadan önce, gerçek kullanıcılar üzerindeki performans özelliklerini ölçmek imkansızdır. Bu nedenle, özellik kullanıma sunulmadan önce özellikleri laboratuvarda test etmek performans gerilemelerini önlemenin en iyi yoludur.
Sahada
Diğer yandan, laboratuvarda gerçekleştirilen testler performans için makul bir gösterge olsa da gerçek kullanıcıların sitenizde nasıl bir deneyim yaşadığını yansıtmayabilir.
Bir sitenin performansı, kullanıcının cihaz özelliklerine ve ağ koşullarına bağlı olarak büyük ölçüde değişebilir. Ayrıca, kullanıcının sayfayla etkileşim kurup kurmadığına (veya nasıl) bağlı olarak da değişiklik gösterebilir.
Ayrıca, sayfa yüklemeleri her zaman deterministik değildir. Örneğin, kişiselleştirilmiş içerik veya reklam yükleyen siteler, kullanıcılardan kullanıcıya çok farklı performans özellikleriyle karşılaşabilir. Laboratuvar testi bu farkları yakalamaz.
Sitenizin kullanıcılarınız için nasıl bir performans gösterdiğini tam olarak anlamanın tek yolu, söz konusu kullanıcılar sitenizi yükleyip onunla etkileşimde bulunurken gerçekte sitenizin performansını ölçmektir. Bu ölçüm türü genellikle Gerçek Kullanıcı İzleme (RUM) olarak adlandırılır.
Metrik türleri
Kullanıcıların performansı nasıl algıladığıyla alakalı başka metrik türleri daha vardır.
- Algılanan yükleme hızı: Bir sayfanın ne kadar hızlı yüklenip tüm görsel öğelerini ekranda oluşturabileceği.
- Yükleme duyarlılığı: Bileşenlerin kullanıcı etkileşimine hızlı yanıt vermesi için bir sayfanın gerekli JavaScript kodunu ne kadar hızlı yükleyebileceği ve yürütebileceği
- Çalışma zamanı yanıt hızı: Sayfa yüklendikten sonra, sayfanın kullanıcı etkileşimine ne kadar hızlı yanıt verebileceğini belirtir.
- Görsel kararlılık: Sayfadaki öğeler kullanıcıların beklemediği şekillerde değişiyor mu ve etkileşimlerini etkileyebilir mi?
- Düzgünlük: Geçişler ve animasyonlar tutarlı bir kare hızında oluşturuluyor mu ve bir durumdan diğerine akıcı bir şekilde mi akıyor?
Tüm bu performans metrikleri göz önüne alındığında, bir sayfanın tüm performans özelliklerini anlamak için tek bir metriğin yeterli olmadığı açıktır.
Ölçülecek ö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, alan)
- 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, alan)
- Sonraki Boyamayla Etkileşim (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 genel yanıt verme durumunu açıklayan tek, temsili bir değer olarak sayfanın en kötü etkileşim gecikmesini (veya en yüksek değere yakın) seçer. (lab, alan)
- Toplam Engelleme Süresi (TBT): Ana iş parçacığının, girişe yanıt vermeyi engelleyecek kadar uzun süre engellendiği FCP ile TTI arasındaki toplam süreyi ölçer. (lab)
- Cumulative Layout Shift (CLS): Sayfanın yüklenmeye başlaması ile yaşam döngüsü durumunun gizli olarak değişmesi arasında meydana gelen tüm beklenmedik düzen kaymalarının kümülatif puanını ölçer. (lab, alan)
- İlk Bayt'a Kadar Geçen Süre (TTFB): Ağın, kullanıcı isteğine bir kaynağın ilk baytı ile yanıt vermesi için geçen süreyi ölçer. (lab, alan)
Bazı durumlarda eksik alanları tamamlamak için yeni metrikler kullanıma sunulurken bazen de en iyi metrikler, sitenize özel olarak uyarlanmış metriklerdir.
Özel metrikler
Daha önce ele alınan performans metrikleri, web'deki çoğu sitenin performans özelliklerini genel olarak anlamak için yararlıdır. Ayrıca, sitelerin performanslarını rakipleriyle kıyaslayabilmeleri için bir dizi ortak metriğe sahip olmaları açısından da yararlıdır.
Ancak, belirli bir sitenin bir şekilde benzersiz olduğu durumlar da olabilir. Bu durumda, performansla ilgili resmin tamamını görmek için ek metrikler gerekir. Örneğin, LCP metriği, bir sayfanın ana içeriğinin yüklenmesi sona erdiğinde bunu ölçmek için tasarlanmıştır. Ancak en büyük öğenin, sayfanın ana içeriğinin bir parçası olmadığı durumlar da olabilir. Bu nedenle LCP, alakalı olmayabilir.
Web Performansı Çalışma Grubu, bu tür durumları ele almak üzere kendi özel metriklerinizi uygulamanız için yararlı olabilecek alt düzey API'leri de standart hale getirmiştir:
- User Timing API
- Long Tasks API
- Long Animation Frames API (Uzun Animasyon Çerçeveleri API'si)
- Element Timing API
- Gezinme Zamanlama API'si
- Resource Timing API
- Sunucu zamanlaması
Bu API'leri sitenize özgü performans özelliklerini ölçmek için nasıl kullanacağınızı öğrenmek üzere Özel Metrikler ile ilgili kılavuza bakın.