First Input Delay (FID) – What It Is & How to Optimise It

Website speed is massively important. It can be a make-or-break factor between a website which thrives, and one which struggles. 

Speed isn’t just as simple as “fast” and “slow” though, and there are multiple factors that contribute to a website’s overall load times. 

One of these factors is something called First Input Delay – often referred to as FID. 

What Is FID? 

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. 

In simplified terms, FID is how long a website takes to start doing what the user is telling it to do. 

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. 

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 “snappy”. 

Google sets the following thresholds for FID time. 

• FID of 100ms or less is considered good 
• FID of between 100-300ms needs improvement 
• FID above 300ms is considered poor. 

It’s important to remember that FID only focuses on the time it takes to start an interaction (otherwise known as input delay), and not the entire interaction. 

Why Is FID Important? 

First impressions are vital, and FID is essentially the first impression that a user will get of a website’s responsiveness.

If you want to make a good impression, then you want to ensure that your website feels snappy, and quickly responds to the user’s commands. 

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. 

Effects of a Poor FID 

The negative effects of a poor FID time are two-fold, affecting both user experience, and search engine optimisation. 

From a user perspective, an interaction with a poor FID element can make the experience feel laggy and jarring.

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’s a high chance they will leave and go elsewhere. 

This can lead to poor user interaction metrics, and ultimately a drop in leads, sales, sign ups, or whatever your key goal is. 

Search engines don’t like poor FID either.

The benchmarks mentioned earlier come from Google for a reason, and that is because FID time is part of Google’s “Core Web Vitals” metrics. These are metrics which Google believes are core to providing a great experience to users. 

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 “failing” a core web vital, and your website may not rank as high in search results. 

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. 

A stat from one of Google’s own case studies claims that “When a site meets the Core Web Vitals thresholds, research showed that users were 24% less likely to abandon page load.” 

How to Measure FID 

FID is a field only metric and requires a real user to interact with your page.

If there’s 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.  

As FID is a Google core web vital, it’s often best to use a Google owned tool. 

Some examples of these tools include: 

• Google PageSpeed Insights 
• Google Search Console 
• Chrome User Experience Report 

Google PageSpeed insights provides the most “user friendly” way to measure FID, as simply inputting a URL will calculate a score, alongside improvement suggestions. 

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. 

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’d rather not import the web-vitals library. 

How to Optimise Your FID Time 

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. 

Interactivity time all boils down to the web browsers “main thread” – 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. 

Some of the most common steps to follow to improve your FID and TBT include: 

Optimise JavaScript 

Excessively large or unoptimised JavaScript files are the most common culprit for slow FID and high TBT. 

Long tasks which block the browsers main thread consume a lot of time, which ultimately slows down the page’s interactivity.

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.

This includes loading scripts asynchronously and prioritising the loading of essential scripts. 

Any JavaScript that isn’t essential to the initial page load should be deferred to avoid blocking the main thread on first load.

Use Server-Side Rendering  

Server-side rendering (SSR) refers to displaying web pages on the server. 

This is particularly useful for pages on a JavaScript framework, as it removes a lot of the “heavy lifting” from the browser itself.

With SSR the work is done on the server, and so when the user interacts within the browser things should be a lot quicker. 

Defer Offscreen Loading 

Any non-essential elements which are not immediately visible on page load should be deferred for loading later. 

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.  

This reduces blocking time and helps all pagespeed metrics. 

CDN Integration 

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).  

Prioritise Critical CSS 

Just like JavaScript, any other type of code that isn’t 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. 

Optimise Third-party Scripts 

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. 

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. 

Reduce Server Response Time 

Invest in quality hosting services that provide fast server response times. Ensure that the server you are using is suitable for your website. 

Reduce DOM Size 

Minimise the complexity of your website’s Document Object Model (DOM) by limiting unnecessary elements and keeping your HTML code clean and concise. 

Test, Monitor, and Think of the User 

As a long-term tactic, always keep user experience in the centre of your mind when making any website changes. Strip out anything – back end or front end – which doesn’t directly serve the user and make all interactions as intuitive and hassle-free as possible. 

Continuously test your website’s performance and monitor FID. Tools like Google Search Console can provide valuable insights. 

INP – The Future of FID 

As of mid 2023, Google have announced that FID will steadily be phased out of their core web vitals metrics and replaced with INP (interaction to next paint). 

Like FID, INP will measure responsiveness to click, tap and keyboard interactions, however INP measures all interactions during a visit, as opposed to FID which only measures the first interaction. 

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. 

Conclusion 

Optimising FID and TBT is an ongoing process, which should be addressed continually as your website evolves. 

By addressing this crucial performance metric, you can enhance user satisfaction, and provide a strong foundation for search engine visibility and online success.