Cara Mengoptimalkan Interaksi Ke Cat Berikutnya (INP) di WordPress

Interaction to Next Paint (INP) adalah metrik respons halaman web yang mengukur latensi semua interaksi pengguna di halaman. Mengoptimalkan metrik INP situs web Anda memainkan peran penting dalam kecepatan, pengalaman pengguna, dan SEO.

Diumumkan pada tahun 2022 sebagai metrik eksperimental untuk mengatasi banyak keterbatasan metrik First Input Delay (FID), Google menyatakan bahwa INP akan menggantikan FID sebagai metrik Core Web Vital pada bulan Maret 2024.

Posting ini akan mengeksplorasi dasar-dasar INP, mengapa ia menggantikan FID, dan bagaimana Anda dapat mengukur dan meningkatkan metrik INP situs Anda.

Bersemangat? Ayo pergi!

Pentingnya Mengukur Responsivitas Halaman Web

Tidak ada yang menyukai situs web yang lambat (termasuk Google!). Dan tidak ada yang mendorong pengguna meninggalkan situs web Anda lebih cepat daripada situs web yang lambat.

Metrik seperti Largest Contentful Paint (LCP) adalah indikator yang bagus untuk kecepatan memuat halaman—itulah sebabnya ini merupakan metrik Core Web Vitals.

Namun apa yang terjadi setelah halaman dimuat dan pengguna bertahan? LCP tidak mengukur interaktivitas halaman. Sesuai Google, pengguna menghabiskan 90% waktunya di halaman setelah halaman dimuat. Oleh karena itu, mengukur respons halaman sepanjang siklus hidupnya—mulai dari pembukaan hingga penutupan—sangatlah penting.

Situs web dengan kecepatan memuat halaman yang cepat tetapi respons yang buruk tetap saja merupakan situs web yang lambat—akibatnya adalah pengalaman pengguna yang buruk. Misalnya saja membutuhkan waktu lama untuk membuka menu navigasi ponsel atau memperbarui item di keranjang belanja online Anda.

Di situlah pengukuran responsivitas halaman web berperan. Situs web dengan responsivitas yang baik merespons interaksi pengguna dengan cepat. Dan tanggapan ini harus dalam bentuk umpan balik visual.

Bahkan untuk interaksi kompleks yang membutuhkan waktu lebih lama, menyajikan beberapa isyarat visual kepada pengguna (misalnya animasi pemuatan) sangat penting untuk mempertahankan pengalaman pengguna yang luar biasa.

Interaksi ke Cat Berikutnya (INP) vs. Penundaan Input Pertama (FID): Apa Bedanya?

Mengukur pengalaman pengguna suatu halaman web cukup rumit. Anda dapat menggunakan metrik seperti Total Waktu Pemblokiran (TBT) dan Waktu Untuk Interaktif (TTI) untuk mendapatkan gambaran tentang responsivitas laman, namun metrik tersebut tidak menunjukkan pengalaman pengguna yang sebenarnya.

Misalnya, sebuah laman dapat memiliki TBT atau TTI yang cepat namun tetap terasa lamban bagi pengguna karena cara mereka berinteraksi dengannya. Hal yang sama juga berlaku sebaliknya.

Masukkan FID—yang secara langsung mengukur interaksi pertama pengguna di halaman web. Secara khusus, ini mengukur pengalaman pengguna nyata di lapangan.

Batasan Penundaan Input Pertama (FID).

Sesuai dengan namanya, FID hanya mengukur “keterlambatan” respons browser terhadap “input pertama”.

Singkatnya, ini adalah metrik responsivitas pemuatan laman —seberapa cepat kode JavaScript dimuat dan dieksekusi—bukan metrik responsivitas runtime —seberapa cepat laman merespons interaksi pengguna setelah pemuatan laman.

Walaupun kesan pertama itu penting, namun belum tentu memberikan gambaran yang utuh! FID meningkatkan cara kami mengukur respons laman web, namun tidak secara akurat mengukur cara pengguna berinteraksi dengan laman web—mulai dari membuka hingga menutup laman web.

Misalnya, FID tidak mengukur waktu yang dibutuhkan untuk menjalankan event handler pada penundaan dalam menyajikan frame berikutnya.

Apa Interaksi dengan Next Paint (INP)?

INP mengukur respons halaman secara keseluruhan terhadap interaksi pengguna—klik, ketukan, penekanan tombol, dll.

Suatu interaksi dapat mencakup beberapa penangan grup. Misalnya, mengetuk layar sentuh ponsel Anda dapat memulai rangkaian peristiwa di latar belakang halaman. Apa pun yang terjadi, INP adalah latensi terpanjang laman sejak pengguna memulai interaksi hingga saat browser menyajikan frame berikutnya dengan umpan balik visual.

Tidak seperti FID, yang hanya mengukur waktu yang dibutuhkan browser untuk merespons interaksi pertama pengguna, INP mengamati semua interaksi pengguna di halaman dan memberikan skor keseluruhan.

Dengan demikian, INP lebih dari sekadar kesan pertama dan mengambil sampel semua interaksi pengguna, menjadikannya indikator respons halaman yang lebih andal.

Sama seperti FID, skor INP yang rendah berarti respons halaman yang lebih baik terhadap masukan pengguna.

Bagaimana Cara Menghitung INP?

Untuk sebagian besar situs web, metrik INP akhir adalah interaksi terpanjang. Namun, ada beberapa outlier.

Misalnya, jika laman web Anda sebagian besar berisi teks dan gambar, maka tidak akan banyak interaksi pengguna. Namun jika itu adalah halaman dinamis dengan banyak elemen interaktif (misalnya editor teks dan permainan), maka akan ada banyak interaksi. Dalam kasus seperti ini, penundaan yang tidak disengaja dapat menurunkan skor INP laman pada situs yang sangat responsif. Untuk mengatasinya, Polri mengabaikan satu interaksi tertinggi untuk setiap 50 interaksi pengguna.

Sebagian besar halaman memiliki interaksi yang jauh lebih sedikit dari 50, jadi hal ini tidak perlu menjadi perhatian. Selain itu, INP hanya memperhitungkan persentil ke-75 dari semua tampilan halaman, sehingga menghilangkan outlier yang tidak terduga.

Pada akhirnya, skor INP akhir mencerminkan pengalaman sebagian besar pengguna.

Catatan: INP tidak memperhitungkan tindakan melayang dan menggulir. Namun, menggulir dengan keyboard Anda dapat memicu peristiwa yang diukur dengan INP. Apa pun yang terjadi, pengguliran halaman tidak diukur dengan INP. Jika pengguna tidak berinteraksi dengan halaman tersebut, pemuatan halaman tersebut mungkin juga tidak menghasilkan skor INP.

Berapa Skor INP yang Baik?

Pengguna mungkin menjelajahi situs web di berbagai perangkat. Dan setiap situs web bisa menjadi unik. Oleh karena itu, sulit untuk memberi label pada respons situs web sebagai “baik” atau “buruk” berdasarkan satu metrik saja. Namun justru itulah yang ingin dicapai oleh Polri.

Google memiliki grafik yang mudah untuk memastikan apakah situs Anda memiliki skor INP yang baik atau buruk:

• Daya tanggap yang baik: Skor INP di bawah 200 milidetik .
• Perlu peningkatan: Skor INP antara 200 dan 500 milidetik .
• Responsivitas buruk: Skor INP di atas 500 milidetik .

Seperti disebutkan sebelumnya, INP memperhitungkan persentil ke-75 dari seluruh pemuatan halaman yang tercatat, tersebar di desktop dan perangkat seluler.

Cara Mengukur INP

Anda dapat mengukur INP baik di lapangan (data dari pengguna sebenarnya) maupun di laboratorium (data dari alat uji kecepatan).

Mengukur INP Di Lapangan

Ada dua cara untuk mengukur INP di lapangan: Chrome User Experience Report (CrUX) dan Real User Monitoring (RUM).

Data CrUX dikumpulkan dari pengguna browser Chrome yang telah ikut serta. Jika situs web Anda memenuhi syarat untuk evaluasi CrUX, Anda dapat mengukur INP-nya menggunakan alat pengujian kecepatan PageSpeed ​​Insights Google.

Google menggunakan CrUX sebagai kumpulan data resminya untuk mengevaluasi situs web untuk program Core Web Vitals-nya. Namun, jika situs web Anda tidak memenuhi syarat untuk CrUX karena alasan tertentu (terutama pengunjung yang sangat sedikit), maka Anda perlu mengumpulkan data lapangan Anda sendiri dengan menambahkan kode ke situs web Anda. Anda kemudian dapat memasukkan data bidang ini ke penyedia RUM untuk analisis lebih dalam.

Bagi sebagian besar situs web, PageSpeed ​​Insights adalah alat yang cukup baik untuk mengukur INP dan semua metrik Data Web Inti terkait.

Namun, CrUX tidak memberi Anda informasi rinci tentang hasilnya. Jika Anda ingin memahami dan meningkatkan metrik Anda lebih jauh, maka disarankan untuk berinvestasi dalam solusi RUM. Membahas cara menggunakan alat-alat ini berada di luar cakupan artikel ini. Anda dapat melihat Datadog dan New Relic, dua solusi RUM gratis yang populer.

Catatan: Saat mengukur INP, Anda mungkin menemukan perbedaan mencolok antara data di lapangan dan di laboratorium. Idealnya, Anda harus mengumpulkan metrik dari lapangan karena metrik tersebut memberi Anda ukuran tentang pengalaman pengguna sebenarnya. Anda kemudian dapat menggunakan data ini untuk mengoptimalkan INP Anda lebih lanjut. Kami akan membahasnya di bagian selanjutnya.

Mengukur INP Tanpa Data Lapangan

Anda tidak dapat mengukur INP di lab, namun jika Anda tidak dapat mengukur data lapangan karena alasan tertentu—hanya memiliki sedikit pengunjung situs yang memenuhi syarat untuk CrUX atau Anda tidak memiliki cukup sumber daya untuk berinvestasi di RUM—Anda masih dapat meningkatkan potensi skor INP Anda sebesar menemukan interaksi yang lambat di laboratorium.

Catatan: Seperti disebutkan di atas, mengukur INP di laboratorium tidak mungkin dilakukan. Saran di bawah ini hanya memberikan gambaran kasar tentang metrik INP sebenarnya. Anda tidak dapat mengandalkan pengukuran laboratorium untuk memprediksi metrik lapangan seperti INP, karena pengukuran tersebut tidak menyimulasikan cara pengguna sebenarnya menggunakan situs web Anda secara akurat.

Ekstensi browser Chrome Web Vitals adalah cara paling sederhana untuk menguji latensi interaksi pengguna. Setelah mengaktifkannya, uji interaksi umum situs web Anda. Ekstensi akan menampilkan informasi diagnostik terperinci untuk setiap interaksi ke konsol.

Setelah memasang ekstensi, Anda perlu mengidentifikasi alur interaksi pengguna yang umum di laman web Anda dan menguji respons interaksi tersebut satu per satu. Misalnya, mengirimkan formulir atau menambahkan item ke keranjang. Anda dapat mengikuti petunjuk langkah demi langkah web.dev untuk memulai. Ini bukan solusi yang sempurna, namun karena tidak adanya data lapangan, ini merupakan alternatif yang bagus.

Opsi lainnya adalah mengukur metrik Total Waktu Pemblokiran (TBT) situs Anda. Hal ini berkorelasi cukup baik dengan POLRI dan dapat memberikan petunjuk mengenai interaksi yang dapat Anda fokuskan. Dua alat hebat untuk mengukur TBT laman Anda adalah Lighthouse dan PageSpeed ​​Insights.

Namun, perlu diingat bahwa TBT tidak mengukur interaksi lambat setelah halaman dimuat.

Cara Mengoptimalkan Interaksi Ke Cat Berikutnya (INP)

Langkah pertama untuk meningkatkan INP situs web Anda adalah dengan mengidentifikasi interaksinya yang paling lambat. Bagian sebelumnya menyoroti cara mengumpulkan data lapangan untuk mendiagnosis interaksi paling lambat di situs web Anda.

Setelah Anda memahaminya, Anda dapat menganalisis interaksi lambat ini di laboratorium dan menemukan solusi yang sesuai.

Setiap interaksi pengguna terdiri dari tiga fase. Anda dapat melihat fase-fase ini satu per satu untuk mengetahui cara mengoptimalkan latensi interaksi secara keseluruhan.

1. Penundaan Input: Ini dimulai ketika pengguna memulai interaksi dan berakhir ketika panggilan balik peristiwa interaksi mulai berjalan.
2. Waktu Pemrosesan: Waktu yang dibutuhkan untuk menyelesaikan panggilan balik acara.
3. Penundaan Presentasi: Waktu yang dibutuhkan browser untuk memperbarui frame berikutnya dengan umpan balik visual.

Setiap fase interaksi pengguna berkontribusi pada latensi interaksi akhir, dan juga skor INP. Mengetahui cara mengoptimalkan setiap fase adalah kunci untuk mempercepat respons.

Mengoptimalkan Penundaan Masukan

Penundaan input adalah bagian pertama dari setiap interaksi pengguna. Siapa pun yang bermain videogame tahu betapa frustasinya jika ada penundaan input. Hal yang sama berlaku untuk interaksi situs web.

Berdasarkan interaksinya, penundaan input dapat berlangsung dari beberapa milidetik hingga ratusan milidetik. Hal ini dapat disebabkan oleh beberapa alasan: aktivitas thread utama yang sibuk, error, interaksi yang tumpang tindih, dll.

Apa pun alasannya, Anda harus meminimalkan penundaan input agar panggilan balik peristiwa dapat mulai berjalan sesegera mungkin. Berikut tiga cara untuk mengurangi penundaan input:

• Kurangi jumlah sumber daya yang dibutuhkan halaman agar berfungsi penuh.
• Hindari memuat skrip berukuran besar, karena skrip tersebut memerlukan evaluasi skrip yang banyak sumber dayanya oleh browser, sehingga memblokir thread utama. Pertimbangkan untuk memecah skrip Anda menjadi beberapa bagian dan menyebarkannya.
• Sertakan JavaScript sesedikit mungkin dalam kode Anda.

Mengurangi Waktu Pemrosesan Panggilan Balik Acara

Bagian selanjutnya dalam mengoptimalkan skor INP Anda melibatkan pengurangan waktu yang dibutuhkan untuk memproses callback peristiwa interaksi.

Selain mengoptimalkan kode panggilan balik peristiwa, ada beberapa tindakan yang dapat Anda lakukan untuk mengurangi waktu pemrosesan:

• Jangan memblokir thread utama. Bagi tugas-tugas panjang Anda (>50 ms) menjadi tugas-tugas yang lebih kecil.
• Jika Anda menyematkan sesuatu pada halaman Anda, hindari memuatnya saat tidak digunakan. Misalnya, memuat video YouTube tidak efisien jika pengguna tidak bermaksud memutarnya.

Di sinilah WP Rocket, salah satu plugin kinerja WordPress terbaik, bisa sangat membantu. Anda dapat mengaktifkan fitur Ganti iframe YouTube dengan gambar pratinjau untuk mengganti iframe YouTube apa pun dengan gambar mini.

Tag iframe akan memuat dan memutar video hanya setelah pengunjung mengklik thumbnail tersebut. Fitur-fitur canggih WP Rocket dapat meningkatkan waktu pemuatan dan meningkatkan Data Web Inti Anda.

• Hindari skrip pihak ketiga dalam kode Anda. Untuk skrip pihak ketiga yang Anda gunakan, alat seperti Google Pengelola Tag atau Cloudflare Zaraz dapat membantu Anda menyederhanakan pemuatan skrip ini.
• Tunda tugas yang tidak perlu untuk dilakukan nanti secara asinkron. Anda dapat mengaktifkan ini dengan fitur Load JavaScript deferred bawaan WP Rocket.

Thread utama halaman web hanya dapat memproses satu tugas dalam satu waktu di dalam browser. Tugasnya dapat mencakup aktivitas seperti mengurai HTML/CSS, merender halaman, dan menjalankan kode JS. Ketika suatu tugas berjalan dalam jangka waktu yang lama (misalnya, 50 milidetik atau lebih), tugas tersebut akan menghambat semua tugas lainnya, termasuk interaksi pengguna

Dalam beberapa kasus, Anda mungkin menemukan tema atau plugin memperlambat thread utama Anda. Karena Anda tidak memiliki banyak kendali atas kodenya, Anda dapat menghubungi pembuat tema atau plugin untuk menemukan perbaikan yang sesuai.

Dengan memecah tugas-tugas panjang menjadi bagian-bagian yang lebih kecil, Anda membebaskan thread utama untuk mengambil tugas-tugas berprioritas tinggi, yang mencakup interaksi pengguna. Ini menghasilkan situs web yang tajam!

Meminimalkan Keterlambatan Presentasi

Bagian terakhir dari interaksi pengguna adalah penundaan presentasi. Ini adalah waktu antara menyelesaikan panggilan balik acara dan mengecat bingkai berikutnya dengan umpan balik visual.

Biasanya, penundaan presentasi memakan waktu paling sedikit untuk interaksi pengguna. Namun, hal ini dapat ditahan dengan beberapa cara. Berikut beberapa cara untuk meminimalkannya:

• Pertahankan ukuran DOM seminimal mungkin. Tugas rendering halaman ditingkatkan atau diturunkan skalanya bergantung pada ukuran DOM. Memperbarui DOM yang besar untuk setiap interaksi pengguna bisa menjadi sangat mahal bagi browser. Selain itu, DOM yang besar memerlukan lebih banyak waktu untuk merender status pertama laman. Lihat panduan ukuran DOM praktis kami untuk detail lebih lanjut.
• Render elemen di luar layar dengan malas. Jika sebagian besar konten halaman Anda tidak terlihat oleh pengguna saat halaman dimuat, rendering elemen di luar layar secara lambat dapat memungkinkan interaksi yang lebih cepat dengan konten di layar. Anda dapat menggunakan properti visibilitas konten CSS untuk mencapai hal ini dengan mudah tanpa menambahkan kode atau plugin tambahan apa pun.
• Hindari merender HTML menggunakan JavaScript. Browser mengurai dan merender HTML secara optimal untuk memberikan pengalaman pengguna terbaik. Menggunakan JS untuk merender bagian HTML boleh saja, dan merupakan bagian integral dari sebagian besar interaksi pengguna. Namun, merender sebagian besar HTML dengan JS akan berdampak signifikan pada performa rendering situs web Anda, termasuk penundaan presentasi untuk interaksi pengguna.

Meningkatkan Skor INP Situs Web Anda dengan WP Rocket

WP Rocket menyertakan banyak opsi untuk memberikan manfaat kinerja langsung ke situs web Anda. Mulai dari mengaktifkan caching halaman dan pramuat cache secara otomatis hingga kompresi GZIP dan pengoptimalan eCommerce, ini menerapkan 80% praktik terbaik kinerja web agar situs web Anda berjalan sangat cepat segera setelah aktivasi!

Selain menerapkan sebagian besar praktik terbaik kinerja web saat aktivasi, WP Rocket menawarkan fitur canggih seperti pemuatan lambat, menghapus CSS yang tidak digunakan, dan mengoptimalkan JavaScript.

Yang terpenting, Anda dapat menggunakan fitur bawaan WP Rocket untuk menunda eksekusi skrip JS hingga interaksi pengguna. Ini mengurangi waktu buka halaman awal dan meningkatkan interaktivitas. Hal ini juga memengaruhi metrik Core Web Vitals seperti Largest Contentful Paint (LCP), First Input Delay (FID), dan Interaction to Next Paint (INP) yang akan datang.

Membungkus

Dengan INP menggantikan FID sebagai metrik Core Web Vital pada Maret 2024, cara situs web Anda menangani interaksi pengguna dapat berdampak signifikan pada SEO-nya.

Jika Anda memiliki situs web yang sangat interaktif, mengoptimalkan INP situs Anda bisa terasa seperti proses yang tidak ada habisnya. Selalu ada satu interaksi lagi yang perlu dioptimalkan. Menambahkan fitur baru hanya menambah beban. Namun, Anda harus memulai dari suatu tempat. Semoga artikel ini dapat membantu Anda memulai dengan langkah yang benar.

Skor INP yang lebih baik juga berarti pengalaman pengguna yang lebih baik, dan itu sepadan dengan waktu dan usaha yang dikeluarkan!