SEO Alanında kısaltma sıkıntısı yoktur.
SEO’dan FID’e ve INP’ye kadar – bunlar, söz konusu olduğunda karşılaşacağınız en yaygın olanlardan bazılarıdır.
Karışımda yeni bir ölçüm var: INP, Interaction to Next Paint’in kısaltmasıdır. Sayfanın belirli kullanıcı etkileşimlerine nasıl yanıt verdiğini ifade eder ve Google Chrome’un laboratuvar verileri ve saha verileriyle ölçülür.
Interaction To Next Paint Tam Olarak Nedir?
Sonraki Boyaya Etkileşim veya INP yeni bir Temel Web Vitals metriği Kullanıcı yolculuğu boyunca bir sayfanın genel etkileşim gecikmesini temsil etmek üzere tasarlanmıştır.
Örneğin, Sepete ekle Bir ürün sayfasındaki düğmeye basıldığında, düğmenin görsel durumunun güncellenmesinin (örneğin tıklandığında düğmenin renginin değişmesi) ne kadar sürdüğünü ölçer.
Tamamlanması uzun zaman alan yoğun scriptler çalıştırıyorsanız, bu durum sayfanın geçici olarak donmasına neden olabilir ve INP metriğini olumsuz etkileyebilir.
İşte örnek video resimleme Gerçek hayatta nasıl görünüyor:
İlk butonun görsel olarak anında tepki verdiğini, ikinci butonun görsel durumunu güncellemesinin ise birkaç saniye sürdüğünü fark edin.
INP, FID’den Nasıl Farklıdır?
INP ile arasındaki temel fark İlk Giriş Gecikmesi veya FID, FID’nin yalnızca sayfadaki ilk etkileşimi dikkate almasıdır. Yalnızca giriş gecikmesi ölçümünü ölçer ve tarayıcının etkileşime yanıt vermesinin ne kadar sürdüğünü dikkate almaz.
Buna karşılık, INP tüm sayfa etkileşimlerini dikkate alır ve tarayıcıların bunları işlemesi için gereken süreyi ölçer. Ancak INP, aşağıdaki etkileşim türlerini hesaba katar:
- Etkileşimli bir öğenin herhangi bir fare tıklaması.
- Dokunmatik ekrana sahip herhangi bir cihazda etkileşimli bir öğeye yapılan herhangi bir dokunuş.
- Fiziksel veya ekran klavyesindeki bir tuşa basılması.
İyi Bir INP Değeri Nedir?
Buna göre Google iyi bir INP değeri 200 milisaniye veya daha azdır. Aşağıdaki eşiklere sahiptir:
| Eşik değeri | Tanım |
| 200 | İyi yanıt verme yeteneği. |
| 200 milisaniyenin üstünde ve 500 milisaniyeye kadar | Orta düzeyde ve geliştirilmeye ihtiyacı var. |
| 500 milisaniyenin üstünde | Zayıf tepki verme. |
Google ayrıca INP’nin hala deneysel olduğunu ve bu metrikle ilgili önerdiği rehberliğin muhtemelen değişeceğini belirtiyor.
INP Nasıl Ölçülür?
Google, bir kullanıcının sayfayı ziyaret ettiğinde gerçekleşen en uzun etkileşimlerin bir örneğinden, Chrome tarayıcılarından INP’yi anonim olarak ölçer.
Her etkileşimin birkaç aşaması vardır: sunum süresi, işlem süresi ve giriş gecikmesi. İlişkili olayların geri çağrısı, üç aşamanın da yürütülmesi için gereken toplam süreyi içerir.
Bir sayfanın toplam etkileşim sayısı 50’den azsa, INP en kötü gecikmeye sahip etkileşimi dikkate alır; 50’den fazla etkileşim varsa, 50 etkileşim başına en uzun etkileşimleri yok sayar.
Kullanıcı sayfadan ayrıldığında, bu ölçümler daha sonra Chrome Kullanıcı Deneyimi Raporu’na gönderilir. CrUX Gerçek dünyadaki kullanıcı deneyimlerine ilişkin içgörüler sağlamak için performans verilerini bir araya getiren, saha verileri olarak bilinen bir araçtır.
Yüksek INP’lere Neden Olan Yaygın Nedenler Nelerdir?
Yüksek INP’lerin altında yatan nedenleri anlamak çok önemlidir web sitenizin performansını optimize etme İşte yaygın nedenler:
- Ana iş parçacığını bloke edebilen ve kullanıcı etkileşimlerini geciktirebilen uzun görevler.
- DOM’da yapılan değişiklikler, genellikle DOM boyutu çok büyük olduğunda (> 1.500 HTML öğesi) meydana gelen birden fazla yeniden akış ve yeniden boyama işlemine neden olur.
INP Sorunları Nasıl Giderilir?
Öncelikle, rehberimizi okuyun CWV nasıl ölçülür metrikleri kullanın ve orada sunulan sorun giderme tekniklerini deneyin. Ancak bu hala yüksek INP’ye neden olan etkileşimleri bulmanıza yardımcı olmazsa, Chrome’un tarayıcısı yardımcı olabilir.
- Analiz etmek istediğiniz web sayfasına gidin.
- Tarayıcı eklentileri olmayan Canary tarayıcınızın DevTools’unu açın (genellikle F12 veya Ctrl+Shift+I tuşlarına basarak).
- Şuraya geç: Verim sekmesi.
- Önbelleği devre dışı bırak – Ağ sekmesinde.
- Mobil emülatörü seçin.
- Kayıt düğmesine tıklayın ve sayfa öğeleriyle normalde yaptığınız gibi etkileşime geçin.
- İlginizi çeken etkileşimi yakaladıktan sonra kaydı durdurun.
Ortalama mobil cihazları simüle etmek için “yavaşlatma” açılır menüsünü kullanarak CPU’yu 4 kat azaltın ve kullanıcılar dışarıdayken mobil cihazların %90’ında kullanılan 4G ağını seçin. Bu ayarı değiştirmezseniz simülasyonunuzu mobil cihazlara eşdeğer olmayan PC’nizin güçlü CPU’sunu kullanarak çalıştırırsınız.
Google gerçek kullanıcıların cihazlarından toplanan alan verilerini kullandığı için bu çok önemli bir nüanstır. Güçlü bir cihazla INP sorunlarıyla karşılaşmayabilirsiniz – bu, INP’yi hata ayıklamayı zorlaştıran zor bir noktadır. Bu ayarları seçerek, emülatörünüzün durumunu gerçek cihazın durumuna mümkün olduğunca yakın hale getirirsiniz.
Eğer genişletirseniz Etkileşimler bölümünde, söz konusu etkileşimle ilişkili uzun görevin ayrıntılı bir dökümünü görebilir ve bu betik URL’lerine tıklamak, kodunuzu optimize etmek için kullanabileceğiniz gecikmeden sorumlu JavaScript kod satırlarını açacaktır.
Toplam 321 ms uzunluğundaki etkileşim şunlardan oluşur:
- Giriş gecikmesi: 207 ms.
- İşlem süresi: 102 ms.
- Sunum gecikmesi: 12 ms.
Ana iş parçacığı zaman çizelgesinin altında, uzun görevin toplam süresini temsil eden uzun kırmızı bir çubuk göreceksiniz.
Uzun kırmızı görev çubuğunun altında, uzun görevin temel olarak JavaScript yürütülmesinden kaynaklandığını gösteren “Komut Dosyasını Değerlendir” etiketli sarı bir çubuk görebilirsiniz.
İlk ekran görüntüsünde (nokta 1) ile (nokta 2) arasındaki zaman farkı, komut dosyası değerlendirmesi nedeniyle oluşan kırmızı uzun görev nedeniyle oluşan gecikmedir.
Senaryo Değerlendirmesi Nedir?
Komut dosyası değerlendirmesi JavaScript yürütmesi için gerekli bir adımdır. Bu kritik aşamada, tarayıcı kodu satır satır yürütür; bu, değişkenlere değer atamayı, işlevleri tanımlamayı ve olay dinleyicilerini kaydetmeyi içerir.
JavaScript dosyaları yüklenirken, ayrıştırılırken, derlenirken ve değerlendirilirken kullanıcılar kısmen oluşturulmuş bir sayfayla etkileşime girebilir.
Bir kullanıcı bir öğeyle etkileşime girdiğinde (tıklamalar, dokunmalar, vb.) ve tarayıcı etkileşime bağlı bir olay dinleyicisi içeren bir betiği değerlendirme aşamasındaysa, betik değerlendirmesi tamamlanana kadar etkileşimi geciktirebilir.
Bu, olay dinleyicisinin düzgün bir şekilde kaydedilmesini ve etkileşime yanıt verebilmesini sağlar.
Ekran görüntüsünde (nokta 2), 207 ms gecikmenin, tarayıcının tıklama için olay dinleyicisini içeren betiği hala değerlendirme sürecinde olmasından kaynaklandığı düşünülmektedir.
İşte bu noktada, uzun görevlerin (50 ms’den uzun) sayfa etkileşimli hale gelene kadar ana iş parçacığını engellediği toplam zaman miktarını ölçen Toplam Engelleme Süresi (TBT) devreye giriyor.
Eğer bu süre uzunsa ve kullanıcılar sayfa açılır açılmaz web sitesiyle etkileşime girerse, tarayıcı kullanıcı etkileşimine hızlı bir şekilde yanıt veremeyebilir.
CWV metriklerinin bir parçası değildir ancak sıklıkla yüksek INP’lerle ilişkilidir. Bu nedenle, INP metriği için optimizasyon yapmak amacıyla TBT’nizi düşürmeyi hedeflemelisiniz.
Yüksek TBT’ye Neden Olan Yaygın JavaScript’ler Hangileridir?
Analitik betikler – örneğin Google Analitik 4 izleme pikselleri, Google re-captcha veya AdSense reklamları – genellikle yüksek komut dosyası değerlendirme süresine neden olur ve bu nedenle TBT’ye katkıda bulunur.
Reklamların ve analiz komut dosyalarının yüksek JavaScript yürütme süresine neden olduğu bir web sitesi örneği.TBT’yi azaltmak için uygulayabileceğiniz bir strateji, ilk sayfa içeriğinin yüklenmesi tamamlanana kadar gerekli olmayan komut dosyalarının yüklenmesini geciktirmektir.
Bir diğer önemli nokta ise, scriptleri geciktirirken kullanıcı deneyimi üzerindeki etkilerine göre önceliklendirmenin önemli olmasıdır. Kritik scriptler (örneğin, önemli etkileşimler için gerekli olanlar) daha az kritik olanlardan daha erken yüklenmelidir.
INP’nizi İyileştirmek Tek Bir Kurşun Değildir
INP’nizi iyileştirmenin anında SEO başarısını garantileyen tek başına bir çözüm olmadığını unutmamak önemlidir.
Bunun yerine, genel SEO performansınızda fark yaratmaya yardımcı olabilecek bir dizi kaliteli değişikliğin parçası olarak tamamlanması gereken birçok maddeden biridir.
0 Yorumlar