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.
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.
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.
Birde Chrome DevTools içerisinde Web Vitals Web için performans parametrelerinin durumunu görebiliriz.
https://www.seroundtable.com/google-chrome-88-core-web-vitals-30800.html
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
