Google web sitelerini sıralamak için önemli web verilerini de sıralama faktörü olarak kullanıyor. Arama motoru kısa bir süre evvel INP ismiyle duyurduğu bir sayda deneyimi ölçüm metriğini duyurdu. Bu metrik web sayfasındaki yanıt sürecini ölçen deneysel odaklı bir metrik olarak nitelendirilebilir. Temel olarak web sayfasının bir kullanıcı etkileşimine ne kadar hızlı yanıt sağladığını ortaya koyar.
Kullanıcı deneyimini izlemek ve değerlendirmek isteyen uzmanlar için Interaction to Next Paint metriği kritiktir.
Interaction to Next Paint olarak da bilinen INP, bir web sayfasının genel performansını analiz etmede kullanılan metriklerden biridir. Bu metrik web sayfalarının etkileşimini nasıl deneyimlediklerini gösteren bir puan sistemi olarak açıklanabilir.
Google 2023 yılı içinde Core Web Vitals güncellemesi yaptı. Bu da kullanıcı deneyiminin Google gözünde ne kadar önemli bir sıralama sinyali olduğunu gösterdi. Google 2024 Mart ayından itibaren INP güncellemesine gidecek. Bu noktada 2024 Mart’tan itibaren geçerli olacak şekilde web sayfalarının yanıt verme süresini ölçmede kullanılan temel bir web vitals metriği olarak INP ortaya çıkacak ve FID’in yerini alacak.
Henüz çok yeni bir metrik olduğu için bu yazıda INP nedir sorusunu açıkladık. Ardından ölçümü nasıl yapacağınızı, optimizasyon süreçlerinde neler yapmanız gerektiğini de ele alalım.
INP (Interaction to Next Paint) Nasıl Çalışır?
INP belirli bir web sayfasında yer alan tüm etkileşimler içindeki en uzun yanıt süresine sahip olan etkileşimin belirlenmesi mantığıyla çalışır. Sayfadaki en uzun yanıt süresine sahip etkileşim belirlenir ve INP skoru olarak kabul edilir.
Bir web sayfasında toplam etkileşim sayısı 50’den düşükse yukarıda anlattığımız süreç dikkate alınır. Burada etkileşimi nelerin tetiklediğini de bilmek gerekir. Masaüstü cihazlarda ziyaretçi fareyle bir butona tıklarsa etkileşim tetiklenebilir. Aynı zamanda mobil cihazlarda ürün görseline dokunma ya da klavyede bir tuşa basıldığında etkileşim tetiklenmesi olur.
Web sayfasında bir etkileşim tetiklemesi sonrasında işleyici kullanıcı girdisi olan durumu işleme alır ve tetiklenen kodlar hemen arka plan da çalışır. Daha sonra CPU birimi tarafından bu kodlar işlenir. Ardından bir sonuç ortaya çıkar. Daha sonra dönen sonuç render edilir ve sonra sonuç ön yüze yansır. Bu sayede bir kullanıcı başarılı bir şekilde etkileşimi gerçekleştirmiş olur.
INP’nin önemi bir etkileşimin gecikme durumunu ölçmek adına etkileşim sürecinin toplamda kaç milisaniyede tamamladığını belirlemektir. Ayrıca bu metrik mevcut etkileşimin en uzun etkileşim olup olmadığını belirlemeye çalışır.
Etkileşime Sahip Sayfalarda INP Nasıl Çalışır?
INP çalışma sistemi çok fazla etkileşime sahip olan sayfalarda farklı çalışmaktadır. Etkileşim olarak kabul edilebilecek çok fazla alanın yer aldığı web sayfalarında daha farklı dinamikler dikkate alınır. 50 ve üzerinde etkileşimin aynı oturumda tetiklenmiş olduğu sayfalar varsa sunucu kesintisi ve anlık bağlantı hataları gibi durumlar etkileşim sürelerini olumsuz etkileyebilir.
Bir engel yokken 250 milisaniye gecikme süresi olan bir etkileşimde anlık bağlantı hatalarına bağlı olarak 1600 milisaniye gecikme süresi olursa burada INP değeri 1600 milisaniye olarak kabul edilecektir. Ancak bu değerlendirme gerçekçi bir sonuç değildir.
INP algoritması bu tarz yanlış skorları engellemek için her 50 etkileşimde 1 kez en yüksek gecikmeye sahip etkileşimi yok sayar. Özetle 50 etkileşim tetiklendiğinde 49 etkileşim, 100 etkileşimde 98 etkileşim üzerinden INP skoru ortaya çıkar. Oyun siteler, borsa ve kripto para sitelerinde fiyat grafiği olan sayfalar ve online editör araçlarında çok sayıda etkileşim tetiklenebilir.
Interaction to Next Paint nedir?
INP Metriği Hangi Kullanıcı Etkileşimlerini Kapsar?
Bir web sayfasında INP skor ölçümü yapılırken belirli kullanıcı etkileşimleri dikkate alınmaktadır. Google’ın paylaştığı veriler ışığında INP skoruna dahil edilen etkileşimler bellidir.
Google’a göre fare ile gerçekleşen tıklama, mobilde dokunmatik ekranlara yapılan vuruş, fiziksel ya da ekran klavyesindeki tuş vuruşları INP metriğini hesaplarken dikkate alınan etkileşimlerdir.
Bazı etkileşim türlerinin de kesin olarak INP skor hesaplamasına dahil edilmediği biliniyor. Fare imleci kullanarak sayfada gezinme, dokunmatik ekran ya da fare ile yapılan kaydırma hareketleri INP hesaplarken kullanılan etkileşim türleri değildir.
Bir klavyede “boşluk”, “pageup”, “pagedown” tuşları kullanılarak yapılan kaydırma hareketleri INP skorunu hesaplamada kullanılan farklı olayların tetiklenmesine yol açabilir. Bu INP puanını etkileyen bir durum ortaya çıkarabilir. Ancak bu tetiklenmelerden başka klavye tuşları kullanılarak yapılan kaydırma hareketleri INP skoruna dahil edilmez.
INP, kullancıların etkileşiminden sonra sayfanın ne kadar hızlı yanıt verdiğini ölçümlemektedir. Bu değeri belirlerken kullanılan kullanıcı etkileşimlerini detaylı olarak açıklayalım;
Tıklama Etkileşimi
Bir kullanıcı web sayfasında bulunan buton ya da linke tıkladığında INP tarafından etkileşim ölçülür. Kullanıcı bir butona tıkar ve menünün açılmasını beklerse INP tıklamadan hemen sonra yanıt olma durumuna bakar.
Kaydırma Etkileşimi
Web sitenizi ziyaret eden kullanıcıların sayfayı kaydırma hızı da kullanıcı deneyiminde kilit bir roldedir. INP kullanıcının bir kaydırma işlemini yapmasından sonra sayfanın tepki verme hızını dikkate almaktadır.
Tuş Vuruş Etkileşimleri
Form doldurma ya da arama çubuğunda yazma gibi bazı hareketlerde tuş vuruşlarına hızlı yanıt verilmesi gerekir. INP metriği tuş vuruşlarına olan yanıtların hızını ve verimliliğini dikkate alır.
INP’nin Kullanıcı Deneyimine Etkisi Nedir?
Google başta olmak üzere arama motorlarının önemli bir bölümü kullanıcı deneyimini merkeze koyuyor. Birçok Google güncellemesi kullanıcı deneyimini geliştirmeye odaklanıyor. 2020 yılında Google Core Web Vitals’ı duyurdu. Bu tarihten sonra artık web siteleri kullanıcı deneyimi metriklerine göre ağırlıklı sıralanmaya başladılar.
COre Web Vitals ilk ortaya çıktığı andan itibaren 2024 yılı gelene kadar LPS, CLS ve FID olarak isimlendirilen üç temel metrik sıralama faktörü olarak dikkate alındı. Söz konusu metrikler yükleme hızı, görsel kararlılık ve etkileşim olarak web sitesinde kullanıcı deneyiminin en kritik üç yönünü ortaya koydu. Ama kullanıcı deneyimini daha iyi yerlere getirmek için FID metriğinin içinde olan etkişeşim yönünün daha detaylı ve nitelikli analiz edilmesi çok önemli bir başlık olarak Google’ın önünde duruyordu.
Google bunu öne çıkarmak için kullanıcı deneyimi etkileşimini daha kapsamlı analiz edebilmek adına INP metriğini duyurdu. Bu metriğin temel noktası FID gibi etkileşimi sadece giriş gecikmesiyle ölçmüyor. Etkileşimin ilk başladığı andan itibaren tarayıcının bir sonraki adımına kadar geçen sürenin tamamını ölçüyor. Bu özelliği sayesinde daha verimli ve nitelikli analizler ortaya çıkmasına yardımcı oluyor.
INP metriği ortaya çıktığı andan itibaren Core Web Witals’ın odaklandığı noktalar arasında bulunan etkileşim kavramı daha önemli hale geldi. Bir web sitesi için artık kaliteli etkileşim ortaya çıkması için kullanıcılara gönderilen görsel geri bildirim dikkate alınıyor. Bu yüzden de Core Web Vitals kapsamında site hızı optimizasyonu yapan uzmanlar görsel yanıtı hızlandıracak web siteleri oluşturmalıdır.
Bir ziyaretçi gözünden süreci inceleyecek olursak daha hızlı ve stabil web deneyimi yaşayabilirler. Aynı zamanda işlevselliğin merkezde olduğu, daha kısa süre bekledikleri ve daha kullanılabilir web siteleriyle vakit geçirerek internetteki zamanlarını daha verimli ve kaliteli hale getirebilecekler.
Interaction to Next Paint (INP) ile First Input Delay (FID) Arasındaki Farklar Nelerdir?
INP’nin FID’tan farkı etkileşimde dikkate aldıkları durumlarla ilgilidir. FID isimli metriğin kullanıcı tarafından tetiklenen ilk etkileşimi dikkate almaktadır. INP metriği ise web sayfasındaki tüm etkileşimleri dikkate almaktadır. Bu noktada INP metriği FID metriğine göre daha gerçekçi sonuçlar ve veriler ortaya çıkarır.
INP aynı zamanda FID metriğinden daha kapsamlı çıktılar ortaya çıkarır. FID metriği kendi başına etkileşimde sadece Input Delay sürecini temsil etmektedir. INP metriği ise etkileşimde Input Delay, Processing Time, Presentation Delay süreçlerinin hepsini temsil etmektedir.
FID metriği kullanıcı deneyimi açısından sınırlılıklar barındırır. Bu noktada daha bütünsel ve gerçekçi bir yaklaşım için INP metriği kullanıcı deneyimini değerlendirmede daha nesneldir. Bir oturumda tüm kullanıcı etkileşimleri analiz edildiğinde herhangi bir anda yaşanan yavaş etkileşimin yakalanabilmesi INP’yi avantajlı hale getirir.
INP Metriği Ne Zaman FID’nin Yerini Alacak?
Uzmanlar kullanıcı deneyiminde INP’nin etkisi ne zaman görülecek ve INP ne zaman FID metriğinin yerini alacak merak ediyorlar. Google’ın yaptığı belge paylaşımlarından yola çıkarak INP metriğinin Mart 2024 tarihinden sonra FID metriğinin yerine kullanılmaya başlayacağıdır.
Google’ın bu yılın mart ayından itibaren Google Search Console panelinde yer alan Önemli Web Verileri raporu içindeki FID metriğinin kaldırmasını ve bunun yerine INP metriğini eklemesi beklenmektedir.
Google Search Console panelinize giriş yaparsanız Önemli Web Verileri raporunda hem FID hem de INP metriklerini inceleyebilirsiniz. Uzmanların Core Web Vİtals denetimlerinden sorunsuz geçmesi için INP skorunu 2024 Mart ayına kadar iyileştirecek optimizasyonlar yapmaları gerekiyor.
INP’nin Pagespeed İçindeki Payı Ne Kadar Olacak?
INP aktif olarak kullanılmaya başladığında Google Pagespeed skorunda önemli bir yer edinecektir. Bu yüzden de ideal INP değerinin ortay acıkması gerekir. Bir web sayfasında toplam kullanıcı etkileşimlerinin %75’i 200 milisaniyeden kısa olmalıdır.
200 milisaniyeden daha düşük INP skoru olan web sayfalarında sayfa yanıt verme süresi iyi olarak değerlendirilir. 200-500 milisaniye arasındaki INP skorlarında sayfa yanıt verme süresi mutlaka geliştirilmelidir. 500 milisaniyeden uzun olan INP skorunda sayfa yanıt verme süresi yetersiz kabul edilir ve kullanıcı deneyimini olumsuz etkilediği düşünülür.
INP Nasıl Hesaplanır?
INP hesaplaması yapılabilmesi için kullanıcıların INP raporunda kabule dilecek bir etkileşimi tetiklemesi lazım. Bu etkileşimlerden biri tetiklenirse sonraki adımlarda eylemin gitmesi ve kullanıcıya sonucun gösterilmesi arka planda bazı adımlarla olur. Bu süreçlerde yaşanan gecikmelerin tamamı toplanır ve milisaniye cinsinden bir INP skoru ortaya çıkar.
Bir etkileşimin tetiklenmesi ve sonraki işlemin yapılması arasında tarayıcı tarafından arka planda yürütülen süreçler vardır. Bu süreçlerden ilki Blocking Tasks sürecidir. Ana iş parçacığında bir görev çalışması sırasında bu görev bitene kadar farklı bir görev veya input işleme alınmaz. Bu gecikme Input Detay ismiyle bilinir. Gecikmeye neden olan durumlar ise Blocking Tasks olarak ifade edilir.
Diğer bir süreç ise tıklama ve dokunma gibi kullanıcı girdilerinin işleme alınma süresi olan Input Delay’dır. Bu gecikme Blocking Tasks ile ilişkilidir. Uzun bir görevin tarayıcı tarafından işlenirse giriş gecikmesi de uzar.
Tarayıcının yerine getirdiği işlemlerden biri kullanıcı girdisi olan durumun işleyicilerce işleme alınmasından sonra Javascript kodlarının arka planda çalıştırılmasıdır. Ön yüzdeki güncellemeler bu aşamada derlenir ve sonuç ortaya çıkar. Bu işlem Processing Time olarak da isimlendirilir.
Tarayıcıların son işlemi geriye döndürülen sonuçta render edilme ve ön yüzde güncellenerek gösterime sokulmasıdır. Bu süreç Presentation Delay olarak nitelendirilir.
Bu sürçeler içinde milisaniye olarak nitelendirilebilecek bazı gecikmeler ortaya çıkabilir. INP skoru işe bu gecikmelerin süresinin toplanmasıyla ortaya çıkar. Giriş gecikmesi, işleme süresi ve sunum gecikmesi milisaniye cinsinden toplandığında INP skoru ortaya çıkar.
Mesela bir kullanıcının ürün yorumunu görmek için Review sayfasına tıkladığını düşünelim. Burada Input Delay süresinin 30 milisaniye, Processing Time süresinin 110 saniye ve Presentation Delay süresinin 45 saniye olduğunu düşünelim. Bu etkileşim sonunda INP skoru 185 milisaniye olarak hesaplanmış olur.
INP Nasıl Ölçülür?
INP ölçümü yapabileceğiniz birkaç farklı yöntem bulunuyor. Öncelikle bu ölçümü Web Page Test ile yapabilirsiniz. Aynı zamanda Google performans testi aracı olan Pagespeed Insight ve Lighthouse gibi web performans araçları ile ölçebilirsiniz. Google’ın geliştirdiği bu araçlar bir web sayfasına ait INO ve diğer Core Web Vitals verilerini elde etmenize yardımcı olur.
inp optimizasyonu
INP Optimizasyonu Nasıl Yapılır?
INP skorunuzu optimize etmek istiyorsanız ilk olarak saha verilerini kullanın ve en yavaş etkileşimleri belirleyin. Daha sonra bu etkileşimler hakkında detaylı bilgiler edinin. En yavaş etkileşimleri hangi sayfa türlerinde görüyorsunuz buna bakın.
Öncelikle INP skoru yetersiz olan sayfalarda çalışmaya başlayın. Birden fazla sayfa türünde problem varsa daha çok trafik çektiğiniz sayfa türüne odaklanabilirsiniz.
Web sitenizde INP skorunu düşüren farklı nedenler olabilir. Bu noktada problemleri bulup ortadan kaldırabilirsiniz.
Genel bir INP optimizasyonu nasıl yapılır bunu ele alacağız;
Giriş Gecikmelerini Optimize Edin
Bir etkileşimde Input Delay olarak da bilinen giriş gecikmesi temel noktadır. Kullanıcı etkileşimi başlatacak hamleyi yaptığı an işleyiciler milisaniye düzeyinde gecikerek çalışacaktır. Bu gecikmeyi optimize ederseniz etkileşimin bütçe süresi kısalır ve direkt INP skoru olumlu etkilenir.
FID metriğinde ideal giriş gecikmesi 100 milisaniye olurken INP skorunda en yüksek 200 milisaniyedir. Giriş gecikmesini optimize ederken çok çalışmaları yapabilirsiniz;
- JavaScript’te kullanılması söz konusu olan setTimeout ve setInterval fonksiyonlarını optimize etmelisiniz. SetTİmeout işlevini çok yaygın çalıştırmanızsanız INP skorunu olumlu etkileyebilir.
- Uzun görevleri optimize ederek giriş gecikmesini azaltabilirsiniz. Uzun görevler süreci uzun süre meşgul eder ve kullanıcı girişinin işlenme süresini uzatır. Bu nedenle daha uzun görevleri daha kısa görevlere bölebilir ve görevdeki iş miktarını azaltabilirsiniz.
- Kullanıcılar kısa süre içinde birden fazla etkileşimi ettiklerinde etkileşimde çatışma olur ve giriş gecikir. Bu yüzden etkileşim çakışmalarını ortadan kaldıracak stratejiler geliştirin.
Processing Time’ı Geliştirin
Bir web sayfasının INP skorunu Processing Time sürecini geliştirerek de optimize edebilirsiniz. Bu sürecin en hızlı şekilde tamamlanması olay geri çağrılarını optimize ederek mümkün olabilir. Bunun için bir etkileşim tetiklenmesinden sonra çalışmayacak olan kod parçalarının doğru zamanda ve doğru sırayla gerçekleşmesi sağlanmalıdır.
Processing Time optimizasyonu için şu adımları izleyebilirsiniz
- Web sayfanızda yer alan gereksiz kodları direkt kaldırın ve iş yükünü azaltın.
- Görsel geri bildirim sağlamayan tüm görevleri erteleyebilirsiniz. Görsel geri bildirimi sağlayan tüm kodları önceliklendirin ve diğer kodların görevlerini erteleyin.
- Web sayfanızı tasarlarken Javascript kodlarının DOM üzerinde düzen değişikliğine gitmesi ve tarayıcıda ögelerin konum ve boyutlarını hesaplayamaması olan Layout Thrashing problemlerini takip edin. Bu problem web sayfasını yavaş yükletir ve kullanıcı etkileşimini geciktirir.
Presentation Delay Sürecini Geliştirin
Bir kullanıcının etkileşime girmesi için son adım sunum gecikmesi olarak bilinen Presentation Delay olmaktadır. Bu süreyi de optimize etmek INP ölçümü sonucunda puanınızı geliştirecektir.
Presentation Delay sürecini geliştirmek için şu adımları izleyebilirsiniz;
- Web sitenizdeki DOM boyutu site boyutu arttıkça yükselir. Bekleme süresini azaltmak için DOM boyutlarını küçültebilirsiniz.
- Ekran dışında bulunan ögelerin işlenme sürecini bir CSS özelliği olan content-visibility ile erteleyebilirsiniz. Bu sayfanın daha hızlı yüklenmesine katkıda bulunur ve direkt INP skorunu iyileştirir.
- Web sayfanızdaki ResizeObserver’ı geri çağrılarını erteleyerek çok fazla elemanı izlemeyi ortadan kaldırır ve sistemin yükünü azaltabilirsiniz.
INP optimizasyonu konusunda bilgi almak ve INP skorunuzu iyileştirecek çözümler bulmak için hemen bizimle iletişime geçebilirsiniz.