Apa itu First Input Delay (FID)? Cara Menguranginya di WordPress

Ada nama untuk momen canggung ketika Anda pertama kali mencoba berinteraksi dengan halaman dan butuh beberapa saat untuk merespons. Itu disebut First Input Delay (FID) dan ini adalah metrik yang memberi Anda gambaran tentang seberapa bagus pengalaman pengguna (UX) situs web.

FID rendah memberi tahu Anda bahwa situs web dioptimalkan dengan benar. Ini berarti bahwa browser pengunjung Anda tidak berhenti memuat elemen dan skrip bahkan setelah halaman selesai dirender. Jika Anda bisa mendapatkan skor FID Anda serendah mungkin, itu akan membuat kunjungan pengguna jauh lebih menyenangkan.

Dalam artikel ini, kita akan berbicara tentang apa yang dimaksud dengan First Input Delay dan mengapa metrik ini sangat penting. Kemudian kita akan membahas empat cara untuk mengurangi skor FID di WordPress. Mari kita lakukan!

Daftar Isi:

• Apa itu Penundaan Input Pertama?
• Bagaimana mengukur First Input Delay untuk situs web Anda
• Cara untuk mengurangi skor First Input Delay di WordPress

Apa itu First Input Delay (dan mengapa ini menjadi metrik penting)

Setiap kali Anda mengunjungi situs web, banyak yang terjadi di latar belakang. Sebelum Anda dapat melihat halaman, browser Anda perlu menanyakan servernya, mengirim dan memproses permintaan, memuat elemen, dan sebagainya. Untuk situs web modern, Anda dapat memiliki lusinan permintaan yang harus dipenuhi browser Anda sebelum Anda melihat halaman yang dirender sepenuhnya yang dapat Anda gunakan untuk berinteraksi.

Dalam beberapa kasus, halaman terlihat siap, tetapi browser Anda masih memproses permintaan dan memuat skrip di latar belakang. Saat Anda mencoba berinteraksi dengan halaman itu, Anda mungkin menemukan sedikit jeda antara Anda melakukan tindakan dan menerima respons.

Misalnya, jika Anda mengeklik tautan, browser Anda mungkin tidak langsung memproses permintaan. Jika Anda menekan tombol, itu mungkin tidak melakukan apa-apa pada pandangan pertama. Itu dapat terjadi pada dasarnya dengan elemen interaktif apa pun di situs Anda., dan itu adalah tujuan Anda untuk mengurangi penundaan input pertama sebanyak mungkin.

Idealnya, Penundaan Masukan Pertama situs Anda harus di bawah 100 milidetik. Itulah standar yang dianggap Google dapat diterima untuk situs web:

Kami menyebut Google secara khusus karena FID adalah salah satu dari tiga metrik yang digunakan untuk mengukur pengalaman pengguna yang positif atau negatif di situs web. Ketiga metrik tersebut disebut Core Web Vitals dan juga mencakup dua metrik berikut:

1. Cat Konten Terbesar (LCP): Metrik ini mengukur berapa lama waktu yang dibutuhkan elemen terbesar pada halaman untuk dimuat.
2. Pergeseran Tata Letak Kumulatif (CLS): Ini mengukur seberapa banyak halaman "bergeser" secara visual saat dimuat. Jika elemen bergerak terlalu banyak saat dimuat, Anda akan mendapatkan skor CLS yang buruk. Kami memiliki panduan untuk memperbaiki Pergeseran Tata Letak Kumulatif untuk WordPress.

Ada dua alasan utama mengapa Data Web Inti penting. Yang pertama adalah mereka memberikan ukuran seberapa baik situs Anda dioptimalkan. Jika situs web Anda memiliki skor yang bagus, itu berarti memuat dengan cepat, stabil secara visual, dan pengguna tidak perlu menunggu terlalu lama untuk berinteraksi dengannya.

Alasan kedua mengapa Core Web Vitals penting adalah karena mereka memengaruhi pengoptimalan mesin telusur (SEO) situs Anda. Google menggunakan metrik ini sebagai sinyal kecil saat menentukan peringkat. Faktanya, raksasa mesin pencari telah menjelaskan bahwa Core Web Vitals penting dalam hal SEO, meskipun tidak pada tingkat yang sama dengan konten dan backlink.

Bagaimana mengukur First Input Delay untuk situs web Anda

Penundaan Masukan Pertama bisa jadi sulit diukur karena Anda perlu mengumpulkan data berdasarkan pengunjung situs Anda yang sebenarnya, tidak seperti metrik kinerja lainnya di mana Anda hanya dapat menjalankan pengujian simulasi menggunakan komputer.

Cara termudah untuk mengukur First Input Delay untuk situs web Anda adalah dengan menggunakan PageSpeed ​​Insights. Namun, PageSpeed ​​Insights hanya akan menampilkan waktu Penundaan Masukan Pertama jika situs Anda memiliki lalu lintas yang cukup untuk disertakan dalam laporan Pengalaman Pengguna Chrome.

Mari kita bahas cara kerja PageSpeed ​​Insights terlebih dahulu, lalu kami akan membagikan beberapa alternatif yang dapat Anda coba jika PageSpeed ​​Insights tidak menawarkan metrik First Input Delay untuk situs Anda:

Untuk menggunakan PageSpeed ​​Insights, lanjutkan dan masukkan URL halaman yang ingin Anda uji. PageSpeed ​​Insights akan membutuhkan beberapa saat untuk menganalisisnya dan kemudian akan mengembalikan laporan yang terlihat seperti ini:

Secara keseluruhan, situs web tersebut tidak memiliki skor Core Web Vital terbaik. Namun, Anda dapat melihat bahwa kinerjanya sangat baik dalam hal metrik Penundaan Input Pertama, dengan waktu rata-rata di bawah 100 md.

Namun, seperti yang kami sebutkan di atas, tidak semua situs akan melihat metrik ini. Jika Anda memiliki situs dengan lalu lintas rendah, Anda mungkin melihat sesuatu seperti ini:

Dalam situasi ini, Anda memiliki dua opsi:

1. Sederhana : Anda dapat menggunakan metrik Waktu Pemblokiran Total dari bagian Data Lab sebagai proksi kasar untuk waktu Tunda Masukan Pertama Anda. Ini bukan representasi yang sempurna, tetapi metrik Total Blocking Time sangat mirip dengan First Input Delay. Umumnya, jika Anda meningkatkan Waktu Pemblokiran Total, Anda juga akan melihat peningkatan serupa pada waktu Tunda Masukan Pertama Anda.
2. Lanjutan : Anda dapat menggunakan alat pemantauan kinerja pengguna nyata seperti Metrik Permintaan. Dengan alat ini, Anda harus menambahkan skrip pelacakan ke situs Anda untuk mengumpulkan data pengguna yang sebenarnya.

Di bawah, Anda dapat melihat di mana menemukan metrik Waktu Pemblokiran Total di PageSpeed ​​Insights:

Sekarang setelah Anda mengetahui cara mengukur FID dan Data Web Inti lainnya, mari kita bicara tentang cara meningkatkannya.

Cara untuk mengurangi skor First Input Delay di WordPress

Untuk bagian ini, kita akan fokus pada optimasi WordPress yang akan meningkatkan skor First Input Delay Anda. Beberapa dari pengoptimalan ini juga akan berdampak positif pada Data Web Inti lainnya, yang menjadikannya lebih bermanfaat.

1. Hapus skrip yang tidak perlu dari situs web Anda

Salah satu alasan utama mengapa situs WordPress Anda mungkin memakan waktu terlalu lama untuk dimuat adalah karena perlu menjalankan daftar skrip yang besar. Yang kami maksud dengan skrip adalah JavaScript dan CSS, di antara opsi lain yang memungkinkan. Jika Anda menggunakan tema WordPress “kompleks” atau beragam plugin, kemungkinan besar Anda memiliki terlalu banyak skrip yang berjalan di latar belakang.

Mencari tahu skrip mana yang berguna dan mana yang tidak dapat menjadi suatu tantangan, tetapi di situlah PageSpeed ​​Insights berperan. Jika Anda menjalankan pengujian untuk halaman situs mana pun, laporan PageSpeed ​​Insights juga akan menyertakan bagian Peluang :

Bagian itu akan menunjukkan file JavaScript dan CSS mana yang tidak digunakan situs Anda. Menghapus skrip tersebut akan menurunkan skor FID Anda.

Dalam banyak kasus, skrip tersebut berasal dari plugin. Itu berarti Anda perlu melihat lama daftar plugin Anda dan mencari tahu alat mana yang tidak benar-benar Anda butuhkan. Memusnahkan plugin Anda adalah cara yang bagus untuk menjaga agar situs web Anda dimuat secepat mungkin.

2. Tunda kode non-kritis selama memuat

Adalah umum untuk menemukan skrip atau kode tertentu yang membutuhkan waktu terlalu lama untuk dimuat. Masalahnya adalah, dalam beberapa kasus, browser Anda tidak akan dapat menyelesaikan pemuatan elemen halaman lainnya hingga browser menangani skrip tersebut.

Jika skrip tersebut tidak "kritis", Anda cukup memberi tahu browser Anda untuk membiarkannya hingga terakhir sehingga tidak memperlambat segalanya untuk orang lain. Itulah yang kami sebut "menunda kode non-kritis".

Perhentian pertama Anda saat mencari tahu skrip apa yang dapat Anda tunda adalah PageSpeed ​​Insights. Setelah Anda membuat laporan untuk sebuah halaman, PageSpeed ​​Insights akan menyertakan rekomendasi tentang cara meningkatkan skornya.

Di antara rekomendasi tersebut, Anda akan menemukan opsi yang berbunyi Hilangkan sumber daya yang memblokir perenderan . Jika Anda mengkliknya, itu akan menampilkan daftar skrip yang dapat Anda tunda:

Ada dua cara yang dapat Anda lakukan untuk menangani skrip pemblokiran render di WordPress. Metode pertama melibatkan penggunaan async . Ini memungkinkan browser untuk terus memuat situs web Anda saat mereka mengurai skrip yang Anda tentukan. Atau, Anda dapat menunda kode agar dimuat setelah browser merender sisa dokumen HTML.

Untuk mengatur ini di WordPress, Anda dapat menggunakan plugin Async JavaScript gratis. Atau, banyak plugin kinerja WordPress menyertakan fitur untuk menunda kode. Jika Anda bersedia membayar untuk plugin premium, WP Rocket memiliki fitur untuk secara otomatis menunda CSS dan JavaScript yang tidak penting.

3. Gunakan alat minifikasi CSS dan JavaScript

Meskipun kita semua untuk menghapus CSS dan JavaScript yang tidak digunakan, ada beberapa skrip yang tidak ingin Anda hapus. Misalnya, Anda tidak ingin menghapus stylesheet CSS halaman mana pun kecuali Anda menginginkan situs web yang terasa seperti dirobek dari abad terakhir.

Untuk skrip yang tidak dapat Anda hapus, taruhan terbaik Anda adalah mengecilkannya. Ini berarti menghapus spasi dan karakter yang tidak perlu dari kode untuk mengurangi ukuran setiap skrip. Ada beberapa alat yang secara otomatis akan mengecilkan skrip untuk Anda di WordPress, seperti Autoptimize dan Fast Velocity Minify:

Secara umum, sebagian besar plugin pengoptimalan dan caching WordPress juga menyertakan alat minifikasi skrip. Namun, beberapa di antaranya memerlukan banyak pekerjaan konfigurasi, jadi kami sarankan untuk tetap menggunakan opsi seperti Autoptimize dalam hal minifikasi.

4. Gunakan jaringan pengiriman konten (CDN)

Menggunakan CDN adalah cara yang bagus untuk meningkatkan kinerja situs web Anda. Dengan CDN, Anda mendapatkan akses ke jaringan pusat data di seluruh dunia yang dapat menyimpan konten situs Anda dalam cache. Saat pengunjung mencoba mengakses situs web Anda, CDN akan memproses permintaan itu dan menyajikan versi cache-nya.

Dalam kebanyakan kasus, menggunakan CDN akan meningkatkan waktu pemuatan situs web Anda dan skor FID. Mengintegrasikan WordPress dengan CDN sederhana dan tantangan terbesar mungkin terletak pada memutuskan layanan mana yang akan digunakan.

Jika Anda mencari opsi CDN gratis, kami sarankan untuk memilih salah satu dari berikut ini:

1. Cloudflare: Ini adalah salah satu CDN paling populer di pasaran. Sangat mudah untuk diintegrasikan dengan WordPress dan menawarkan paket gratis.
2. Jetpack: Plugin Jetpack menawarkan fitur yang disebut Site Accelerator , yang menggunakan server WordPress.com untuk menyimpan elemen statis dari situs web Anda. Meskipun Jetpack memerlukan akun WordPress.com, Anda juga dapat menggunakannya di situs WordPress yang dihosting sendiri.

Namun, untuk performa terbaik, Anda mungkin ingin mempertimbangkan CDN premium seperti KeyCDN, StackPath, atau Bunny CDN.

Kurangi Penundaan Input Pertama situs Anda hari ini

Mengukur sesuatu yang sangat abstrak bisa jadi rumit, itulah sebabnya setiap inti vital berfokus pada satu situasi tertentu yang dapat berdampak negatif pada pengalaman pengunjung. Semua Data Web Inti sangat penting, tetapi FID, khususnya, dapat menyebabkan banyak frustrasi jika penundaannya terlalu tinggi.

Jika Anda mencari cara untuk meningkatkan skor FID Anda di WordPress, inilah yang perlu Anda lakukan:

1. Hapus skrip yang tidak perlu dari situs web Anda.
2. Tunda CSS dan JavaScript yang tidak penting selama pemuatan.
3. Gunakan alat minimalisasi CSS dan JavaScript, seperti Autoptimize dan Fast Velocity Minify.
4. Gunakan CDN, seperti Cloudflare atau Jetpack.

Apakah Anda memiliki pertanyaan tentang cara mengurangi skor FID di WordPress? Mari kita bicara tentang mereka di bagian komentar di bawah!