Sonraki Paint ile Etkileşim (INP): Tam Teknik Kılavuz ve Optimizasyon Standardı

Next Paint ile Etkileşim (INP), web sayfalarının genel arayüz duyarlılığını değerlendirmek için tanıtılan resmi bir Google Core Web Vital ölçümüdür.

Yalnızca sayfa yükleme sırasındaki ilk etkileşimi değerlendiren İlk Giriş Gecikmesi'nden (FID) farklı olarak INP, bir kullanıcının bir sayfayı ziyaretinin tüm ömrü boyunca meydana gelen tüm kullanıcı etkileşimlerinin (tıklamalar, dokunmalar ve klavye girişleri) gecikmesini gözlemler.

Cevap-İlk Özet

Next Paint ile Etkileşim (INP), bir kullanıcının bir sayfayla etkileşime girmesinden (tıklama, dokunma veya bir tuşa basma) tarayıcının güncellenmiş görsel çerçeveyi ekrana sunmasına kadar geçen süreyi ölçen bir Core Web Vital ölçümüdür.INP gecikmesi üç alt bölümden oluşur: Giriş Gecikmesi, İşleme Süresi ve Sunum Gecikmesi.Geçer INP puanı, gerçek kullanıcı ziyaretlerinin 75. yüzdelik diliminde 200 milisaniye veya daha azdır.Mart 2024'te INP, Google'ın arama sıralama algoritmalarında resmi olarak İlk Giriş Gecikmesinin (FID) yerini aldı.

INP Puan Eşikleri ve Derecelendirme Ölçeği

Duyarlı bir kullanıcı deneyimi sağlamak için web sayfalarının, gerçek kullanıcı saha ziyaretlerinin 75. yüzdelik diliminde değerlendirilen INP için aşağıdaki Önemli Web Verileri eşiklerini karşılaması gerekir:

İyi: $\le 200\text {ms} $ (Yeşil) - Kullanıcılara anında hissettiren hızlı, akıcı kullanıcı arayüzü yanıtı.
İyileştirme Gerekiyor: $> 200\text {ms} $ ve $\le 500\text {ms} $ (Sarı) - Kullanıcı etkileşimini etkileyen, tıklama veya dokunma sırasında gözle görülür gecikme.
Kötü: $> 500\text {ms} $ (Kırmızı) - Kullanıcının hayal kırıklığına uğramasına ve yüksek hemen çıkma oranlarına yol açan şiddetli arayüz donması ve ana iş parçacığının engellenmesi.

INP Gecikmesi	Performans Değerlendirmesi	Kullanıcı Deneyimi Etkisi	Google Arama Sıralaması Durumu
$\le 200\text {ms} $	İyi	Dokunduğunuzda veya tıkladığınızda anında görsel geri bildirim.	Önemli Web Verileri değerlendirmesi için tam geçme notu.
$201\text {ms} - 500\text {ms} $	İyileştirme Gerekiyor	Gecikmeli etkileşimler;Kullanıcı arayüzü durumunu güncellerken gözle görülür gecikme.	Rekabetçi anahtar kelimelerde sıralama cezaları yaşanabilir.
$> 500\text {ms} $	Kötü	Yanıt vermeyen düğmeler, donmuş kullanıcı arayüzü ve ana iş parçacığı kilitlenmeleri.	Önemli Web Verileri değerlendirmesinde başarısız olunması;aktif sıralama cezası.

INP Etkileşim Gecikmesinin Üç Bileşeni

Bir kullanıcı bir web sayfasındaki bir öğeyle etkileşime girdiğinde, INP tarafından ölçülen toplam etkileşim gecikmesi üç ardışık aşamadan oluşur:

Giriş Gecikmesi: Kullanıcının fiziksel etkileşimi başlatması (tıklama, dokunma veya tuşa basma) ile tarayıcının ana iş parçacığının ilgili olay işleyicilerini yürütmeye başlaması arasında geçen süre.Giriş gecikmesi öncelikle sayfa yükleme veya bileşenin yeniden oluşturulması sırasında çalıştırılan uzun arka plan JavaScript görevlerinden kaynaklanan ana iş parçacığı tıkanıklığından kaynaklanır.
İşleme Süresi: Söz konusu etkileşim için tüm kayıtlı olay dinleyicilerinde (onclick , onkeydown veya çerçeve reaktif durum güncelleme işleyicileri gibi) JavaScript kodunu yürütmek için harcanan süre.
Sunum Gecikmesi: Olay işleyicileri tamamlandıktan sonra tarayıcının stil yeniden hesaplamasını, yerleşimini, güncellenen pikselleri boyamasını ve bir sonraki görsel çerçeveyi kullanıcının ekran donanımında görüntülemesini tamamlaması için geçen süre.

Matematiksel olarak tek bir etkileşim için toplam INP gecikmesi şu şekilde ifade edilir:

$$\text{INP Gecikmesi} = \text{Giriş Gecikmesi} + \text{İşlem Süresi} + \text{Sunum Gecikmesi}$$

Google, Mart 2024'te Neden FID'yi INP ile Değiştirdi?

İlk Giriş Gecikmesi (FID), yalnızca sayfadaki ilk etkileşimin giriş gecikmesi bileşenini ölçtü.FID, ana iş parçacığı engellemenin ilk etkileşimi engellediği sayfaların belirlenmesine yardımcı olsa da iki önemli teknik sınırlamadan muzdaripti:

Tek Etkileşim Kapsamı: FID, sayfa yüklendikten sonra sonraki tüm kullanıcı etkileşimlerini yok sayarak, karmaşık tek sayfalı uygulama (SPA) istemci tarafında gezinme sırasındaki yavaşlamayı yakalayamadı.
Eksik Gecikme Ölçümü: FID, işlem süresini ve sunum gecikmesini tamamen göz ardı ederek yalnızca giriş gecikmesini ölçtü.Yürütülmesi 2.000 ms süren bir olay işleyicisi, ilk giriş gecikmesi 50 ms'nin altındaysa geçer bir FID puanı aldı.

Mart 2024'te Google, resmi Core Web Vital sıralama faktörü olarak resmi olarak FID'yi INP ile değiştirdi.INP, bir oturum sırasındaki tüm etkileşimlerin yüzde 75'ini değerlendirerek, modern web uygulamalarında gerçek kullanıcı deneyiminin çok daha kapsamlı ve gerçekçi bir değerlendirmesini sağlar.

Nitelikli Kullanıcı Etkileşimleri ve Nitelikli Olmayan Etkinlikler

INP, kullanıcının anında görsel geri bildirim beklediği ayrı kullanıcı etkileşimlerini ölçer.Hangi etkileşimlerin INP'ye dahil olduğunu anlamak, teşhis profili oluşturmak için önemlidir:

Ölçülen Etkileşimler

Fare Tıklamaları: Düğmelere, bağlantılara, form kontrollerine veya özel etkileşimli bileşenlere tıklamak.
Dokunmatik Ekran Dokunmaları: Mobil cihazlar veya tabletlerdeki öğelere dokunma.
Klavye Basımı: Fiziksel veya sanal klavye tuşlarına basmak (örneğin, Enter , Space veya metin girişlerindeki alfasayısal tuşlar).

Ölçülmeyen Olaylar

Kaydırma ve Kaydırma: Bir sayfayı kaydırmak veya bir harita bileşenini kaydırmak INP ölçümünü tetiklemez.
Gezinme: Fare imlecini tıklamadan bir öğenin üzerine taşımak INP'nin dışında bırakılır.
Sayfa Yükleme Animasyonları: Kullanıcı girişi olmadan otomatik olarak tetiklenen CSS animasyonları INP'ye dahil edilmez.

Yüksek INP Puanlarını Optimize Etmek İçin Kanıtlanmış Teknik Stratejiler

INP gecikmesini 200 ms eşiğinin altına indirmek için mühendislik ekipleri aşağıdaki teknik optimizasyonları uygulamalıdır:

Uzun Ana İş Parçacığı Görevlerini Parçalayın: 50 ms'den uzun yürütme görevlerini daha küçük parçalara bölmek için requestIdleCallback() , setTimeout() veya scheduler.yield() kullanın; böylece tarayıcının, görev yürütme blokları arasında gelen kullanıcı girişlerini hemen işlemesine olanak tanır.
Çerçeve Durumu Güncellemelerini Optimize Edin: Vue 3 ve Nuxt 4 uygulamalarında, eşzamansız bileşen sınırlarını veya ertelenmiş reaktif başvuru güncellemelerini kullanarak kritik olmayan kullanıcı arayüzü yeniden oluşturma işlemlerini erteleyin.
Düzenli Harcamaları En Aza İndirin: DOM öğelerini değiştirdikten hemen sonra DOM geometrisi özelliklerini (offsetHeight veya getBoundingClientRect() gibi) okumaktan kaçının; bu, eşzamanlı düzen yeniden hesaplamasını zorlar.
DOM Ağacı Derinliğini Azaltın: Büyük boyutlu DOM ağaçları, sunum gecikmesi sırasında stil hesaplamasını ve düzen maliyetini artırır.Toplam DOM öğesi sayısını sayfa başına 1.500 düğümün altında tutun.
Üçüncü Taraf Komut Dosyalarını Optimize Edin: Ağır üçüncü taraf komut dosyaları (analizler, reklam ağları, müşteri sohbet widget'ları) sıklıkla ana ileti dizisini ele geçirir.Erteleme veya web çalışanı, gerekli olmayan üçüncü taraf komut dosyalarını boşaltır.

SimpleOps ile Sürekli INP İzleme

SimpleOps, sentetik Lighthouse denetimlerinin yanı sıra Chrome UX Raporu (CrUX) gerçek kullanıcı alanı veri kümesi ölçümlerini yakalayarak INP performansını sürekli olarak izler.SimpleOps web sitenizin yüzde 75'lik INP'si 200 ms'yi aştığında ekibinizi otomatik olarak uyarır ve uygulamanızın hızlı, akıcı ve arama motoru sıralamaları için optimize edilmiş kalmasını sağlar.