Kami senang dapat menyediakan putaran pertama dukungan alat untuk metrik responsivitas yang tertunda yang 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 untuk pengguna sebenarnya yang mengunjungi situs Anda menggunakan data dari lapangan.
Mengukur INP di lab kemudian membantu untuk lebih memahami pengaturan waktu peristiwa dan tempat pengoptimalan perlu dilakukan. Alat lab tidak akan otomatis berinteraksi dengan halaman, sehingga memerlukan input manual saat melakukan pengukuran, atau perlu dibuat skripnya dengan alat otomatisasi seperti Puppeteer. Saat interaksi utama diidentifikasi dari perjalanan pengguna yang biasa, interaksi tersebut dapat dicoba untuk mengidentifikasi masalah atau dibuat skripnya, dan dimasukkan ke dalam pengujian CI untuk mencegah regresi.
Menemukan pengalaman pengguna Anda yang sebenarnya (data kolom)
Kunjungi PageSpeed Insights
PageSpeed Insights mengambil data kolom dari Chrome User Experience (CrUX) Report API, dan memberikan ringkasan performa halaman dan origin Anda selama 28 hari sebelumnya. Data ini sekarang mencakup INP:
Coba di PageSpeed Insights.
Mengumpulkan nilai INP Anda sendiri dari kolom
Jika Anda ingin mengumpulkan data INP sendiri untuk situs, cara termudah untuk melakukannya adalah library web-vitals, yang kini memiliki dukungan INP penuh dalam rilis beta.
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 Web Vitals memberikan ringkasan pengalaman halaman pengguna Anda (dari CrUX API) serta nilai CWV real-time dan metrik utama kunjungan saat ini ke halaman.
Instal ekstensi Web Vitals untuk Chrome.
Mendiagnosis masalah performa (data lab)
Menggunakan Alur Penggunaan Lighthouse
Mode rentang waktu baru di Panel Lighthouse di DevTools memungkinkan Anda memulai Lighthouse, berinteraksi dengan halaman pengujian sesuai keinginan, lalu mendapatkan laporan tentang apa yang terjadi selama waktu tersebut. Laporan ini kini mencakup INP dan audit untuk membantu mendiagnosis masalah responsivitas.
Rangkaian interaksi yang sama dapat diotomatiskan menggunakan alur penggunaan Lighthouse. INP tersedia di alur penggunaan mulai Lighthouse 9.6.
Detail ketersediaan alat
- Laporan Pengalaman Pengguna (CrUX) Chrome
- BigQuery: INP tersedia sebagai
interaction_to_next_paint - CrUX API: INP tersedia sebagai
interaction_to_next_paint - Dasbor CrUX: Mencakup data INP
- BigQuery: INP tersedia sebagai
- PageSpeed Insights
- pagespeed.web.dev: Data kolom INP tingkat halaman dan tingkat origin dari CrUX API ditampilkan sebagai 'Interaction to Next Paint'
- PSI API: INP tersedia sebagai
INTERACTION_TO_NEXT_PAINT_MS
- Library JS
web-vitalsweb-vitalsmenyertakan dukungan INP
- Ekstensi Chrome Web Vitals
- Mencakup pengukuran INP lokal dan data kolom INP jika tersedia dari CrUX API
- Lighthouse
- Panel Lighthouse di DevTools: Pengukuran INP tersedia dalam mode 'jangka waktu' di Chrome Canary (104)
- Modul npm Lighthouse: Pengukuran INP tersedia dalam rentang waktu (gunakan puppeteer untuk input sintetis)
Pekerjaan di masa mendatang dan permintaan 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 sampaikan ke grup Google web-vitals-feedback.