Yeni beklemede olan yanıt verme metriği olan Sonraki Boyamayla Etkileşim (INP) için ilk araç desteği turunu sizlerle paylaşmaktan mutluluk 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, alandan alınan verileri kullanarak sayfanızın, sitenizi ziyaret eden gerçek kullanıcılara nasıl yanıt verdiğini ölçmektir.
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 girmediğinden ölçüm sırasında manuel giriş yapılmalıdır veya Puppeteer gibi bir otomasyon aracıyla komut dosyası oluşturmaları gerekir. Tipik kullanıcı yolculuklarından temel etkileşimler tespit edildiğinde, sorunları tanımlamak veya komut dosyasıyla oluşturmak için bu etkileşimler denenebilir ve regresyonları önlemek için CI testlerine dahil edilebilir.
Gerçek kullanıcılarınızın neler yaşadığını keşfedin (alan verileri)
PageSpeed Insights'ı ziyaret edin
PageSpeed Insights, Chrome Kullanıcı Deneyimi (CrUX) Rapor API'sinden alan verilerini alıp sayfanızın ve kaynağınızın son 28 gün içindeki performansının anlık görüntüsünü sunar. Bu veriler artık INP'yi içeriyor:
PageSpeed Insights'ta deneyin.
Alandan kendi INP değerlerinizi toplayın
Bir site için INP verilerini kendiniz toplamak isterseniz bunun en kolay yolu, beta sürümünde tam INP desteğine sahip olan 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 Verileri Chrome uzantısı
Web Verileri uzantısı, hem kullanıcılarınızın sayfa deneyimine dair genel bir bakış (CrUX API'den) hem de CWV'nin gerçek zamanlı değerlerini ve sayfaya yapılan mevcut ziyaretin temel metriklerini sunar.
Chrome için Web Verileri uzantısını yükleyin.
Performans sorunlarını teşhis edin (laboratuvar verileri)
Lighthouse Kullanıcı Akışlarını Kullanma
Geliştirici Araçları'ndaki Lighthouse Paneli'nde bulunan yeni zaman aralığı modu, Lighthouse'u başlatmanıza, istediğiniz şekilde test sayfanızla etkileşimde bulunmanıza ve bu süre zarfında neler olduğuna dair bir rapor almanıza olanak tanır. Bu raporda artık yanıt verme süresiyle 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.
Aracın 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'den alınan sayfa ve kaynak düzeyindeki INP alanı verilerinin "Sonraki Boyamayla Etkileşim" olarak gösterilmesi
- PSI API: INP
INTERACTION_TO_NEXT_PAINT_MSolarak kullanılabilir
web-vitalsJS kitaplığıweb-vitals, INP desteği içerir
- Web Verileri Chrome uzantısı
- CrUX API'den mevcut olduğunda yerel INP ölçümü ve INP alan verilerini içerir
- Lighthouse
- Geliştirici Araçları'nda Lighthouse paneli: INP ölçümü, Chrome Canary'de (104) "zaman aralığı" modunda kullanılabilir
- Lighthouse npm modülü: Zaman aralıklarında kullanılabilen INP ölçümü (sentetik giriş için kuklacı kullanın)
İleride yapılacak çalışmalar ve geri bildirim isteği
Bundan sonra Chrome araç ekipleri, INP için hata ayıklama özelliklerine ve optimizasyon önerilerine yatırım yapmaya devam edecek.
Metriğin kullanışlılığından ölçüm kolaylığına kadar herhangi bir konuda geri bildiriminiz varsa lütfen web-vitals-feedback Google grubuna gönderin.