Core Web Vitals

Interaction To Next Paint Nedir? FID Yerine INP Geliyor, Core Web Vitals Metrik Güncellemesi

Hosting Fiyatları

Interaction to Next Paint (INP), web sitenizin kullanıcı etkileşimlerine ne kadar hızlı yanıt verdiğini ölçmek için Google tarafından sunulan yeni bir web performans metriğidir. Mart 2024’ten itibaren, Google sıralamalarını etkileyen Temel Web Vitals metriklerinden biri olarak First Input Delay’ın (FID) yerini alacaktır.

Interaction To Next Paint Nedir?

Mükemmel pantolonu bulmak için bir online mağazaya göz attığınızı düşünün. Resimlerin, ürün açıklamasının ve ek seçeneklerin bulunduğu bir ürün sayfasını görüntülüyorsunuz. Siyah rengi beğendiğiniz için bu seçeneği seçiyorsunuz. Sayfadaki görseller, istediğiniz ürünü siyah renkte gösterecek şekilde otomatik olarak güncelleniyor. Artık memnun olduğunuza göre sepete ekle butonuna tıklıyorsunuz. Bu, yeni eklediğiniz ürünü gösteren bir minicart açılır penceresini tetikler.

Yukarıdaki deneyim temel olarak Interaction to Next Paint’in (INP) ne anlama geldiğini özetlemektedir. INP metriği, bir web sayfasının eylemlerinize ne kadar hızlı yanıt verdiğini ölçer. Başka bir deyişle, bir tıklama ile sayfa içeriğindeki değişiklik (“next paint”) arasında geçen süredir.

Peki INP tarafından ölçülen kullanıcı eylemleri nelerdir? INP’de sadece aşağıdaki etkileşim türleri gözlemlenir:

  • Fare ile tıklama.
  • Dokunmatik ekranlı bir cihaza dokunmak.
  • Fiziksel ya da ekran klavyesinde bir tuşa basmak.
  • Gezinme ve kaydırma eylemleri sayılmaz.

First Input Delay (FID) Nedir?

First Input Delay Nedir (FID)? FID Performansı Nasıl İyileştirilir?
First Input Delay Nedir (FID)? FID Performansı Nasıl İyileştirilir?

First Input Delay (FID), bir web sitesinin veya web uygulamasının yanıt verebilirliğini ölçmek için kullanılan bir metriktir. Bir web sitesinin, bir butona tıklamak veya metin girmek gibi bir kullanıcının ilk etkileşimine yanıt vermesi için geçen süredir. FID milisaniye cinsinden ölçülür ve iyi bir skor genellikle 100 ms’nin altındadır.

Bu metrik, kullanıcı deneyimini doğrudan etkilediği için önemlidir. Düşük bir FID skoru kötü bir kullanıcı deneyimine yol açarak hemen çıkma oranlarının artmasına ve etkileşimin azalmasına neden olabilir, bu nedenle web sitesi sahiplerinin FID’yi izlemesi ve iyileştirmesi çok önemlidir.

INP vs. FID Arasındaki Farklar

INP, bir kullanıcının tüm sayfa ile etkileşime geçmesi için ne kadar süre geçmesi gerektiğine bakar. Genellikle bir kullanıcı etkileşiminden kaynaklanan herhangi bir olayın en kötü gecikmesini dikkate alır. Ancak çok sayıda olay veya etkileşim varsa, Google en uzun etkileşim gecikmelerinin 98. yüzdelik dilimini ölçer.

Bu, yalnızca bir kullanıcı etkileşiminden kaynaklanan ilk yanıt gecikmesini (ilk izlenim) ölçen First Input Delay (FID) ile doğrudan bir zıtlık oluşturur.

Önemli Core Web Vitals Metrikleri

Core Web Vitals, Google tarafından sunulan ve bir web sitesindeki kullanıcı deneyiminin kalitesini ölçmenize yardımcı olmayı amaçlayan bir dizi metriktir. Metrikler, Web Vitals adlı daha büyük bir metrik setinin parçasıdır ve kullanıcı deneyiminin kalitesini ölçmek için en önemli üç metrik olarak tanımlanır.

Üç temel web vitals metriği largest contentful paint, first input delay, ve cumulative layout shift’tir. Bu metrikler web sayfasının yüklenmesini, etkileşimini ve görsel kararlılığını ölçer.

  • Largest Contentful Paint (LCP): Sayfanın ana içeriğinin yüklenme olasılığının algılanan süresi ile yükleme performansını ölçer. Bu süre 2,5 saniyeden az olmalıdır.
  • First Input Delay (FID): Etkileşimi ölçer. Kullanıcının girdi sağlayabilmesi için geçen süre 100 ms’nin altında olmalıdır.
  • Cumulative Layout Shift (CLS): Görsel kararlılığı ölçer. Düzen görsel olarak istikrarlı olmalı ve 0,1’den daha düşük olmalıdır.

Interaction To Next Paint Nasıl Ölçülür?

INP, bir kullanıcının tıklama veya tuşa basma gibi bir eylemi ile sayfadaki bir sonraki görünür değişiklik arasındaki süreyi ölçer. Bu gecikme üç bölümden oluşur:

  • Giriş Gecikmesi: Bu, kullanıcı eylemi ile sayfanın yanıt vermeye başlaması arasında geçen süredir.
  • İşlem Süresi: Sayfanın eylemi işlemesi ve ilgili kod veya komut dosyalarını yürütmesi için geçen süredir.
  • Sunum Gecikmesi: Bu, işlemin tamamlanması ile güncellenen içeriğin görünmesi arasında geçen süredir.

İyi bir INP 200 milisaniyenin altındadır ve hızlı yanıt verebilirlik gösterir. Öte yandan, 500 milisaniyenin üzerindeki bir INP zayıf olarak kabul edilir.

Kaynak: web.dev

Interaction To Next Paint Nasıl Optimize Edilir? 

Aşağıdaki listede INP’yi optimize etmek için kullanabileceğiniz en iyi stratejileri bulabilirsiniz:

1. Web sitesi kodu ve komut dosyalarının profilini çıkarma

Web sitenizin kodunu analiz edin ve üçüncü taraf komut dosyalarını inceleyin. Bu, performans darboğazlarının belirlenmesine yardımcı olur ve web sitenizin kullanıcı eylemlerine daha hızlı yanıt vermesini sağlar.

2. Arka plan işlemeyi azaltmak için Total Blocking Time (TBT) kontrol edin

Total Blocking Time metriği, diğer kodların çalışmasını engelleyebilecek arka plan CPU görevlerinin ne sıklıkta olduğunu izler. Bir arka plan görevi zaten devam ederken kullanıcı sayfayla etkileşime girerse, tarayıcı giriş olayını işlemeden önce bu görevi tamamlar. Arka plan işlemlerini en aza indirmek, INP’nin işlem bileşenini azaltmaya yardımcı olur.

3. Eşzamansız kod yürütme

Hızlı kullanıcı arayüzü güncellemeleri için eşzamansız kod yürütme kullanın. Bu, kullanıcıların belirli görevler devam ederken bile anında güncellemeleri görmesini sağlar.

4. Kod karmaşasını azaltın

Kullanılmayan kodu kaldırmak için kodunuzu gerektiğinde yüklenebilecek daha küçük birimlere ayırmak için kod bölme gibi teknikleri kullanın. Bu, INP’nin girdi gecikmesi kısmını iyileştirmeye yardımcı olur.

5. Kod yürütmeye öncelik verin

E-ticaret web sitenizin kodunu, tarayıcı meşgul olmadığında daha az önemli kod yüklenecek şekilde gözden geçirin. Buna bir örnek, sayfa yüklemesinin ilk 500 ms’sinde gerekli olmayan sohbet widget’larıdır. Bu, çoğunlukla sayfa başlatma aşamasında yürütülen ve genellikle bir sayfanın kullanıcı eylemlerine daha az duyarlı olduğu ana iş parçacığında uzun süreli görevlerin önlenmesine yardımcı olur.

6. Sayfanızın işlenmesini kolaylaştırın

Bu, yalnızca INP’yi değil, genel web sitesi performansınızı iyileştirmek söz konusu olduğunda muhtemelen en etkili ipuçlarından biridir. Büyük DOM boyutlarından, çok fazla veya büyük resimden, çok fazla video veya CSS animasyonundan vb. kaçının. Bu aynı zamanda giriş gecikmesini de en aza indirmeye yardımcı olur.

7. İlerlemeyi ölçün ve takip edin

Interactive to Next Paint (INP) hızınızı artırmak için yukarıdaki stratejileri uygularken, web sitenizin etkileşimini geliştirdiklerinden emin olmak için bu eylemlerin sonuçlarını izlemeniz gerekir. Performans sonuçlarınızı kıyaslamak da rekabette nerede durduğunuzu ve daha fazla iyileştirme gerekip gerekmediğini görebilmeniz için kritik öneme sahiptir.

Server Side Rendering veya Client Side 

SSR tekniği web sayfasını tarayıcı yerine sunucuda işler. Tarayıcı tamamen işlenmiş bir sayfayı indirdiği için yükleme sürelerini ve INP’yi önemli ölçüde azaltabilir. Bu teknik en çok içerik ağırlıklı web siteleri için etkilidir ve arama motorları sunucuda işlenmiş içeriği daha kolay tarayıp dizine ekleyebildiğinden sitenin SEO’sunu iyileştirebilir.

Rendering Düşük INP Değerine Sebep Olur mu?

JavaScript veya CSS dosyaları gibi büyük veya optimize edilmemiş kaynaklar render engellemesine neden olarak kullanıcı etkileşimlerinin gecikmesine ve daha yüksek INP puanlarına yol açabilir.

Gerçek Kullanıcı Verilerinini Kullanarak INP Değerlerini Tespit Etme

Gerçek Kullanıcı İzleme yani Real User Monitoring (RUM), yalnızca web sitenizin INP değerini değil, aynı zamanda hangi kullanıcı etkileşiminin INP değerini etkilediğini ortaya koyan bağlama özgü verileri de sunarak en doğru ve kapsamlı alan verilerini sağlar.

Bu, etkileşimin zamanlaması (sayfa yüklemesi sırasında veya sonrasında), etkileşim türü (tıklama, tuşa basma veya dokunma gibi) ve daha birçok ayrıntıları içerir.

Web siteniz Chrome User Experience Report’a (CrUX) – Chrome Kullanıcı Deneyimi Raporu dahilse, PageSpeed Insights ve Google Search Console Core Web Vitals raporundaki CrUX aracılığıyla INP ve diğer Core Web Vitals için alan verilerine hızlı bir şekilde erişebilirsiniz.

Google PageSpeed Insights size test edilen belirli bir sayfa hakkında bilgi verir (bu sayfa için veri topladıysa). Toplamadıysa, INP hakkında hiçbir bilgi göremeyebilir veya ana sayfa için bilgileri görebilirsiniz.

Google Search Console, sayfaları toplu olarak analiz etmenize ve örneğin ne tür sayfalarda INP sorunları olduğunu öğrenmenize olanak tanır.

Laboratuvar Verisi İle INP Değerleri Tespit Etmek Ne Kadar Sağlıklı?

Laboratuvar testleri özellikle saha verilerinizin yavaş kullanıcı etkileşimlerine işaret ettiği durumlarda faydalıdır. Saha verileri olmasa bile, yavaş kullanıcı etkileşimlerini kontrollü bir ortamda çoğaltmak için stratejiler benimseyebilirsiniz.

Bu yöntemler arasında standart kullanıcı yolculuklarını simüle etmek ve her adımda etkileşimleri test etmek ve web sayfası yüklenirken, genellikle ana iş parçacığının en yoğun olduğu zamanda etkileşimde bulunmak yer alır. Bu stratejiler, önemli kullanıcı deneyimleri sırasında potansiyel yavaş etkileşimleri belirlemek için çok önemlidir.

GSC Üzerinden INP Değerlerini Analiz Etme

Google Search Console’da INP raporunuza erişmek için izleyeceğiniz adımları aşağıda bulabilirsiniz:

1. Google Search Console hesabınızda oturum açın.

2. GSC kontrol panelinden web sitesi mülkünüzü seçin.

3. Sol taraftaki menüden Core Web Vitals bölümüne tıklayın.

4. Hem mobil hem de masaüstü için raporu göreceksiniz. Rapora erişmek için Raporu Aç üzerine tıklayın.

INP raporuna eriştiğinizde, değerli bilgileri gösteren bir tablo bulacaksınız. Bu tabloda sorunun ciddiyeti, sorunun türü, doğrulamanın başlatılıp başlatılmadığı ve etkilenen URL sayısı gibi ayrıntılar yer almaktadır.

GSC’deki INP verilerini incelerken, düşük INP puanlarına sahip belirli sayfaları veya URL’leri belirleyebilirsiniz. GSC, her bir sorunla ilişkili bir grup URL sağlayarak bunlara tıklamanıza ve etkilenen URL’ler hakkında bilgi edinmenize olanak tanır.

‍Raporda INP sorunları tespit ederseniz, hayati bir CWV ölçütü haline geldiği Mart 2024’ten önce INP’yi iyileştirmek için web sitenizi optimize etmeye başlayabilirsiniz.

‍Ancak, herhangi bir INP sorunu tespit edilmezse, Google “INP Sorunu Tespit Edilmedi” ifadesini kullanarak web sitenizin yaklaşan güncellemedeki performansı konusunda size güven verebilir.

INP Değerlerini Optimize Etmek İçin WordPress Eklentileri

WP Rocket, web sitenize anında performans avantajları sağlamak için birçok seçenek içerir. Sayfa önbellekleme ve önbellek ön yüklemesini otomatik olarak etkinleştirmekten GZIP sıkıştırma ve e-ticaret optimizasyonuna kadar, web sitenizin etkinleştirildikten hemen sonra çok hızlı çalışmasını sağlamak için en iyi web performansı uygulamalarının %80’ini uygular.

WP Rocket, etkinleştirildikten sonra en iyi web performansı uygulamalarının çoğunu uygulamanın yanı sıra, tembel yükleme, kullanılmayan CSS’yi kaldırma ve JavaScript’i optimize etme gibi güçlü özellikler de sunar. 

En önemlisi, kullanıcı etkileşimine kadar JS komut dosyalarının yürütülmesini geciktirmek için WP Rocket’in yerleşik özelliğini kullanabilirsiniz. Bu, ilk sayfa yükleme süresini azaltır ve etkileşimi iyileştirir. Ayrıca Largest Contentful Paint (LCP), First Input Delay (FID) ve Interaction to Next Paint (INP) gibi Core Web Vitals ölçümlerini de etkiler.

En İyi, Orta ve En Kötü INP Değeri Nedir? Nasıl Hesaplanır?

INP’yi ölçmenin iki ana yolu vardır: saha araçlarını (gerçek kullanıcı izleme) ve laboratuvar araçlarını (sentetik izleme) kullanmak. Ancak, saha araçları veya gerçek kullanıcı izleme (RUM) daha doğru sonuçlar verir.

RUM, sayfa yükleme süresinin ve bir çerçeve ile etkileşimin nicel bir ölçümünü sağlayarak web siteniz veya uygulamanız ile kullanıcı etkileşimlerini ölçmeye yardımcı olur. Bu yöntem, bir kullanıcı bir sayfaya erişirken küçük bir JavaScript kodu indirdiğinde çalışır. Kod, kullanıcının cihazında çalışır ve sonuçları işlenmek üzere RUM sunucularına gönderir.

Google ayrıca RUM’dan farklı olarak gerçek Chrome kullanıcı deneyimini (CrUX) de ölçmektedir. CrUX, web sitesi trafiğinin 28 günlük kayan penceresiyle ilgili bir veridir ve kullanıcı deneyimiyle ilgili raporları kontrol etmek için bu zaman dilimini değiştiremezsiniz. Veriler her ay için depolanır ve mevcut ayın verileri depolanırken önceki ayın verilerini görebilirsiniz.

Oysa RUM raporları verileri daha kısa sürede kontrol etmenize olanak tanır. Verileri kaydetmek için zaman dilimini ayarlayabilirsiniz, ancak CrUX ve RUM verilerini karşılaştırırken 28 günlük performansa bakmanız önerilir.

INP’yi ölçmenin bir başka yolu da Lighthouse aracılığıyla mevcut oturumu, zaman aralığı modunda ölçmektir. INP’yi ölçmek için Core Web Vital Visualizer veya Google Web Vitals JavaScript Kütüphaneleri de kullanılabilir.

Web sayfalarınızın iyi bir kullanıcı deneyimi sunup sunmadığını kontrol etmek için aşağıdaki değerler dikkate alınmalıdır:

INP 200 milisaniyenin altındaysa veya 200 milisaniyedeyse, sayfanın yanıt verme hızı iyidir. INP 200 ila 500 milisaniye arasındaysa, sayfanın yanıt verme hızının iyileştirilmesi gerekir. INP 500 milisaniyenin üzerindeyse, web sayfasının yanıt verme hızı zayıftır.

Neden FID yerine INP Getirildi?

INP bir web sayfasının kullanıcılar tarafından gerçekleştirilen tüm etkileşimleriyle ilgiliyken, FID (First Input Delay), adından da anlaşılacağı gibi, yalnızca sayfanın ilk etkileşimini dikkate alır. Yani, FID sadece ilk etkileşimin girdisindeki gecikmeyi ölçer ve ne bir sayfanın olay işleyicilerini (tıklama vb.) çalıştırmak için harcadığı zamanı ne de bir sonraki kareyi görüntülemedeki gecikmeyi ölçer.

Interaction to Next Paint (INP) sadece ilk izlenimle ilgili değildir; tüm etkileşimleri örnekler ve ardından web sayfasının yanıt verebilirliğini değerlendirir. Bu da onu FID’den daha kapsamlı ve güvenilir bir Core Web Vital metriği haline getirir.

Domain Sorgulama