Web Vitals & Performans

İdeal bir sayfa deneyiminde sayfanın kısa süre içerisinde açılmasını bekleriz. Sayfa içeriğinden dolayı bu süre uzayabilir ve kullanıcı tarafında sayfanın geç yüklenmesine sebep olur. Bu durum kullanıcının sayfada geçirdiği sürenin azalmasına ve potansiyel kullanıcı kaybınada sebep olmaktadır.

Kullanıcılara sunulan deneyim çok önemlidir. Uygulamaların hızlı , performanslı olması ve arama motorlarının üst sıralarında gözükmesi kullanıcı açısından önemlidir. Google’ın kullanıcı deneyimini merkez alan yaklaşımı ile sayfa deneyimini ve sayfa sıralamasını iyileştirmek için dikkat edilmesi gereken faktörler belirlemiştir.

Optimizasyon için önemli faktörler:

• Mobil uyumluluk (Mobile Friendly)
• HTTPS Güvenliği (HTTPS Security)
• Geçiş Reklamları (No Instrutive Interstitials)
• Web Vitals

Sayfanın mobile uyumlu, optimize edilmiş olması, veri alışverişi güvenliğini sağlanıyor olması yani kullanıcıların site içerisinde güvenli gezinebilmesi ve sayfanın güvenli olduğunu belirtmek için önemlidir. Geçiş reklamlarınında kullanıcı açısından kötü bir deneyime sebep olmaması gerekmektedir.

Web vitals nedir ? neden kullanıyoruz?

İyi bir sayfa deneyimi için performans kritik bir faktördür. Web vitals, Google tarafından geliştirilmiş web site performansını, kullanıcı deneyimini ve etkileşimini ölçmek için kullanılan metriklerdir. Google bu metrikleri kullanıcı memnuniyetine göre analiz ederek belirlemiştir.

Web vitals Metrikleri:

• Larget Content Paint - LCP
• First Input Delay - FID
• Cumulative Layout Shift - CLS
• First Contentful Point - FCP
• Total Blocking Time - TBT
• Speed Index - SI

Larget Content Paint - LCP

Sayfanın yüklenme hızını temsil etmektedir. İyi bir deneyim elde etmek için sayfanın 2.5 sn altında yüklenmesi gerekmektedir. Sayfanın en büyük içeriğinin yüklenme değeridir.

LCP için neler yapabiliriz?

• Görsellerin optimize edilmesi ve modern görsel formatlarının kullanımı(webp)
• Sunucu yanıt sürelerinin iyileştirilmesi (api cevap süresi)
• CDN ve Önbellek kullanımı
• Preconnect, DNS-Prefetch gibi yöntemlerin kullanımı,
• CSS ve JS dosyalarının optimize edilip sıkıştırılması.
• Daha düşük görseller tercih edilebilir.

First Input Delay - FID

Etkileşimi temsil etmektedir. İyi bir deneyim elde etmek için, etkileşimin yanıt süresinin 100ms’in altında olması gerekmektedir. Örnek ile açıklamak gerekirse, kullanıcın bir butona tıkladığında tarayıcının verdiği yanıt verdiği süredir.CSS ve JS dosyalarının optimize edilip sıkıştırılması çözüm olucaktır.

Cumulative Layout Shift - CLS

Sayfanın görsel kararlılığını temsil etmektedir. Kullanıcıların, sayfadaki yerleşim değişiklikleriyle ne sıklıkla karşılaştığını ölçmektedir. İyi bir deneyim için 0.1 altında olması gerekmektedir. Bunun için görsel alanlarının width ve height alanlarının tanımlaması ve place holder alanlarının oluşturulması gerekiyor.

First Contentful Point - FCP

Sayfanın yüklenmeye başladığı andan, sayfada görüntülenen ilk içeriğe kadar geçen süreyi ölçer. İyi bir deneyim elde etmek için 1.8’in altında yüklenmesi gerekmektedir.

Total Blocking Time - TBT

Sayfanın yüklenmesi sırasında, kullanıcı girdilerine yanıt verilmeyen süreyi ölçer. İyi bir deneyim için etkileşim 200ms’in altında olması gerekmektedir.

Speed Index - SI

Kullanıcıların, sayfayı ne kadar süre içerisinde gördüğünü ölçümleyen metriktir. Ekranın görünen kısmı için bu ölçüm değeri geçerlidir. İyi bir deneyim için 3.4s’in altında olmalıdır.

Metrik ölçüm araçları:

Gerçek kullanıcı verileri üzerinden elde edilen saha verileri için:

• PageSpeed Insights
• Google Search Console

Laboratuvar verileri için:

• Lighthouse
• Chrome DevTools
• Chrome Ux Report

Tarayıcı üzerinden yapılan testleri tarayıcı üzerinde bulunan extensionlar etkileyebilir.

Okuduğun için teşekkürler 💐

Web Vitals

Elif