Interaksi ke Next Paint kini merupakan metrik Core Web Vital yang stabil, menggantikan Penundaan Input Pertama.
Hari inilah saatnya! Setelah bertahun-tahun bekerja, kami akhirnya siap untuk menjadikan Interaction to Next Paint (INP) sebagai metrik Core Web Vital yang stabil. Hal ini menandai langkah besar yang signifikan dalam cara kami mengukur responsivitas interaksi, yang mengatasi banyak kelemahan pada Penundaan Input Pertama (FID).
Dalam postingan ini, kami akan secara singkat merangkum apa yang sebenarnya berubah saat ini, menetapkan linimasa yang lebih spesifik untuk menghentikan penggunaan dan menghapus FID dari alat Chrome, serta membagikan beberapa referensi untuk membantu Anda menemukan dan memperbaiki masalah INP.
Yang berubah hari ini
Di sisi Chrome, semua alat Core Web Vitals kami kini akan mencerminkan status stabil INP jika berlaku. Misalnya, alat seperti PageSpeed Insights, Dasbor CrUX, dan ekstensi Web Vitals akan menampilkan INP dengan lebih jelas pada trio metrik Core Web Vitals. Khususnya di PageSpeed Insights, logika penilaian Core Web Vitals akan mengevaluasi performa INP, bukan FID. Untuk mempelajari lebih lanjut perubahan terkait pada Search Console, lihat postingan blog tim Penelusuran.
Selain itu, mulai hari ini, beberapa alat mungkin menampilkan pemberitahuan penghentian penggunaan untuk FID sebagai peringatan bahwa metrik tersebut tidak lagi menjadi Core Web Vital dan akan dihapus. Bagian linimasa penghentian penggunaan FID berikut membahas tanggal-tanggal yang perlu diketahui untuk memastikan bahwa Anda sepenuhnya beralih dari FID.
Linimasa penghentian penggunaan FID
Setelah INP menggantikan FID sebagai metrik Core Web Vital, Chrome secara resmi menghentikan dukungan untuk FID. Artinya, alat Chrome tidak akan lagi menjamin ketersediaan FID dan developer memiliki waktu hingga 9 September 2024 untuk bertransisi ke INP.
Hal ini terutama penting bagi konsumen Chrome User Experience Report (CrUX) atau PageSpeed Insights API. Aplikasi yang memproses data FID dari salah satu API ini harus dialihkan ke INP paling lambat tanggal 9 September untuk menghindari kerusakan atau gangguan dalam layanan. Untuk lebih jelasnya, perubahan ini akan menyebabkan gangguan pada versi API terbaru, dan tidak akan peningkatan dalam jumlah versi utama.
Referensi untuk mengoptimalkan INP
Terlepas dari apakah Anda melihat INP untuk pertama kalinya atau adalah seorang profesional di bidang responsivitas, koleksi referensi pengoptimalan INP adalah titik awal yang tepat untuk menemukan apa yang Anda cari. Koleksi dokumen yang selalu aktual ini mencakup segala sesuatu mulai dari definisi metrik itu sendiri, teknik untuk mengukurnya secara lokal dan dengan pengguna nyata, saran praktis untuk mengoptimalkan berbagai kasus penggunaan, dan daftar studi kasus di dunia nyata yang menunjukkan panduan dalam penerapannya.
Dengan menggunakan dokumen ini, berikut adalah alur kerja umum yang dapat Anda ikuti untuk menemukan dan memperbaiki masalah INP di situs Anda:
Pelajari cara INP mengukur responsivitas terhadap interaksi pengguna dalam dokumen INP kanonis.
Lihat data pengguna nyata untuk menilai performa INP situs Anda. Setidaknya 75% pengalaman INP harus merespons input pengguna dalam waktu kurang dari 200 milidetik agar dianggap baik. Jika situs Anda sudah memiliki INP yang bagus, jangan khawatir!
Colokkan URL Anda ke PageSpeed Insights atau lihat laporan Core Web Vitals di Search Console, jika situs Anda disertakan dalam set data CrUX.
Hubungi penyedia analisis Anda apakah mereka mendukung pemantauan INP.
Jalankan solusi INP Anda sendiri menggunakan web-vitals.js.
Jika diperlukan, instrumentasikan situs Anda untuk mengumpulkan informasi diagnostik tentang pengalaman pengguna. Ini adalah metadata penting seperti elemen halaman mana yang berinteraksi dengan pengguna dan alasan halamannya lambat, serta data berguna lainnya. Secara keseluruhan, informasi ini akan membantu Anda memahami peluang perbaikan terbesar.
Reproduksi interaksi yang lambat secara lokal dengan Chrome DevTools. Hal ini akan membantu Anda melihat secara persis apa yang terjadi di balik layar dan kode yang melanggar.
Optimalkan kode Anda untuk melakukan pekerjaan sesedikit mungkin saat menangani interaksi pengguna:
Ukur perubahan secara lokal dan pantau pengalaman pengguna nyata Anda untuk memastikan performa INP berjalan (dan tetap) dengan cepat.
Semoga panduan ini menempatkan Anda di jalur yang tepat untuk mengoptimalkan INP. Jika mengalami masalah selama menyelesaikan pelatihan, Anda selalu bisa mendapatkan bantuan dengan memposting pertanyaan yang diberi tag interaction-to-next-paint di Stack Overflow.
Peluncuran INP sebagai Core Web Vital telah lama dilakukan, lihat kembali postingan pertama kami tentang cara membangun metrik responsivitas yang lebih baik pada tahun 2021. Sejak saat itu, kami telah mempertimbangkan semua masukan dari komunitas yang luar biasa, dan mengembangkan metrik yang kami yakini akan memandu developer untuk meningkatkan kualitas pengalaman pengguna yang kurang terlayani, yang pada akhirnya akan menghasilkan web yang lebih baik. Terima kasih atas bantuan Anda dalam membentuk metrik ini, dan semua kerja keras Anda untuk meningkatkan responsivitas!