Kami sangat senang memiliki dukungan alat putaran pertama untuk metrik responsivitas baru yang tertunda, Interaction to Next Paint (INP). Untuk mempelajari metrik itu sendiri, lihat panduan metrik INP resmi.
Pengukuran yang disarankan
Tujuan mengukur 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 kolom.
Mengukur INP di lab akan membantu memahami waktu peristiwa dan tempat pengoptimalan perlu dilakukan. Alat lab tidak akan berinteraksi dengan halaman secara otomatis, sehingga memerlukan input manual saat mengukur, atau perlu dibuatkan skrip dengan alat otomatisasi seperti Puppeteer. Saat interaksi utama diidentifikasi dari perjalanan pengguna yang umum, interaksi tersebut dapat dicoba untuk mengidentifikasi masalah atau dibuatkan skrip, dan dimasukkan dalam pengujian CI untuk mencegah regresi.
Menemukan pengalaman pengguna sebenarnya (data kolom)
Buka PageSpeed Insights
PageSpeed Insights mengambil data kolom dari Chrome User Experience (CrUX) Report API, dan memberikan snapshot performa halaman dan asal Anda selama 28 hari sebelumnya. Data ini kini menyertakan INP:
Coba di PageSpeed Insights.
Mengumpulkan nilai INP Anda sendiri dari kolom
Jika Anda ingin mengumpulkan data INP untuk situs sendiri, cara termudah untuk melakukannya adalah menggunakan 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 lebih lanjut tentang web-vitals dan cara mengukur di konsol DevTools.
Ekstensi Chrome Web Vitals
Ekstensi Data Web memberikan ringkasan pengalaman halaman pengguna (dari CrUX API) dan nilai real-time CWV serta metrik utama kunjungan saat ini ke halaman.
Instal ekstensi Web Vitals 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 sesuai keinginan, lalu mendapatkan laporan tentang apa yang terjadi selama waktu tersebut. Laporan ini kini menyertakan INP dan audit untuk membantu mendiagnosis masalah responsivitas.
Serangkaian interaksi yang sama dapat diotomatiskan menggunakan alur pengguna Lighthouse. INP tersedia dalam alur pengguna mulai 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: Menyertakan data INP
- BigQuery: INP tersedia sebagai
- PageSpeed Insights
- pagespeed.web.dev: Data kolom INP tingkat halaman dan tingkat asal dari CrUX API ditampilkan sebagai 'Interaction to Next Paint'
- PSI API: INP tersedia sebagai
INTERACTION_TO_NEXT_PAINT_MS
web-vitalsLibrary JSweb-vitalsmenyertakan dukungan INP
- Ekstensi Chrome Web Vitals
- Menyertakan pengukuran INP lokal dan data kolom INP jika tersedia dari CrUX API
- Lighthouse
- Panel Lighthouse di DevTools: Pengukuran INP tersedia dalam mode 'rentang waktu' di Chrome Canary (104)
- Modul npm Lighthouse: Pengukuran INP tersedia dalam rentang waktu (gunakan puppeteer untuk input sintetis)
Pekerjaan 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, sampaikan masukan tersebut ke grup Google web-vitals-feedback.