React Performance

Web Vitals Nedir ?

Web Sayfasının veya Uygulamasının kullanıcı deneyimini ölçümlemek için Google tarafından geliştirilen bir dizi metriğe Web Vitals denir. Bu yazıda bu konuya değineceğiz.

3 min readDec 22, 2023

Web Vitals, kullanıcı deneyimini ölçen ve web sitelerinin performansını değerlendiren bir dizi metriktir. Web Vitals,

web sayfalarının hızını,
etkileşimli kullanıcı deneyimini
ve genel performansını

değerlendirmek için kullanılır. Temel amacı, web sayfalarının hızlı, etkileşimli ve kullanıcı dostu olmasını sağlamak ve bu sayede internet kullanıcılarının daha iyi bir deneyim yaşamasını sağlamaktır.

Web Vitals Metrikleri

LCP (Largest Contentful Paint): Sayfa yüklenirken görünen en büyük içeriğin boyutunu ölçer ve bu içeriğin ne kadar sürede görüntülendiğini belirler. Kullanıcıların sayfanın tamamen yüklenmiş gibi hissetmelerini sağlar. Bu sürenin

2.5s altında olması iyi,
2.5s–4s arası geliştirme gereksinimi
4s fazla olması kötü bir durumu işaret eder

FID (First Input Delay): İlk etkileşimli html elemanı (düğme, link vb.) tıklandığında geçen süreyi ölçer. Bu, kullanıcıların bir sayfa üzerindeki etkileşimlere ne kadar hızlı tepki verilebildiğini gösterir.

100ms altında olması iyi
100ms — 300ms arası geliştirme gereksinimi
300ms fazla olması kötü bir durumu işaret eder.

CLS (Cumulative Layout Shift): Sayfanın yüklendiği süre içinde, kullanıcının sayfa üzerindeki içeriğe olan etkileşimi sırasında oluşan layout değişikliklerini ölçer.

Kullanıcıların istenmeyen şekilde içerikle etkileşime girmesini önler ve sayfanın istenmeyen şekilde kaymasını(shift) etmesini engeller.

0.1 altında olması iyi
0.1–0.25 arasında geliştirme gereksimi
0.25 fazla olması kötü durumu işaret eder.

Ekstra: Web Vitals ile ayrıntılı bilgi edinmek https://web.dev/articles/vitals sitesindeni inceleyin.

Time to First Byte (TTFB): tarayıcının bir isteği sunucuya göndermesi ile, sunucudan ilk bayt verinin geri gelmesi arasında geçen süredir. İstek → Sunucu → İlk cevap bu sürenin ölçümüdür
Total Blocking Time (TBT) : bir web sayfası yüklenirken kullanıcının etkileşimde bulunamayacağı (yani tıklayamayıp, kaydıramadığı) toplam süreyi ölçer. Sayfa yüklenirken uzun süren işler (mesela büyük bir JavaScript dosyası çalışıyorsa) tarayıcıyı bloklar.
Interaction Next Paint (INP) : bir kullanıcının bir şeyle (tıklama, klavye, dokunma gibi) etkileşim kurduğu an ile, bu etkileşimin sonucunda ekranda bir değişimin (paint) görünmesi arasındaki süreyi ölçer. Kullanıcı bir şey yapar → Tarayıcı işler → Görüntü değişir

Ben kendi projelerimde bu tarz Web Vitals ölçümleri için Chrome extension faydalanıyorum.

LearnReactUI.dev sitesinde bu extension çalıştırarak sonuçları analiz ettim.

Yukarıda görüleceği gibi her türlü metrik istenen limitlerin içerisindedir. Fakat aynı durum CSR yani Client Side Rendering olarak sitelerde biraz daha zor olabilmektedir.

Web Vitals, web geliştiricilere ve site sahiplerine, sayfalarını kullanıcı dostu ve hızlı bir şekilde optimize etmeleri konusunda rehberlik etmek için kullanılır. Bu metrikler, web sitelerinin performansını izlemek ve iyileştirmek için kullanılan araçlar ve servislerle entegre edilebilir. Örneğin CRA (Create React App) ile Performans ölçümü konusuna nasıl eklendiğini aşağıdaki linkten erişebilirsiniz.