Cara Meningkatkan First Input Delay (FID) di Situs WordPress Anda

Kami baru-baru ini memulai seri baru di metrik Data Web Inti Google dengan postingan di Cat Berkonten Terbesar. Di sini, kami ingin melanjutkan dengan kandidat berikutnya: First Input Delay atau singkatnya FID dan cara memperbaikinya di WordPress.

Berikut ini, kami akan mendalami apa itu FID dan bagaimana mengoptimalkan situs WordPress Anda untuk itu. Anda akan belajar memahami dan mengukur Penundaan Input Pertama, nilai apa yang harus Anda tuju, dan cara memperbaikinya jika perlu.

Perhatikan bahwa postingan ini mengasumsikan bahwa Anda sudah terbiasa dengan Google Core Web Vitals dan pengaruhnya terhadap pengalaman pengguna dan pengoptimalan mesin telusur. Jika Anda tidak yakin tentang semua ini, lihat artikel pertama dalam seri ini atau postingan mandiri kami di Data Web Inti .

Apa itu Penundaan Input Pertama? Definisi

Jadi, seperti yang telah disebutkan, FID adalah salah satu dari tiga metrik untuk mengukur pengalaman pengguna situs web yang dianggap Google sebagai nilai inti untuk menilai seberapa ramah pengguna sebuah situs web. Ini juga merupakan bagian dari algoritme pencarian mereka, jadi jika skor Anda buruk dalam hal ini, peringkat pencarian Anda akan menurun.

Namun, apa sebenarnya First Input Delay itu?

Singkatnya, FID menghitung penundaan antara waktu pengguna berinteraksi dengan halaman web (seperti mengklik tombol) dan waktu saat browser dapat merespons interaksi tersebut. Ini mencerminkan daya tanggap halaman web.

Sementara Largest Contentful Paint menghitung berapa lama halaman web menjadi berguna bagi pengunjung, FID mengukur seberapa baik halaman itu tetap berguna dengan melakukan tindakan apa pun yang diinginkan pengunjung – bahkan selama pemuatan. Secara alami, jika situs Anda lebih responsif, itu membuat pengalaman pengguna menjadi lebih baik.

Anda mungkin tahu ini dari penggunaan internet Anda sendiri. Pernah berada di situs yang membutuhkan waktu terlalu lama untuk bereaksi terhadap masukan Anda? Anda tidak suka itu, bukan? Begitu pula dengan pengunjung website Anda.

Bagaimana FID Dihitung?

FID diukur dalam milidetik (ms). Untuk menghitungnya, browser melacak saat interaksi pengguna terjadi di halaman dan waktu yang diperlukan thread utama browser untuk memproses interaksi tersebut. Skor FID mewakili penundaan antara dua peristiwa. Akibatnya, skor FID yang rendah menunjukkan bahwa halaman tersebut sangat interaktif dan merespons input pengguna dengan cepat.

Pada titik ini, Anda mungkin memiliki pertanyaan: Apa itu "utas utama"? Dan apa yang dianggap sebagai interaksi?

Inilah jawabannya.

Utas utama pada dasarnya adalah alur kerja browser. Semua proses yang diperlukan untuk merender dan menjalankan situs web dijalankan melaluinya. Jika terus-menerus sibuk, perlu waktu lebih lama sebelum dapat bereaksi terhadap masukan baru.

Adapun yang dianggap sebagai interaksi, itu bisa berupa klik pada tautan, ketuk pada tombol, menggunakan menu drop-down, bidang teks, kotak centang, atau tombol radio, serta menekan tombol pada keyboard Anda (mis. Esc untuk menutup munculan).

Apa Penyebab FID?

Penundaan Input Pertama seringkali tertinggi antara First Contentful Paint (saat elemen halaman pertama muncul di jendela browser) dan Time to Interactive (saat halaman pertama kali dapat digunakan dan responsif terhadap input pengguna).

Pada dasarnya, input delay berasal dari saat browser sedang sibuk dengan hal lain sementara pengguna mencoba melakukan sesuatu. Dalam hal ini, itu tidak dapat menanggapi masukan tepat waktu, mengakibatkan waktu tunggu bagi pengunjung situs.

Di sisi teknis, penyebab umum untuk ini adalah:

• File JavaScript besar yang perlu diurai dan dijalankan oleh browser
• Sumber daya pemblokiran render yang harus ditunggu
• Kalkulasi berat, manipulasi DOM, atau proses intensif sumber daya
• Koneksi jaringan lambat atau latensi tinggi yang dapat menyebabkan keterlambatan dalam pengambilan file situs web dan sumber daya lainnya
• Aktivitas yang memblokir thread utama, seperti animasi yang berat, transisi CSS yang berjalan lama, atau pemrosesan gambar yang besar

Satu hal terakhir yang penting untuk dicatat tentang Penundaan Input Pertama adalah bahwa ini akan digantikan oleh metrik lain yang disebut Interaction to Next Paint (INP) pada Maret 2024. Namun, untuk saat ini FID adalah yang sedang kami kerjakan, jadi tetap penting bahwa Anda menjadi akrab dengannya.

Cara Mengukur Keterlambatan Input Pertama

Anda dapat menguji FID situs web Anda dengan alat yang hampir sama dengan Core Web Vitals lainnya:

• PageSpeed ​​Insights — Cukup masukkan URL halaman Anda dan terima laporan termasuk nilai FID Anda.
• Laporan Pengalaman Pengguna Chrome — Google mengumpulkan dan menyusun data pengalaman pengguna nyata dari banyak situs web melalui perambannya. Anda dapat mengakses data ini melalui berbagai alat, termasuk yang disebutkan di sini.
• Search Console — Laporan Data Web di Google Search Console memberi tahu Anda tentang halaman dengan pembacaan FID yang buruk.
• library JavaScript web-vitals — Jika Anda lebih cenderung secara teknis, Anda dapat membuat library JavaScript ini ke situs web Anda dan mendapatkan informasi tentang Core Web Vitals dari sana.

Sebagian besar alat ini hanya menunjukkan nilai FID dalam hasilnya sehingga Anda tahu apa yang Anda hadapi.

Yang penting untuk diperhatikan adalah Anda memerlukan interaksi pengguna nyata untuk metrik ini. Ini bukan sesuatu yang dapat Anda simulasikan di lingkungan tipe lab. Oleh karena itu, sumber terbaik Anda untuk ini adalah data pengguna nyata seperti dari laporan CrUX.

Jika Anda ingin menguji situs Anda di lingkungan lab sebelumnya, metrik proxy terbaik Anda adalah Total Waktu Pemblokiran. Anda juga dapat menemukannya di PageSpeed ​​Insights, misalnya.

Selain itu, fokuslah pada kasus FID yang paling buruk di situs Anda, ini akan memberi tahu Anda paling banyak tentang apa yang salah.

Apa itu Penundaan Input Pertama yang Baik?

Itu hanya menyisakan pertanyaan, nomor berapa yang harus Anda bidik? Skor FID yang baik biasanya di bawah 100 milidetik. Skor antara 100 dan 300 milidetik dianggap perlu peningkatan. Semuanya lebih dari 300 milidetik menunjukkan pengalaman pengguna yang buruk.

Jadi, dengan mempertimbangkan tolok ukur ini, mari pelajari cara membuat Penundaan Input Pertama di situs Anda menjadi lebih baik.

Cara Meningkatkan Penundaan Input Pertama di Situs WordPress Anda

Meningkatkan FID sebagian besar melibatkan pengoptimalan kinerja halaman web dan mengurangi tugas pemblokiran apa pun yang dapat menunda respons browser terhadap input pengguna. Penyebab paling umum untuk yang terakhir adalah penggunaan JavaScript yang berat atau salah. Oleh karena itu, sebagian besar tindakan di bawah ini akan berfokus pada hal tersebut. Namun, ada juga hal lain yang bisa Anda lakukan.

Langkah-Langkah Peningkatan Kinerja Umum

Banyak teknik yang sudah kami bahas untuk cara meningkatkan Largest Contentful Paint juga berlaku saat Anda ingin membuat FID Anda lebih baik, termasuk:

• Optimalkan lingkungan situs web Anda — Semakin cepat situs web Anda secara umum, semakin cepat sumber daya dapat dikirimkan, mengurangi waktu untuk interaktivitas. Oleh karena itu, berinvestasilah dalam hosting, tema, dan plugin berkualitas. Selain itu, kurangi jumlah plugin di situs Anda dan terus perbarui. Selain itu, terapkan caching dan kompresi.
• Terapkan CDN — Jaringan pengiriman konten memungkinkan Anda mempersingkat jarak antara server dan pengguna, juga menghasilkan pengiriman file yang lebih cepat.
• Hilangkan sumber daya yang memblokir perenderan — Setiap bagian situs web yang menghentikan proses pemuatan berdampak negatif pada semua bagian pengalaman pengguna dan Data Web Inti. Menghilangkan mereka dari situs Anda membantu memperbaiki masalah itu. Detail lebih lanjut tentang JavaScript pemblokiran render di bawah ini.

Untuk tips lainnya, lihat artikel kami tentang cara mempercepat WordPress, cara mengurangi permintaan server, dan tentang pengujian kecepatan situs web Anda.

Kurangi, Tunda, Asinkron, dan Perkecil JavaScript Anda

Seperti yang disebutkan, JavaScript biasanya menjadi faktor utama untuk hasil FID yang buruk. Inilah cara mengoptimalkan markup di situs Anda agar tidak menjadi masalah.

Kurangi Markup Keseluruhan

Tentu saja, hal terbaik yang dapat Anda lakukan adalah mengurangi keseluruhan JavaScript di halaman. Periksa tab Cakupan di alat pengembang browser Anda untuk menemukan JavaScript yang tidak terpakai di halaman web.

Lihat apakah perlu untuk situs Anda secara keseluruhan atau jika Anda dapat menghapus JavaScript yang tidak digunakan sama sekali.

Di WordPress, JavaScript yang berlebihan seringkali merupakan hasil dari terlalu banyak plugin atau tema yang datang dengan banyak lonceng dan peluit yang menyebabkan Penundaan Input Pertama. Jadi, jika Anda ingin menghilangkannya, periksa apakah ada cara untuk menghilangkan beberapa di antaranya atau beralih ke versi yang lebih ramping.

Skrip Asinkron dan Tunda

Setelah itu, langkah selanjutnya adalah mengoptimalkan pengiriman JavaScript ke browser. Masalah utama di sini adalah, kecuali ditentukan lain, saat browser menemukan skrip JavaScript di markup situs web Anda, ia berhenti merender HTML hingga skrip diunduh dan dieksekusi. Ini juga disebut sebagai "render-blocking resource" yang disebutkan di atas.

Namun, ada beberapa cara untuk mengatasinya dan didasarkan pada dua kata kunci:

• async – Menambahkan ini ke panggilan skrip Anda memungkinkan browser mengunduhnya di latar belakang tanpa menghentikan pemrosesan halaman. Itu hanya akan dijalankan setelah diunduh, terlepas dari halaman lainnya.
• defer – Sangat mirip dengan async . Ini memberi tahu browser untuk tidak menunggu skrip dan malah terus membangun halaman. Namun, dalam hal ini, ini akan memuat skrip terakhir, ketika halaman lainnya telah dibuat sepenuhnya.

Inilah yang terlihat seperti menggunakan async dan defer dalam praktiknya:

 <script async src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script> <script defer src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script>

Seperti yang dapat Anda bayangkan, kedua metode ini dapat menghemat banyak waktu selama pemuatan halaman. Perbedaan utama mereka: defer menjaga urutan relatif skrip seperti yang muncul di dokumen, sementara async menggunakan urutan skrip selesai diunduh.

Anda dapat menggunakan keduanya untuk memuat JavaScript yang tidak digunakan dan tidak penting nanti. Ini termasuk skrip pihak ketiga seperti analitik.

Kecilkan JavaScript untuk Pengunduhan Lebih Cepat

Terakhir, untuk JavaScript yang dimuat, pastikan untuk mengecilkannya. Minifikasi berarti menghapus semua markup dan pemformatan kode yang hanya ada untuk membuat file terbaca oleh manusia.

Ini lebih lanjut mengurangi ukuran file dan membuatnya lebih cepat untuk diunduh oleh browser. Ada banyak alat di luar sana untuk melakukan ini, termasuk rekomendasi plugin di bawah ini.

Hancurkan Tugas Panjang

Selain mengurangi keseluruhan JavaScript di situs Anda dan meningkatkan pengiriman, Anda dapat mengoptimalkan Penundaan Input Pertama di situs WordPress Anda dengan membagi apa yang tersisa menjadi bagian yang lebih kecil. Ini sangat cocok jika Anda memiliki banyak "tugas panjang" di halaman Anda.

Apa tugas yang panjang, Anda bertanya?

Apa pun yang memblokir utas utama selama lebih dari 50 md. Anda dapat melihatnya di alat pengembang Chrome yang ditandai dengan bendera merah.

Jika Anda memotongnya menjadi bagian-bagian yang lebih kecil, Anda dapat memuatnya secara asinkron, menghasilkan pekerjaan yang tidak terlalu terganggu di utas utama.

Bagaimana kamu melakukannya?

Dengan menggunakan pemecahan kode. Ini memungkinkan Anda untuk memuat potongan JavaScript secara kondisional sehingga hanya kode yang sangat penting yang dimuat dari awal. Sisanya hanya berperan jika diperlukan. Anda juga dapat memecah tugas menjadi fungsi terpisah yang lebih kecil. Keduanya adalah cara untuk menjaga halaman Anda tetap responsif.

Untuk tip yang lebih teknis tentang cara menangani tugas yang panjang, periksa sumber daya ini.

Plugin WordPress yang Berguna untuk Meningkatkan FID

Kami memahami bahwa mengoptimalkan file JavaScript bukanlah hal yang mudah dilakukan semua orang, terutama jika Anda bukan pengembang. Oleh karena itu, kami telah menyusun beberapa plugin dan alat WordPress yang dapat membantu Anda membuat nilai Penundaan Input Pertama menjadi lebih baik.

• Pembersihan Aset – Plugin ini memungkinkan Anda untuk menonaktifkan CSS dan JavaScript yang tidak digunakan, memuat font sebelumnya, mengecilkan file Anda, menunda JavaScript, dan banyak lagi.
• Flying Scripts — Memungkinkan Anda menunda eksekusi JavaScript non-kritis hingga tidak ada aktivitas pengguna.
• Pengatur Plugin — Mengubah urutan pemuatan plugin di situs Anda dan menonaktifkannya secara selektif pada halaman atau jenis konten yang dipilih.
• Autoptimize — Dapat menggabungkan dan memperkecil file CSS dan JS secara otomatis serta menambahkan async dan defer skrip. Ini juga sangat mudah digunakan.
• WP Rocket — Plugin caching berbayar yang dapat melakukan banyak hal yang telah kita bicarakan di atas. Umumnya, sebagian besar plugin caching menawarkan fungsionalitas serupa.

Pikiran Final: Penundaan Input Pertama di WordPress

FID adalah salah satu metrik yang membentuk tiga serangkai Data Web Inti dan mengukur interaktivitas halaman web. Karena tidak ada yang menyukai pengalaman web yang lamban, ini adalah bagian penting dari pengalaman pengguna. Dengan berfokus pada peningkatan Penundaan Input Pertama, pemilik dan pengembang situs web dapat memberikan pengalaman pengguna yang lebih responsif, dan pada akhirnya meningkatkan kepuasan dan keterlibatan pengguna.

Di atas, kami telah membahas cara mengukur, menguji, dan meningkatkan FID di situs web WordPress Anda. Meskipun pengoptimalan JavaScript mungkin terasa sedikit di luar jangkauan pengguna yang kurang teknis, masih banyak yang dapat Anda lakukan untuk meningkatkan keseluruhan kinerja situs Anda termasuk FID. Mudah-mudahan, Anda merasa mampu melakukannya sekarang.

Apakah Anda memiliki tip lain untuk meningkatkan Penundaan Input Pertama di situs web WordPress? Bagikan pemikiran dan rekomendasi Anda di bawah ini!