Bilmen gereken her şey

SEO alanında çok sayıda kısaltma mevcut.

SEO'dan FID'e ve INP'ye kadar sayfa hızı söz konusu olduğunda karşılaşacağınız en yaygın faktörlerden bazıları şunlardı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, kullanıcı yolculuğu boyunca bir sayfanın genel etkileşim gecikmesini temsil etmek üzere tasarlanmış yeni bir Temel Web Vitals metriğidir.

Ö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 İlk Giriş Gecikmesi veya FID arasındaki temel fark, 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?

Google'a göre iyi bir INP değeri 200 milisaniye veya daha azdır. Aşağıdaki eşiklere sahiptir:

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 CrUX adı verilen Chrome Kullanıcı Deneyimi Raporu'na gönderilir ve bu rapor, performans verilerini bir araya getirerek alan verileri olarak bilinen gerçek dünyadaki kullanıcı deneyimlerine ilişkin içgörüler sağlar.

Yüksek INP'lere Neden Olan Yaygın Nedenler Nelerdir?

Yüksek INP'lerin altında yatan nedenleri anlamak, web sitenizin performansını optimize etmek için çok önemlidir. İşte yaygın nedenler:

• Ana iş parçacığını bloke edebilen ve kullanıcı etkileşimlerini geciktirebilen uzun görevler.
• Yukarıdaki örnek videoda gördüğümüz gibi, tıklama olaylarında senkron olay dinleyicileri.
• 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, CWV ölçümlerinin nasıl ölçüleceğine dair rehberimizi okuyun ve orada sunulan sorun giderme tekniklerini deneyin. Ancak bu yine de yüksek INP'ye neden olan etkileşimleri bulmanıza yardımcı olmazsa, Chrome (veya daha iyisi Canary) tarayıcısının “Performans” raporu burada 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ğ sekmesi.
• Mobil emülatörü seçin.
• Tıkla 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.

İşte tüm süreci gösteren bir video rehberi. Makaleyi okurken deneyim kazanmak için bunu denemenizi şiddetle tavsiye ederim.

Videoda gördüğümüz şey, uzun görevlerin etkileşimin daha uzun sürmesine neden olduğu ve bu görevlerden sorumlu JavaScript dosyalarının bir listesi.

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?

Google Analytics 4, izleme pikselleri, Google re-captcha veya AdSense reklamları gibi analitik komut dosyaları genellikle yüksek komut dosyası değerlendirme süresine neden olur ve bu da TBT'ye katkıda bulunur.

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.

Bunlara içeriğinizi optimize etmek, yüksek kaliteli geri bağlantılar oluşturmak, meta etiketlerini ve açıklamalarını geliştirmek, yapılandırılmış verileri kullanmak, site mimarisini iyileştirmek, tarama hatalarını gidermek ve daha birçok şey dahildir.

Daha fazla kaynak:

---

Öne Çıkan Görsel: BestForBest/Shutterstock