Yeni beklemedeki duyarlılık metriği olan Interaction to Next Paint (INP) için ilk araç desteği grubunu sunmaktan heyecan duyuyoruz. Metrik hakkında bilgi edinmek için resmi INP metrik kılavuzuna göz atın.
Ö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 sitenin INP verilerini kendiniz toplamak istiyorsanız bunu yapmanın en kolay yolu, beta sürümünde artık tam INP desteği sunan 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);
});
hakkında daha fazla bilgi edinin ve DevTools konsolunda nasıl ölçüm yapacağınızı öğrenin.web-vitals
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
DevTools'daki Lighthouse panelinde bulunan yeni zaman aralığı modu, Lighthouse'u başlatmanıza, test sayfanızla istediğiniz şekilde etkileşime geçmenize ve ardından bu süre zarfında neler olduğuna dair bir rapor almanıza olanak tanır. Bu rapor artık INP'yi ve yanıt verme sorunlarını teşhis etmeye yardımcı olacak bir denetimi içeriyor.
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.
Metriklerin yararlılığı ve ölçüm kolaylığı gibi konularda geri bildiriminiz varsa lütfen web-vitals-feedback Google grubuna bildirin.