First Input Delay adalah metrik yang digunakan untuk memantau lamanya delay (penundaan) yang dibutuhkan sampai browser merespons input user, yaitu klik dan ketukan pada layar. First Input Delay (FID) yang juga dikenal sebagai latensi input, menghitung waktu respons website sejak interaksi pertama user hingga browser memberikan respons.

Scroll dan zoom di layar tidak bisa diukur dengan First Input Delay, karena dikategorikan sebagai aspek animasi dalam RAIL model. Sementara itu, FID hanya berfokus pada tingkat respons website, yang mengukur delay (penundaan) dalam pemrosesan permintaan user.

Penting untuk menganalisis input delay karena akan berpengaruh pada pengalaman pengguna (user experience) website. Bahkan, 25% pengunjung akan meninggalkan website kalau waktu loadingnya melebihi 4 detik.

Di artikel ini, selain membahas apa itu First Input Delay, kami juga akan membahas manfaat, cara optimasi, dan hubungannya dengan metrik Core Web Vitals lainnya, serta cara tes FID dan masalah yang menurunkan nilainya.

Kriteria First Input Delay

Seperti semua metrik pada Core Web Vitals, metrik ini juga mempunyai kriteria yang spesifik.

Terdapat tiga kriteria pada metrik FID ini, yaitu sebagai berikut :

Good yaitu berarti kurang dari sama dengan 100 mili detik.
Needs Improvement yaitu penilaian antara 100 mili detik sampai dengan 300 mili detik.
Poor yaitu penilaian antara sama dengan 300 mili detik atau lebih dari itu.

Alasan First Input Delay Itu Penting

Ada beberapa alasan mengapa perlu memperhatikan pentingnya first input delay ini.

1. Core Web Vitals

Perlu diketahui bahwa First Input Delay itu merupakan salah satu dari tiga metrik yang menjadi bagian pada Core Web Vitals. Sedangkan Core Web Vitals sendiri merupakan metrik yang menjadi bagian dari Web Vitals yang dianggap paling penting dan paling mempengaruhi pada user experience atau pengalaman pengguna.

Dan pada tanggal 28 Mei 2020 Google telah memberikan pengumuman bahwa Core Web Vitals dapat menjadi ranking faktor Google di tahun 2021.

Oleh karena itu metrik ini menjadi penting sekali dalam strategi pada optimasi Search Engine Optimization (SEO).

2. User Experience (UX)

Layaknya seperti sebuah hubungan antar manusia, kesan pertama merupakan faktor yang penting dalam penilaian akan sesuatu. Hal ini juga sama halnya terjadi pada website yang dikelola.

Cara Mengetahui Skor First Input Delay

FID merupakan metrik lapangan dan tidak bisa disimulasikan pada kenyataan yang sedang terjadi. Syarat agar dapat mengukur FID ini adalah dengan adanya Interaksi dengan pengguna nyata.

Artinya semua tools yang menggunakan data lab atau data simulasi pengukuran tidak dapat mengukur metrik FID.

Berikut ini sebagai rekomendasi Google dalam mengukur FID :

Library JavaScript Web Vitals

tool untuk front-end monitoring, membantu menganalisis setiap metrik dalam waktu singkat dan dengan akurasi tinggi. Setiap metrik menentukan satu fungsi, yaitu callback onReport. Setelah mengonfigurasi library web vitals, tool ini akan melaporkan apakah website sudah mencapai ambang batas yang disarankan atau belum.

Laporan Chrome User Experience

Selain dikenal sebagai CrUX, tool ini membantu developer meningkatkan kegunaan website dengan Core Web Vitals dan metrik diagnostik berdasarkan data pengguna asli. CrUX didukung oleh API platform web standar, yang berarti juga bisa menggunakan API tersebut untuk mengumpulkan data Real User Monitoring (RUM).

Laporan Search Console Core Web Vitals

Membantu web developer memperbaiki pengalaman pengguna yang buruk. Laporan ini mengevaluasi performa website berdasarkan data lapangan selama 90 hari menurut status URL, grup, dan tipe metrik. Tapi ingat, laporan ini hanya untuk URL yang diindeks dan didasarkan pada Web Core Vitals. Jika tidak memiliki cukup informasi untuk metrik apa pun, URL akan dihapus dari laporan.

Page Speed Insights

Tool untuk cek kecepatan website akurat dan lengkap dari Google. Dapat menemukan berbagai masalah kecepatan website dengan adanya Google PageSpeed Insight dan juga mendapatkan petunjuk bagaimana mengatasinya.

Cara Optimasi First Input Delay

Ada beberapa cara yang dapat dilakukan dalam mengoptimalkan FID, berikut ini diantaranya :

1. Pecah Task Panjang Menjadi Bagian Kecil

Tingkat kesulitan : mudah

Dampak : tinggi

Saat main thread browser sibuk dan terblokir, permintaan user pun tidak bisa diproses sehingga halaman menjadi tidak responsif. Tingkat respons yang tidak mencukupi tersebut disebabkan oleh task yang berjalan lebih lama dari 50 ms.

Task JavaScript menggunakan banyak resource yang bisa memengaruhi performa kecepatan halaman. Untuk mengatasinya, hapus task tersebut atau pecah task panjang menjadi bagian yang lebih kecil dan asinkron. Paling tidak, satu task menjadi tidak lebih lama dari 50 ms.

Bisa menggunakan fungsi setTimeout untuk memecah task panjang menjadi beberapa task kecil agar main thread bisa merespons input user tanpa delay.

2. Terapkan Progressive Loading

Tingkat kesulitan : menengah

Dampak : tinggi

Website dengan loading yang cepat bisa meningkatkan pengalaman penggunanya. Ada banyak komponen seperti gambar atau task JavaScript besar yang bisa membuat web browser menjadi lambat.

Untuk mengatasi masalah ini, buat kode progressive loading dengan memasukkan semua file JavaScript ke dalam bundling bundle.js. Untuk melakukannya bisa menggunakan webpack.

Bundling juga membantu meminimalkan ukuran halaman dan menghapus kode yang tidak terpakai, atau memperkecilnya (minify) dengan mudah. Selain itu, bundling membuat browser hanya memuat komponen UI saat diperlukan saja.

3. Pindah Logic ke Server-Side

Tingkat kesulitan : sulit

Dampak : tinggi

Server-side rendering (SSR/Rendering sisi server) adalah proses untuk menampilkan halaman web pada server.

Dengan server-side render, halaman akan ditampilkan dengan cepat tanpa harus menunggu resource tersedia. Solusi ini bisa mengatasi masalah halaman yang diindeks dan crawl budget, yang tentunya bermanfaat untuk memaksimalkan SEO.

Selain itu, server-side rendering bisa meningkatkan kecepatan First Contentful Paint dan Time to Interactive (TTI) dengan mencegah pengiriman file JavaScript besar ke client. Hasilnya, loading halaman web akan menjadi lebih cepat.

Bisa merender versi server-side menggunakan framework front-end seperti Vue, React, atau Svelte. Sebelum menggunakan aplikasi ini, pastikan sudah menginstall Node.js untuk menjalankan JavaScript di server.

4. Hasilkan Konten Secara Statis

Tingkat kesulitan : menengah

Dampak : tinggi

Tidak seperti server rendering, static rendering menghasilkan (generate) satu halaman HTML yang disiapkan satu kali saat build time. Cara ini memungkinkan user mengakses halaman lebih awal.

Bisa menggunakan static site generator, seperti Gatsby untuk menghasilkan halaman HTML statis dari data, konten, dan template. Lalu, generator ini akan menghasilkan tampilan halaman yang bisa disajikan kepada pengguna.

Ingat, static rendering tidak sesuai untuk website besar yang memiliki banyak halaman atau memerlukan perubahan respons pada setiap permintaan. Sebab, solusi ini mengharuskan website diluncurkan dan dites, yang akan turut memengaruhi update real-time.

Selain itu, proses peluncuran nantinya bisa menjadi lebih rumit.

5. Tinjau Eksekusi Script Pihak Ketiga

Tingkat kesulitan : sulit

Dampak : tinggi

Lamanya waktu loading bisa disebabkan oleh script pihak ketiga yang menambah fungsionalitas website, seperti live chat, iklan, dan analitik.

Kode pihak ketiga bisa menimbulkan masalah, seperti pemrosesan permintaan jaringan yang terlalu banyak ke berbagai server yang mengirimkan task JavaScript atau file gambar besar yang memblokir main thread.

Untuk meninjau script pihak ketiga bisa menguji website di PageSpeed Insights. Tool ini akan menunjukkan daftar resource pihak ketiga yang dimuat, serta ukuran transfer dan waktu blokir thread utama.

Gunakan async atau defer attribute untuk mempersingkat waktu loading dalam script pihak ketiga. Dengan begitu bisa menyingkirkan masalah blocking rendering dan memicu proses loading yang lebih cepat.

Script penting yang sekiranya vital untuk loading halaman tidak akan menggunakan async atau defer attribute karena ini hanya diperuntukkan bagi script eksternal.

6. Manfaatkan Web Worker

Tingkat kesulitan : sulit

Dampak : tinggi

Web worker membantu mengurangi waktu blokir thread utama dan memperbaiki nilai FID website. Web worker memungkinkan memindahkan task panjang ke background thread tanpa mengganggu user interface, sehingga website menjadi lebih responsif.

Gunakan kode Worker(“path/to/worker/script”) untuk membuat worker. Kode ini bisa mengirim pesan ke kode JavaScript dengan memposting pesan ke event handler yang ditentukan oleh kode tersebut dan sebaliknya.

Selain itu, web worker bisa mengerjakan task input atau output menggunakan XMLHttpRequest atau fetch.

Untuk mempelajari cara menggunakan web worker, silakan kunjungi library berikut :

Comlink – library kecil yang menyederhanakan penggunaan postMessage/.
Workway – web worker exporter.
Workerize – webpack loader yang memindahkan modul ke dalam web worker.

7. Optimalkan JavaScript yang Tidak Diperlukan

Tingkat kesulitan : sulit

Dampak : tinggi

Task JavaScript yang terlalu banyak butuh waktu lama untuk diuraikan dan dieksekusi. Akibatnya, waktu respons browser pun tertunda. Browser akan berhenti apabila menemukan tag script yang terkait dengan kode JavaScript eksternal. Oleh karena itu, jalankan kode yang dibutuhkan saja.

Ada beberapa cara optimasi JavaScript, misalnya code-split dan defer JavaScript yang kurang penting. Sebelum mulai, bisa menggunakan tab Coverage di Chrome DevTools untuk mengecek seberapa banyak JavaScript yang tidak terpakai di halaman web.

Code-split memungkinkan memisahkan bundle JavaScript menjadi bagian-bagian kecil dan memuat halaman saat dibutuhkan saja. Langkah ini juga dikenal sebagai lazy loading.

Sementara itu, untuk melakukan defer task Javascript apa pun yang bersifat kurang penting, selalu gunakan async atau defer untuk script yang tidak diperlukan bagi critical rendering path atau above the fold.

8. Perbaiki Penggunaan Polyfill

Tingkat kesulitan : sulit

Dampak : rendah

Polyfill adalah kode yang digunakan untuk menyediakan fitur modern pada browser lama yang tidak mendukungnya secara native.

Contohnya, saat menggunakan sintaksis JavaScript modern dan API browser untuk menulis kode, perlu melakukan transpile dan menyediakan polyfill agar fitur modern tersebut bisa berjalan di browser versi lama.

Penggunaan polyfill bisa menciptakan lebih banyak bundle yang membutuhkan waktu lebih lama untuk dimuat pada browser. Jadi, penting untuk meminimalkan polyfill yang tidak digunakan, dan hanya gunakan ketika diperlukan saja.

Untuk mempersingkat waktu loading halaman web, gunakan compiler JavaScript seperti Babel, dan gunakan @bable/preset-eny untuk menyertakan polyfill yang diperlukan bagi browser versi lama.

selain itu bisa mengurangi penggunaan polyfill yang tidak digunakan dengan mengaktifkan opsi bugfix pada versi Babel 7.9. Alternatifnya, deliver dua bundle yang terpisah dengan menggunakan module/nomodule untuk mengoptimalkan polyfill.