Yeni beklemedeki duyarlılık metriği olan Interaction to Next Paint (INP) için ilk araç desteği grubunu sunmaktan heyecan duyuyoruz. Metriğin kendisi hakkında bilgi edinmek için resmi INP metrik kılavuzunu inceleyin.
Önerilen ölçüm
INP'yi ölçmenin amacı, sayfanızın kullanıcı girişine ne kadar hızlı yanıt verdiğini anlamaktır. Gerçekçi veriler elde etmenin tek yolu, alan verilerini kullanarak sayfanızı sitenizi ziyaret eden gerçek kullanıcılar için nasıl yanıtladığını ölçmektir.
Ardından, INP'yi laboratuvarda ölçmek, etkinlik zamanlamalarını ve optimizasyonların nerede yapılması gerektiğini daha iyi anlamanıza yardımcı olur. Laboratuvar araçları sayfayla otomatik olarak etkileşime geçmez. Bu nedenle, ölçüm sırasında manuel giriş yapılması veya Puppeteer gibi bir otomasyon aracıyla komut dosyası yazılması gerekir. Tipik kullanıcı yolculuklarında temel etkileşimler belirlendiğinde, sorunları tespit etmek için denenebilir veya komut dosyası yazılabilir ve geriye gidişi önlemek için CI testlerine dahil edilebilir.
Gerçek kullanıcılarınızın nelerle karşılaştığını keşfedin (alan verileri)
PageSpeed Insights'ı ziyaret edin
PageSpeed Insights, Chrome Kullanıcı Deneyimi (CrUX) Rapor API'sinden alan verilerini alır ve sayfanızı ve kaynağınızın önceki 28 gün içindeki performansının anlık görüntüsünü sunar. Bu veriler artık INP'yi de içerir:
PageSpeed Insights'ta deneyebilirsiniz.
Alandan kendi INP değerlerinizi toplama
Bir site için INP verilerini kendiniz toplamak istiyorsanız bunu yapmanın en kolay yolu, artık beta sürümünde tam INP desteği bulunan web-vitals kitaplığıdır.
import {onINP} from 'web-vitals';
onINP(({value}) => {
// Log the value to the console, or send it to your analytics provider.
console.log(value);
});
web-vitals ve ölçüm yapma hakkında daha fazla bilgiyi Geliştirici Araçları konsolunda bulabilirsiniz.
Web Vitals Chrome uzantısı
Web Vitals uzantısı, hem kullanıcılarınızın sayfa deneyimine (CrUX API'den) genel bir bakış hem de CWV'nin anlık değerlerini ve sayfaya yapılan mevcut ziyaretin temel metriklerini sağlar.
Chrome için Web Vitals uzantısını yükleyin.
Performans sorunlarını teşhis etme (laboratuvar verileri)
Lighthouse kullanıcı işlemleri akışlarını kullanma
Geliştirici Araçları'ndaki Lighthouse Paneli'nde bulunan yeni zaman aralığı modu, Lighthouse'u başlatmanıza, test sayfanızla istediğiniz şekilde etkileşim kurmanıza ve bu süre zarfında neler olduğuyla ilgili rapor almanıza olanak tanır. Bu raporda artık yanıt verme ile ilgili sorunların teşhis edilmesine yardımcı olacak INP ve bir denetim bulunuyor.
Aynı etkileşim dizisi, Lighthouse kullanıcı akışları kullanılarak otomatikleştirilebilir. INP, Lighthouse 9.6'dan itibaren kullanıcı akışlarında kullanılabilir.
Araç kullanılabilirliğiyle ilgili ayrıntılar
- Chrome Kullanıcı Deneyimi Raporu (CrUX)
- BigQuery: INP,
interaction_to_next_paintolarak kullanılabilir - CrUX API: INP,
interaction_to_next_paintolarak kullanılabilir - CrUX Kontrol Paneli: INP verilerini içerir
- BigQuery: INP,
- PageSpeed Insights
- pagespeed.web.dev: CrUX API'sinden alınan sayfa düzeyindeki ve kaynak düzeyindeki INP alan verileri "Interaction to Next Paint" (Sonraki Boyama İşlemine Kadar Etkileşim) olarak gösterilir.
- PSI API: INP,
INTERACTION_TO_NEXT_PAINT_MSolarak kullanılabilir.
web-vitalsJS kitaplığıweb-vitals, INP desteği içerir
- Web Vitals Chrome uzantısı
- CrUX API'den kullanılabilir olduğunda yerel INP ölçümünü ve INP alan verilerini içerir
- Lighthouse
- DevTools'daki Lighthouse paneli: Chrome Canary (104) sürümünde "zaman aralığı" modunda INP ölçümü kullanılabilir
- Lighthouse npm modülü: INP ölçümü, zaman aralıkları içinde kullanılabilir (sentetik giriş için puppeteer'ı kullanın)
Gelecekteki çalışmalar ve geri bildirim isteği
Chrome araç ekipleri, bundan sonra INP için hata ayıklama özelliklerine ve optimizasyon önerilerine yatırım yapmaya devam edecektir.
Metriğin kullanışlılığıyla ilgili herhangi bir konuda geri bildirimlerinizi, ölçüm kolaylığı açısından lütfen web-vitals-feedback Google grubuna gönderin.