Dukungan alat Interaction to Next Paint (INP)

Brendan Kenny

Twitter GitHub

Elizabeth Sweeny

Twitter GitHub

Kami senang bisa memiliki putaran pertama dukungan alat untuk metrik responsivitas tertunda baru, Interaction to Next Paint (INP). Untuk mempelajari metrik itu sendiri, lihat panduan metrik INP resmi.

Pengukuran yang disarankan

Tujuan pengukuran INP adalah untuk memahami seberapa cepat halaman Anda merespons input pengguna. Satu-satunya cara untuk mendapatkan data yang realistis adalah dengan mengukur respons halaman Anda terhadap pengguna sungguhan yang mengunjungi situs Anda menggunakan data dari lapangan.

Mengukur INP di lab akan membantu Anda lebih memahami waktu peristiwa dan tempat pengoptimalan perlu dilakukan. Alat lab tidak akan berinteraksi secara otomatis dengan halaman, sehingga memerlukan input manual saat mengukur, atau harus ditulis dengan alat otomatisasi seperti Puppeteer. Ketika interaksi utama diidentifikasi dari perjalanan pengguna yang biasa, interaksi tersebut dapat dicoba untuk mengidentifikasi masalah atau menggunakan skrip, dan melakukan uji CI untuk mencegah regresi.

Catatan: Untuk mempelajari lebih lanjut cara memanfaatkan data lab dan kolom, baca mengapa data lab dan kolom bisa berbeda (dan tindakan yang harus dilakukan terhadap data tersebut).

Mencari tahu pengalaman pengguna Anda yang sebenarnya (data lapangan)

Kunjungi PageSpeed Insights

PageSpeed Insights mengambil data lapangan dari API Laporan Pengalaman Pengguna Chrome (CrUX), dan memberikan ringkasan performa halaman dan origin Anda selama 28 hari sebelumnya. Data ini sekarang menyertakan INP:

Cobalah di PageSpeed Insights.

Kumpulkan nilai INP Anda sendiri dari kolom

Jika Anda ingin mengumpulkan sendiri data INP untuk situs, cara termudah untuk melakukannya adalah library web-vitals, yang kini memiliki dukungan INP penuh dalam rilis betanya.

import {onINP} from 'web-vitals';

onINP(({value}) => {
  // Log the value to the console, or send it to your analytics provider.
  console.log(value);
});

Baca selengkapnya tentang web-vitals dan cara mengukur di konsol DevTools.

Ekstensi Chrome Data Web

Ekstensi Data Web memberikan ringkasan pengalaman halaman pengguna (dari CrUX API) serta nilai real-time CWV dan metrik utama kunjungan halaman saat ini.

Instal ekstensi Data Web untuk Chrome.

Mendiagnosis masalah performa (data lab)

Menggunakan Alur Pengguna Lighthouse

Mode rentang waktu baru di Panel Lighthouse di DevTools memungkinkan Anda memulai Lighthouse, berinteraksi dengan halaman pengujian sesuka Anda, dan kemudian mendapatkan laporan tentang apa yang terjadi selama waktu tersebut. Laporan ini kini mencakup INP dan audit untuk membantu mendiagnosis masalah responsivitas apa pun.

Rangkaian interaksi yang sama dapat diotomatiskan menggunakan alur pengguna Lighthouse. INP tersedia dalam alur pengguna pada Lighthouse 9.6.

Detail ketersediaan alat

• Laporan Pengalaman Pengguna Chrome (CrUX)
  • BigQuery: INP tersedia sebagai interaction_to_next_paint
  • CrUX API: INP tersedia sebagai interaction_to_next_paint
  • Dasbor CrUX: Mencakup data INP
• PageSpeed Insights
  • pagespeed.web.dev: Data kolom INP tingkat halaman dan tingkat asal dari CrUX API muncul sebagai 'Interaction to Next Paint'
  • PSI API: INP tersedia sebagai INTERACTION_TO_NEXT_PAINT_MS
• Library JS web-vitals
  • web-vitals mencakup dukungan INP
• Ekstensi Chrome Data Web
  • Menyertakan pengukuran INP lokal dan data kolom INP jika tersedia dari CrUX API
• Mercusuar
  • Panel Lighthouse di DevTools: Pengukuran INP tersedia dalam mode 'timespan' di Chrome Canary (104)
  • Modul npm Lighthouse: Pengukuran INP tersedia dalam rentang waktu (gunakan puppeteer untuk input sintetis)

Pekerjaan di masa mendatang dan meminta masukan

Ke depannya, tim alat Chrome akan terus berinvestasi dalam kemampuan proses debug dan rekomendasi pengoptimalan untuk INP.

Jika Anda memiliki masukan tentang apa pun mulai dari kegunaan metrik hingga kemudahan pengukuran, harap bawa masukan tersebut ke grup Google web-vitals-feedback.