Performansın ne kadar önemli olduğunu hepimiz duymuşuz. Peki performans ve web sitelerini "hızlı" hale getirmekten bahsederken tam olarak neyi kastediyoruz?
Gerçek şu ki performans görecelidir:
- Bir site bir kullanıcı için hızlı (güçlü bir cihaza sahip hızlı bir ağda), başka bir kullanıcı için ise yavaş olabilir (düşük teknolojili bir cihaza sahip yavaş bir ağda).
- İki sitenin yüklenmesi tam olarak aynı sürede tamamlanabilir, ancak herhangi bir şey görüntülemek için sonuna kadar beklemek yerine, içeriği aşamalı olarak yüklüyorsa daha hızlı yüklenme görünür.
- Bir site hızlı yükleniyormuş gibi görünse de kullanıcı etkileşimine daha sonra yavaş yanıt verir veya hiç yanıt vermez.
Performans derken net olmak ve niceliksel olarak ölçülebilen nesnel ölçütler olan metrics açısından performanstan bahsetmek önemlidir. Ancak, ölçtüğünüz metriklerin faydalı olduğundan emin olmanız da önemlidir.
Metrikler
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 bu an, kullanıcının önem verdiği herhangi bir şeye karşılık gelmez.
Örneğin, bir sunucu hemen "yüklenen" minimal bir sayfayla yanıt verebilir, ancak daha sonra load etkinliğinin tetiklenmesinden birkaç saniye sonrasına kadar içerik getirmeyi veya sayfadaki herhangi bir şeyi görüntülemeyi erteleyebilir. Böyle bir sayfanın teknik olarak kısa bir yükleme süresi vardır ancak bu süre, kullanıcının sayfa yükleme deneyimiyle uyumlu değildir.
Geçtiğimiz birkaç yılda, Chrome ekibinin üyeleri W3C Web Performansı Çalışma Grubu ile iş birliği yaparak, kullanıcıların web sayfalarının performansını daha doğru bir şekilde ölçen bir dizi yeni API ve metriği standart hale getirmek için çalışmaktadır.
Metriklerin kullanıcılarla alakalı olduğundan emin olmak için bunları birkaç temel soruya göre değerlendiririz:
| Sorun yaşıyor musunuz? | Gezinme başarılı bir şekilde başladı mı? Sunucu yanıt verdi mi? |
| Yararlı mı? | Kullanıcıların etkileşimde bulunabileceği kadar içerik oluşturuldu mu? |
| Kullanılabilir mi? | Kullanıcılar sayfayla etkileşimde bulunabiliyor mu, yoksa sayfa meşgul mü? |
| Keyifli miydi? | Etkileşimler sorunsuz ve doğal mı, gecikme ve duraklama içermiyor mu? |
Metrikler nasıl ölçülür?
Performans metrikleri genellikle şu iki yöntemden biriyle ölçülür:
- Laboratuvarda: Tutarlı, 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ılarda
Bu seçeneklerin hiçbiri, 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ştirirken laboratuvarda performansı test etmek şarttır. Özellikler üretimde yayınlanmadan önce, performans özelliklerini gerçek kullanıcılar üzerinde ölçmek mümkün değildir. Bu nedenle, bunları özellik yayınlanmadan önce laboratuvarda test etmek performans gerilemelerini önlemenin en iyi yoludur.
Sahada
Diğer yandan, laboratuvarda yapılan testler performans için makul bir gösterge olsa da her zaman tüm kullanıcıların sitenizdeki deneyimini yansıtmayabilir.
Bir sitenin performansı, kullanıcının cihazının kapasitesine 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) bağlı olarak da değişiklik gösterebilir.
Ayrıca, sayfa yüklemeleri her zaman belirleyici değildir. Örneğin, kişiselleştirilmiş içerik veya reklam yükleyen sitelerin performans özellikleri kullanıcıdan kullanıcıya çok farklı olabilir. Laboratuvar testleri bu farkları yakalayamaz.
Sitenizin kullanıcılarınız için nasıl performans gösterdiğini gerçek anlamda anlamanın tek yolu, kullanıcılar sitenizi yükleyip siteyle etkileşimde bulunurken 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ı olan başka metrik türleri de vardır:
- Algılanan yükleme hızı: Bir sayfanın ne kadar hızlı yüklenip tüm görsel öğelerini ekranda oluşturabildiğini gösterir.
- Yükleme duyarlılığı: Bir sayfanın, bileşenlerin kullanıcı etkileşimine hızlı bir şekilde yanıt vermesi için gereken JavaScript kodunu ne kadar hızlı yükleyip çalıştırabildiğini belirtir.
- Çalışma zamanı duyarlılığı: Bir sayfanın yüklendikten sonra kullanıcı etkileşimine ne kadar hızlı yanıt verebileceği.
- Görsel kararlılık: Sayfadaki öğeler, kullanıcıların beklemedikleri bir şekilde kayıyor ve etkileşimlerine engel oluyor mu?
- Düzgünlük: Geçişler ve animasyonlar tutarlı bir kare hızında oluşturuluyor ve bir durumdan diğerine akıcı bir şekilde akıyor mu?
Tüm bu performans metrikleri göz önünde bulundurulduğunda, bir sayfanın tüm performans özelliklerini yakalamak 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üre. (lab, alan)
- Largest Contentful Paint (LCP)
- Sayfanın yüklenmeye başlamasından ekranda en büyük metin bloğunun veya resim öğesinin oluşturulmasına kadar geçen süredir. (lab, alan)
- Sonraki boyamayla etkileşim (INP)
- Sayfayla gerçekleştirilen her dokunma, tıklama veya klavye etkileşimindeki gecikme. Etkileşim sayısına göre bu metrik, sayfanın genel yanıt verme durumunu açıklamak için sayfanın en kötü (veya en kötüye yakın) etkileşim gecikmesini tek bir temsili değer olarak seçer. (lab, alan)
- Toplam Engelleme Süresi (TBT)
- FCP ile Etkileşime Hazır Olma Süresi (TTI) arasında, ana iş parçacığının girişin yanıt vermeyi engelleyecek kadar uzun süre engellendiği toplam süre. (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 gerçekleşen tüm beklenmedik düzen kaymalarının kümülatif puanı. (lab, alan)
- İlk Bayt Zamanı (TTFB)
- Ağın, kullanıcı isteğine kaynağın ilk baytıyla yanıt vermesi için gereken süre. (lab, alan)
Bu liste, kullanıcılarla alakalı çeşitli performans unsurlarının çoğunu ölçen metrikleri içerir ancak tüm unsurları içermez. Örneğin, çalışma zamanı yanıt verme ve sorunsuz çalışma konuları ele alınmamıştır.
Bazı durumlarda eksik alanları kapsayacak yeni metrikler sunulur. Bazı durumlarda ise en iyi metrikler, sitenize özel olarak uyarlanmış metriklerdir.
Özel metrikler
Burada listelenen performans metrikleri, web'deki çoğu sitenin performans özelliklerini genel olarak anlamak için yararlıdır. Ayrıca, sitelerin performanslarını rakipleriyle karşılaştırabilecekleri ortak bir metrik grubuna sahip olmaları açısından da yararlıdır.
Bununla birlikte, belirli bir sitenin, tam performans görüntüsünü yakalamak için ek metrikler gerektiren bir şekilde benzersiz olduğu zamanlar vardır. Örneğin, LCP metriğinin amacı, bir sayfanın ana içeriğinin yüklenmesi bittiğinde ölçümlemektir. Ancak en büyük öğenin sayfa ana içeriğinin parçası olmadığı ve LCP'yi alakasız hale getirdiği durumlar olabilir.
Bu tür durumları ele almak için Web Performansı Çalışma Grubu, kendi özel metriklerinizi uygulamanız için yararlı olabilecek, standartlaştırılmış alt düzey API'lere de sahiptir:
- User Timing API
- Long Tasks API
- Öğe Zamanlaması API'si
- Gezinme Zamanlaması API'si
- Resource Timing API
- Sunucu zamanlaması
Sitenize özgü performans özelliklerini ölçmek üzere bu API'leri nasıl kullanacağınızı öğrenmek için Özel Metrikler kılavuzunu inceleyin.