Sonraki Boyamayla Etkileşim (INP) aracı desteği

Brendan Kenny

Elizabeth Sweeny

Yeni bekleyen duyarlılık metriği Interaction to Next Paint (INP) için ilk araç desteğini sunmaktan heyecan duyuyoruz. Metriğin kendisi hakkında bilgi edinmek için resmi INP metriği 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, saha verilerini 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şim kurmaz. Bu nedenle, ölçüm yaparken manuel giriş gerektirirler veya Puppeteer gibi bir otomasyon aracıyla komut dosyası oluşturulmaları gerekir. Tipik kullanıcı yolculuklarından önemli etkileşimler belirlendiğinde, sorunları belirlemek için denenebilir veya senaryolaştırılabilir ve gerilemeleri önlemek için CI testlerine dahil edilebilir.

Gerçek kullanıcılarınızın neler deneyimlediğini keşfetme (alan verileri)

PageSpeed Insights'ı ziyaret edin

PageSpeed Insights, alan verilerini Chrome Kullanıcı Deneyimi (CrUX) Raporu API'sinden alır ve sayfanızın ve kaynağınızın son 28 gündeki performansının anlık görüntüsünü verir. Bu veriler artık INP'yi de içeriyor:

PageSpeed Insights'ı deneyin.

INP değerlerinizi sahada toplama

Bir sitenin INP verilerini kendiniz toplamak istiyorsanız bunu yapmanın en kolay yolu, beta sürümünde 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);
});

web-vitals ve Geliştirici Araçları konsolunda nasıl ölçüm yapılacağı hakkında daha fazla bilgi edinin.

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 gerçek zamanlı değerlerini ve sayfaya yapılan mevcut ziyaretin önemli metriklerini sunar.

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 panelinde bulunan yeni zaman aralığı modu, Lighthouse'u başlatmanıza, test sayfanızla dilediğiniz şekilde etkileşim kurmanıza 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 hızıyla ilgili sorunları teşhis etmeye yardımcı olacak bir denetimi içeriyor.

Aynı etkileşim dizisi, Lighthouse kullanıcı işlemleri akışları kullanılarak otomatikleştirilebilir. INP, Lighthouse 9.6'dan itibaren kullanıcı işlemleri akışlarında kullanılabilir.

Araç kullanılabilirliğiyle ilgili ayrıntılar

• Chrome Kullanıcı Deneyimi Raporu (CrUX)
  • BigQuery: INP, interaction_to_next_paint olarak kullanılabilir.
  • CrUX API: INP, interaction_to_next_paint olarak kullanılabilir.
  • CrUX Kontrol Paneli: INP verilerini içerir.
• PageSpeed Insights
  • pagespeed.web.dev: CrUX API'den alınan sayfa düzeyinde ve kaynak düzeyinde INP alan verileri "Interaction to Next Paint" olarak gösterilir.
  • PSI API: INP, INTERACTION_TO_NEXT_PAINT_MS olarak kullanılabilir.
• web-vitals JS kitaplığı
  • web-vitals, INP desteği içerir
• Web Vitals Chrome uzantısı
  • Yerel INP ölçümünü ve CrUX API'den alınabilen INP alan verilerini içerir.
• Lighthouse
  • Geliştirici Araçları'ndaki Lighthouse paneli: Chrome Canary'de (104) "zaman aralığı" modunda INP ölçümü kullanılabilir.
  • Lighthouse npm modülü: Zaman aralıklarında INP ölçümü kullanılabilir (yapay giriş için puppeteer kullanın)

Gelecekteki çalışmalar ve geri bildirim isteği

Chrome araç ekipleri, gelecekte INP için hata ayıklama özellikleri ve optimizasyon önerileri üzerinde çalışmaya devam edecek.

Metriğin kullanışlılığından ölçüm kolaylığına kadar her konuda geri bildiriminiz varsa lütfen web-vitals-feedback Google grubuna iletin.