![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/eBook_-Build-website-ID.png\/public\")
<\/a><\/figure>\n\n\n\n\n\n
Apa Itu First Input Delay (FID)?<\/h2>\n
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.<\/p>\n <\/div>\n\n\n\n<\/p>
Seberapa Pentingkah First Input Delay?<\/h2>
First Input Delay merupakan salah satu faktor penting yang akan memengaruhi kesan suatu website. FID adalah bagian dari metrik Core Web Vitals, bersama dengan Largest Contentful Paint<\/a> (LCP), Cumulative Layout Shift<\/a> (CLS), dan Interaction to Next Paint<\/a> (INP).<\/p> Dengan Core Web Vitals, Anda bisa mengukur performa halaman serta mendapatkan laporan yang akan membantu Anda meningkatkan performa website.<\/p> Selain itu, metrik-metrik tersebut akan memengaruhi pengalaman pengguna dan ranking website, yang tentunya berdampak pada search engine optimization (SEO)<\/a> Anda. Sebab, kecepatan halaman<\/a> merupakan salah satu faktor utama yang menentukan ranking website di Google.<\/p> Pengunjung pasti akan merasa sebal kalau harus menunggu lama sampai website Anda merespons interaksi mereka. Nah, hampir semua masalah respons ini terjadi saat halaman web sedang dimuat, jadi, penting sekali untuk menjaga nilai First Input Delay tetap rendah.<\/p> Setelah membahas pentingnya First Input Delay bagi halaman Anda, sekarang kami akan membahas cara mengetesnya untuk meningkatkan performa website Anda demi interaksi pengguna yang lebih baik.<\/p> Tidak seperti Cumulative Layout Shift dan Largest Contentful Paint, First Input Delay hanya bisa dinilai melalui interaksi nyata pengguna dengan halaman Anda.<\/p> Berikut tool yang bisa Anda gunakan untuk mengetahui skor First Input Delay:<\/p> Sebagai contoh, Anda ingin menggunakan PageSpeed Insights untuk mengetes First Input Delay. Cukup masukkan satu URL ke dalam kolom pencarian.<\/p> Setelahnya, Anda akan mendapatkan penilaian Core Web Vitals pada halaman Anda, serta saran untuk menyempurnakannya. Anda juga bisa melihat berapa input delay di halaman web Anda.<\/p> Umumnya, user akan merasa bahwa halaman Anda bisa merespons permintaan ‘langsung pada saat itu juga’ adalah ketika respons diberikan kurang dari 0,1 detik.<\/p> Jadi, untuk mendapatkan nilai FID yang baik dan user input yang cepat, website harus memiliki FID kurang dari 100 ms<\/strong> sebagai batas maksimum. Idealnya, website harus mencapai <100 ms<\/strong> dari 75%<\/strong> loading semua halaman, termasuk perangkat mobile dan desktop.<\/p> Grafik di bawah ini menunjukkan pengelompokan nilai First Input Delay yang dianggap bagus, perlu diperbaiki, dan buruk.<\/p> Max Potential First Input Delay (MPFID) adalah tugas terlama sebuah halaman. MPFID mengukur waktu respons halaman selama task terlama berjalan. Perlu diperhatikan bahwa pengukuran dimulai hanya setelah first contentful paint (FCP) dihitung.<\/p> Hasil nilai diambil dari perbandingan waktu max potential FID dengan waktu max potential FID pada website lainnya di internet. Misalnya, kalau nilai MPFID Anda termasuk hijau, artinya performa halaman Anda lebih baik daripada 90%<\/strong> website lainnya.<\/p> Apabila mendapatkan nilai First Input Delay yang rendah, Anda harus tahu bagian mana saja pada halaman Anda yang perlu diperbaiki.<\/p> Salah satu penyebab utama yang membuat browser tidak bisa merespons interaksi user dengan cepat adalah input user yang terblokir. Ini terjadi saat main thread browser sibuk mengerjakan task lain.<\/p> Task ini biasanya termasuk menangani HTML, CSS, dan Javascript, sehingga pekerjaan browser mejadi terlalu berat. Task panjang JavaScript adalah<\/a> error umum yang menyebabkan penundaaan pada main thread, bahkan event listener menjadi tidak bisa berjalan.<\/p> Untuk menemukan masalah ini, gunakan PageSpeed Insights dan cari bagian audit Avoid long main-thread tasks<\/strong>.<\/p> Setelah memahami cara menguji FID dan mencari kemungkinan penyebab yang membuat nilai FID Anda rendah, sekarang kami akan membahas cara optimasi First Input Delay.<\/p> Biasanya, JavaScript memiliki dampak yang paling signifikan pada nilai FID. Jadi, kami merekomendasikan Anda untuk mengoptimasi kode JavaScript.<\/p> Ikuti langkah di bawah ini untuk melakukannya:<\/p> Tingkat kesulitan: <\/strong>mudah<\/p> Dampak: <\/strong>tinggi<\/p> 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<\/strong>.<\/p> 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<\/strong>.<\/p> Anda bisa menggunakan fungsi setTimeout<\/strong> untuk memecah task panjang menjadi beberapa task kecil agar main thread bisa merespons input user tanpa delay.<\/p> Tingkat kesulitan: <\/strong>menengah<\/p> Dampak: <\/strong>tinggi<\/p> 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.<\/p> Untuk mengatasi masalah ini, buat kode progressive loading dengan memasukkan semua file JavaScript ke dalam bundling bundle.js<\/strong>. Untuk melakukannya, Anda bisa menggunakan webpack<\/a>.<\/p> Bundling juga membantu Anda 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.<\/p> Tingkat<\/strong> kesulitan: <\/strong>sulit<\/p> Dampak: <\/strong>tinggi<\/p> Server-side rendering (SSR\/Rendering sisi server) adalah proses untuk menampilkan halaman web pada server.<\/p> Dengan server-side render, halaman Anda 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.<\/p> 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 Anda pun akan menjadi lebih cepat.<\/p> Anda bisa merender versi server-side menggunakan framework front-end seperti Vue<\/strong>, React<\/a>, atau Svelte<\/strong>. Sebelum menggunakan aplikasi ini, pastikan Anda sudah menginstal Node.js<\/a> untuk menjalankan JavaScript di server.<\/p> Tingkat <\/strong>kesulitan: <\/strong>menengah<\/p> Dampak: <\/strong>tinggi<\/p> 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.<\/p> Anda bisa menggunakan static site generator, seperti Gatsby<\/a>, untuk menghasilkan halaman HTML statis dari data, konten, dan template. Lalu, generator ini akan menghasilkan tampilan halaman yang bisa disajikan kepada pengguna.<\/p> 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.<\/p> Selain itu, proses peluncuran Anda nantinya bisa menjadi lebih rumit.<\/p> Tingkat <\/strong>kesulitan: <\/strong>sulit<\/p> Dampak: <\/strong>tinggi<\/p> Lamanya waktu loading bisa disebabkan oleh script pihak ketiga yang menambah fungsionalitas website, seperti live chat, iklan, dan analitik.<\/p> 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.<\/p> Untuk meninjau script pihak ketiga, Anda bisa menguji website di PageSpeed Insights. Tool ini akan menunjukkan daftar resource pihak ketiga yang dimuat, serta ukuran transfer dan waktu blokir thread utama.<\/p> Gunakan async atau defer attribute untuk mempersingkat waktu loading dalam script pihak ketiga. Dengan begitu, Anda bisa menyingkirkan masalah blocking rendering dan memicu proses loading yang lebih cepat.<\/p> Script penting yang sekiranya vital untuk loading halaman tidak akan menggunakan async atau defer attribute karena ini hanya diperuntukkan bagi script eksternal.<\/p> Tingkat <\/strong>kesulitan: <\/strong>sulit<\/p> Dampak: <\/strong>tinggi<\/p> Web worker<\/a> membantu mengurangi waktu blokir thread utama dan memperbaiki nilai FID website Anda. Web worker memungkinkan Anda memindahkan task panjang ke background thread tanpa mengganggu user interface, sehingga website Anda menjadi lebih responsif.<\/p> Gunakan kode Worker(“path\/to\/worker\/script”)<\/strong> untuk membuat worker. Kode ini bisa mengirim pesan ke kode JavaScript dengan memposting pesan ke event handler yang ditentukan oleh kode tersebut dan sebaliknya.<\/p> Selain itu, web worker bisa mengerjakan task input atau output menggunakan XMLHttpRequest<\/a> atau fetch<\/a>.<\/p> Untuk mempelajari cara menggunakan web worker, silakan kunjungi library berikut:<\/p> Tingkat <\/strong>kesulitan: <\/strong>sulit<\/p> Dampak: <\/strong>tinggi<\/p> 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. Nah, oleh karena itu, jalankan kode yang dibutuhkan saja.<\/p> Ada beberapa cara optimasi JavaScript, misalnya code-split dan defer JavaScript yang kurang penting. Sebelum mulai, Anda bisa menggunakan tab Coverage<\/a> di Chrome DevTools untuk mengecek seberapa banyak JavaScript yang tidak terpakai di halaman web Anda.<\/p> Code-split memungkinkan Anda memisahkan bundle JavaScript menjadi bagian-bagian kecil dan memuat halaman saat dibutuhkan saja. Langkah ini juga dikenal sebagai lazy loading<\/a>.<\/p> Sementara itu, untuk melakukan defer task Javascript apa pun yang bersifat kurang penting, selalu gunakan async atau defer<\/a> untuk script yang tidak diperlukan bagi critical rendering path<\/a> atau above the fold<\/a>.<\/p> Tingkat <\/strong> kesulitan: <\/strong>sulit<\/p> Dampak: <\/strong>rendah<\/p> Polyfill adalah kode yang digunakan untuk menyediakan fitur modern pada browser lama yang tidak mendukungnya secara native.<\/p> Contohnya, saat menggunakan sintaksis JavaScript modern dan API browser untuk menulis kode, Anda perlu melakukan transpile dan menyediakan polyfill agar fitur modern tersebut bisa berjalan di browser versi lama.<\/p> 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.<\/p> Untuk mempersingkat waktu loading halaman web Anda, gunakan compiler JavaScript seperti Babel, dan gunakan @babel\/preset-env<\/a> untuk menyertakan polyfill yang diperlukan bagi browser versi lama.<\/p> Anda juga bisa mengurangi penggunaan polyfill yang tidak digunakan dengan mengaktifkan opsi bugfix pada versi Babel 7.9.<\/p> Alternatifnya, deliver dua bundle yang terpisah dengan menggunakan module\/nomodule<\/a> untuk mengoptimalkan polyfill.<\/p> First Input Delay atau FID adalah metrik yang harus diuji dengan data lapangan berdasarkan interaksi nyata dari user. Selain itu, Anda harus memantau metrik lainnya yang masih berkaitan dengan FID.<\/p> Mari analisis secara lebih mendetail, metrik apa saja yang berkaitan dengan nilai FID.<\/p> First Contentful Paint berfungsi untuk mengukur seberapa lama halaman dimuat sejak loading awal, sampai konten ditampilkan di layar. Konten halaman berasal dari Document Object Model (DOM), yang mencakup gambar, teks, atau diagram.<\/p> Sementara itu, First Input Delay mengukur seberapa lama browser merespons. Keduanya berdampak signifikan pada kesan pertama user sebelum dan setelah berinteraksi dengan halaman. FID dan FCP memiliki kaitan yang erat untuk memberikan kesan pertama yang lebih baik kepada user.<\/p> Selain itu, FCP yang cepat akan membantu user lebih menyadari bahwa informasi yang mereka minta sedang diproses, sehingga mereka tetap bersedia menunggu saat mengakses website.<\/p> Time to Interactive (TTI) mengukur seberapa lama halaman bisa sepenuhnya interaktif. Pengukurannya dimulai setelah FCP dijalankan, dan ketika user bisa berinteraksi dengan halaman.<\/p> Sepenuhnya interaktif di sini berarti halaman bisa merespons interaksi user dalam waktu kurang dari 50 ms<\/strong>, dan event handler terdeteksi pada sebagian besar elemen halaman yang terlihat.<\/p> Dengan mengetahui nilai TTI ini, Anda bisa mengidentifikasi apakah halaman website Anda bisa sepenuhnya digunakan. Selain FID yang bagus, halaman Anda bisa menjadi interaktif sepenuhnya sesuai kebutuhan pengguna.<\/p> Total Blocking Time (TBT) dan FID cukup mirip. Keduanya mengukur lama waktu respons pada halaman. Bedanya, TBT tidak menggunakan user input. Singkatnya, TBT adalah seberapa lama task panjang memblokir thread utama.<\/p> Task Javascript yang panjang pada halaman web bisa memengaruhi nilai FID dan TBT. Dengan mengamati metrik FID dan TBT, Anda bisa melihat seberapa signifikan dampak task panjang tersebut pada tingkat respons website.<\/p>Cara Mengetahui Skor First Input Delay<\/h2>
\n
![\"core](\"\/tutorial\/wp-content\/uploads\/sites\/37\/2024\/04\/core-web-vitals-desktop.png\")
<\/figure><\/div>Berapa Nilai FID yang Bagus?<\/h3>
![\"nilai](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/nilai-fid-yang-baik.png\/public\")
<\/figure><\/div>Max Potential First Input Delay<\/h3>
![\"kriteria](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/kriteria-nilai-first-input-delay.png\/public\")
<\/figure><\/div>Apa Penyebab Nilai FID Rendah?<\/h2>
![\"pagespeed](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/05\/pagespeed-insights.png\/public\")
<\/figure><\/div>8 Cara Optimasi First Input Delay (FID)<\/h2>
1. Pecah Task Panjang Menjadi Bagian Kecil<\/h3>
2. Terapkan Progressive Loading<\/h3>
3. Pindahkan Logic ke Server-Side<\/h3>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/public\")
<\/a><\/figure>4. Hasilkan Konten Secara Statis<\/h3>
5. Tinjau Eksekusi Script Pihak Ketiga<\/h3>
6. Manfaatkan Web Worker<\/h3>
\n
7. Optimalkan JavaScript yang Tidak Diperlukan<\/h3>
8. Perbaiki Penggunaan Polyfill<\/h3>
First Input Delay Terkait Metrik Lainnya<\/h2>
First Input Delay vs First Contentful Paint (FCP)<\/h3>
First Input Delay vs Time to Interactive (TTI)<\/h3>
First Input Delay vs Total Blocking Time (TBT)<\/h3>