{"id":11468,"date":"2023-11-06T08:12:31","date_gmt":"2023-11-06T08:12:31","guid":{"rendered":"https:\/\/www.20i.com\/blog\/?p=11468"},"modified":"2025-01-15T12:50:40","modified_gmt":"2025-01-15T12:50:40","slug":"first-input-delay","status":"publish","type":"post","link":"https:\/\/www.20i.com\/blog\/first-input-delay\/","title":{"rendered":"First Input Delay (FID) &#8211; What It Is &amp; How to Optimise It"},"content":{"rendered":"\n<p>Website speed is massively important. It can be a make-or-break factor between a website which thrives, and one which struggles.&nbsp;<\/p>\n\n\n\n<p>Speed isn\u2019t just as simple as \u201cfast\u201d and \u201cslow\u201d though, and there are multiple factors that contribute to a website&#8217;s overall load times.&nbsp;<\/p>\n\n\n\n<p>One of these factors is something called First Input Delay \u2013 often referred to as FID.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Is FID?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>First Input Delay (FID) is a measurement of the time (delay) between a user making an interaction with a website, and the browser beginning to process that interaction.&nbsp;<\/p>\n\n\n\n<p>In simplified terms, FID is how long a website takes to start doing what the user is telling it to do.&nbsp;<\/p>\n\n\n\n<p>FID focuses on interactions which require a load time, such as clicks, taps, key presses, and custom JavaScript events. Other interactions such as scrolling or zooming are not measured by FID.&nbsp;<\/p>\n\n\n\n<p>The benchmark FID time to aim for is 100ms or less for 75% of all page loads. This is the response time that is classed as feeling quick and \u201csnappy\u201d.&nbsp;<\/p>\n\n\n\n<p>Google sets the following thresholds for FID time.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>FID of 100ms or less is considered good&nbsp;<\/li>\n\n\n\n<li>FID of between 100-300ms needs improvement&nbsp;<\/li>\n\n\n\n<li>FID above 300ms is considered poor.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>It\u2019s important to remember that FID only focuses on the time it takes to <strong>start<\/strong> an interaction (otherwise known as input delay), and <strong>not <\/strong>the entire interaction.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Is FID Important?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>First impressions are vital, and FID is essentially the first impression that a user will get of a website&#8217;s responsiveness. <\/p>\n\n\n\n<p>If you want to make a good impression, then you want to ensure that your website feels snappy, and quickly responds to the user&#8217;s commands.&nbsp;<\/p>\n\n\n\n<p>Alongside this, the largest interactivity issues on a website often occur during page load, so in general, if you have a strong FID time, then the likelihood is that the rest of your website will follow suit and provide a positive interactive experience.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Effects of a Poor FID<\/strong>&nbsp;<\/h2>\n\n\n\n<p>The negative effects of a poor FID time are two-fold, affecting both user experience, and search engine optimisation.&nbsp;<\/p>\n\n\n\n<p>From a user perspective, an interaction with a poor FID element can make the experience feel laggy and jarring. <\/p>\n\n\n\n<p>Nobody is in a rush quite like an internet user, so if a visitor to your website feels that things are slow and not reacting properly, there\u2019s a high chance they will leave and go elsewhere.&nbsp;<\/p>\n\n\n\n<p>This can lead to poor user interaction metrics, and ultimately a drop in leads, sales, sign ups, or whatever your key goal is.&nbsp;<\/p>\n\n\n\n<p>Search engines don\u2019t like poor FID either. <\/p>\n\n\n\n<p>The benchmarks mentioned earlier come from Google for a reason, and that is because FID time is part of Google\u2019s \u201cCore Web Vitals\u201d metrics. These are metrics which Google believes are core to providing a great experience to users.&nbsp;<\/p>\n\n\n\n<p>Core Web Vitals (CWVs), and by extension FID, are Google ranking factors, so if you fail to meet the benchmark times set by Google, then you will be classed as \u201cfailing\u201d a core web vital, and your website may not rank as high in search results.&nbsp;<\/p>\n\n\n\n<p>FID is just one core web vital, alongside FCP, LCP, and TTI, however a failure in one area could see you fall behind a similarly placed competitor who has passed all the CWVs. This could lead to missed traffic, with a knock-on effect on sales or key business goals.&nbsp;<\/p>\n\n\n\n<p>A stat from one of Google\u2019s own case studies claims that \u201cWhen a site meets the Core Web Vitals thresholds, research showed that users were 24% less likely to abandon page load.\u201d&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Measure FID<\/strong>&nbsp;<\/h2>\n\n\n\n<p>FID is a field only metric and requires a real user to interact with your page. <\/p>\n\n\n\n<p>If there\u2019s no interaction on the page, then there is no FID time to score, so, to measure properly, FID requires a third-party tool to simulate a visit.&nbsp;&nbsp;<\/p>\n\n\n\n<p>As FID is a Google core web vital, it\u2019s often best to use a Google owned tool.&nbsp;<\/p>\n\n\n\n<p>Some examples of these tools include:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google PageSpeed Insights<\/a>&nbsp;<\/li>\n\n\n\n<li>Google Search Console&nbsp;<\/li>\n\n\n\n<li>Chrome User Experience Report&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Google PageSpeed insights provides the most \u201cuser friendly\u201d way to measure FID, as simply inputting a URL will calculate a score, alongside improvement suggestions.&nbsp;<\/p>\n\n\n\n<p>If you are measuring a website that you own, then the core web vitals section of Google Search Console provides reports for both mobile and desktop, which flag up any pages that require FID improvement.&nbsp;<\/p>\n\n\n\n<p>Aside from these tools, FID can also be measured on page using JavaScript. This can be done by using the web-vitals JavaScript library, or by using the Event Timing API if you\u2019d rather not import the web-vitals library.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Optimise Your FID Time<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Poor FID scores can be caused by a multitude of factors, most often related to website bloat, or the speed of which resources are provided.&nbsp;<\/p>\n\n\n\n<p>Interactivity time all boils down to the web browsers \u201cmain thread\u201d &#8211; which is responsible for executing tasks when loading. If the main thread has to many tasks to complete, then things get blocked and become slow. This is a separate non-CWV metric known as Total Blocking Time (TBT), which has a big knock-on effect on FID.&nbsp;<\/p>\n\n\n\n<p>Some of the most common steps to follow to improve your FID and TBT include:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Optimise JavaScript<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Excessively large or unoptimised JavaScript files are the most common culprit for slow FID and high TBT.&nbsp;<\/p>\n\n\n\n<p>Long tasks which block the browsers main thread consume a lot of time, which ultimately slows down the page&#8217;s interactivity. <\/p>\n\n\n\n<p>Long tasks should be broken down into smaller ones where possible, whilst all JavaScript should be minimised and compressed so that it is as efficient as possible. <\/p>\n\n\n\n<p>This includes loading scripts asynchronously and prioritising the loading of essential scripts.&nbsp;<\/p>\n\n\n\n<p>Any JavaScript that isn\u2019t essential to the initial page load should be deferred to avoid blocking the main thread on first load. <\/p>\n\n\n\n<div class=\"su-note\"  style=\"border-color:#e5cb4c;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\"><div class=\"su-note-inner su-u-clearfix su-u-trim\" style=\"background-color:#ffe566;border-color:#ffffff;color:#333333;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\">Here at 20i our hosting includes our website acceleration suite, which covers a lot of the initial JavaScript optimisation automatically.&nbsp;<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Use Server-Side Rendering&nbsp;<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Server-side rendering (SSR) refers to displaying web pages on the server.&nbsp;<\/p>\n\n\n\n<p>This is particularly useful for pages on a JavaScript framework, as it removes a lot of the \u201cheavy lifting\u201d from the browser itself. <\/p>\n\n\n\n<p>With SSR the work is done on the server, and so when the user interacts within the browser things should be a lot quicker.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Defer Offscreen Loading<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Any non-essential elements which are not immediately visible on page load should be deferred for loading later.&nbsp;<\/p>\n\n\n\n<p>This means that the browsers main thread has fewer initial tasks to deal with, and the user can begin viewing the page without the need to wait for all elements to be loaded.&nbsp;&nbsp;<\/p>\n\n\n\n<p>This reduces blocking time and helps all pagespeed metrics.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>CDN Integration<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Utilise a Content Delivery Network (CDN) to serve content from servers closer to the user. This reduces network latency and improves overall loading speed, which should provide a better user experience for all visitors across the globe (with a node in their region). &nbsp;<\/p>\n\n\n\n<div class=\"su-note\"  style=\"border-color:#e5cb4c;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\"><div class=\"su-note-inner su-u-clearfix su-u-trim\" style=\"background-color:#ffe566;border-color:#ffffff;color:#333333;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\">At 20i our <a href=\"https:\/\/www.20i.com\/cdn\">CDN<\/a> has nodes across 6 continents to ensure worldwide coverage.&nbsp;<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Prioritise Critical CSS<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Just like JavaScript, any other type of code that isn\u2019t optimised can slow down your website and ultimately effect TBT and FID. CSS should be assessed to ensure it is as efficient as possible. Use inlining with critical CSS to render the above-the-fold content faster.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Optimise Third-party Scripts<\/strong>&nbsp;<\/h3>\n\n\n\n<p>If you use third-party scripts, plug ins or add ons on your website, they may be increased your TBT and slowing down FID without you knowing.&nbsp;<\/p>\n\n\n\n<p>Review and minimise the use of third-party scripts and ensure they are loaded efficiently. Delay or asynchronously load non-essential scripts to avoid blocking the main thread.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reduce Server Response Time<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Invest in quality hosting services that provide fast server response times. Ensure that the server you are using is suitable for your website.&nbsp;<\/p>\n\n\n\n<div class=\"su-note\"  style=\"border-color:#e5cb4c;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\"><div class=\"su-note-inner su-u-clearfix su-u-trim\" style=\"background-color:#ffe566;border-color:#ffffff;color:#333333;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\">Here at 20i we use features such as caching and our global CDN, alongside autoscaling to make all the websites that we host load faster and provide future proofing in case of growth or traffic surges.&nbsp;<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reduce DOM Size<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Minimise the complexity of your website&#8217;s Document Object Model (DOM) by limiting unnecessary elements and keeping your HTML code clean and concise.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Test, Monitor, and Think of the User<\/strong>&nbsp;<\/h3>\n\n\n\n<p>As a long-term tactic, always keep user experience in the centre of your mind when making any website changes. Strip out anything \u2013 back end or front end \u2013 which doesn\u2019t directly serve the user and make all interactions as intuitive and hassle-free as possible.&nbsp;<\/p>\n\n\n\n<p>Continuously test your website&#8217;s performance and monitor FID. Tools like Google Search Console can provide valuable insights.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>INP &#8211; The Future of FID<\/strong>&nbsp;<\/h2>\n\n\n\n<p>As of mid 2023, Google have announced that FID will steadily be phased out of their core web vitals metrics and replaced with INP (<a href=\"https:\/\/web.dev\/articles\/optimize-inp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">interaction to next paint<\/a>).&nbsp;<\/p>\n\n\n\n<p>Like FID, INP will measure responsiveness to click, tap and keyboard interactions, however INP measures <strong>all<\/strong> interactions during a visit, as opposed to FID which only measures the first interaction.&nbsp;<\/p>\n\n\n\n<p>INP will officially replace FID as a core web vital in March 2024, so until then FID is still the metric to watch, however many of the optimisation points above apply to both metrics, so by having a strong FID you are more likely to have a strong INP too.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Optimising FID and TBT is an ongoing process, which should be addressed continually as your website evolves.&nbsp; <\/p>\n\n\n\n<p>By addressing this crucial performance metric, you can enhance user satisfaction, and provide a strong foundation for search engine visibility and online success.&nbsp;<\/p>\n\n\n<div class='code-block code-block-5' style='margin: 8px 0; clear: both;'>\n<hr>\n<br \/><a href=\"https:\/\/www.20i.com\/managed-cloud-servers\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2026\/03\/Blog-Ad-MCS-1200x625-1.png\" loading=\"lazy\" alt=\"Managed Cloud Hosting\"><\/a><\/div>\n\n","protected":false},"excerpt":{"rendered":"Website speed is massively important. It can be a make-or-break factor between a website which thrives, and one&hellip;","protected":false},"author":33,"featured_media":6042,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"ub_ctt_via":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[292,51],"tags":[80],"class_list":{"0":"post-11468","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-seo-digital-strategy","8":"category-technology","9":"tag-seo","10":"cs-entry"},"featured_image_src":"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2018\/09\/20i-blog-mobile-first-indexing.png","author_info":{"display_name":"Danny Watkinson","author_link":"https:\/\/www.20i.com\/blog\/author\/dan-watkinson\/"},"_links":{"self":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/11468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/comments?post=11468"}],"version-history":[{"count":11,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/11468\/revisions"}],"predecessor-version":[{"id":11681,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/11468\/revisions\/11681"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media\/6042"}],"wp:attachment":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media?parent=11468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/categories?post=11468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/tags?post=11468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}