How to Improve First Input Delay (FID) on Your WordPress Site

We recently started off a new series on Google’s Core Web Vitals metrics with a post on Largest Contentful Paint. Here, we want to continue with the next candidate in line: First Input Delay or FID for short and how to improve it in WordPress.

In the following, we will take a deep dive into what FID is and how to optimize your WordPress website for it. You’ll learn to understand and measure First Input Delay, what value you should aim for, and how to improve it if necessary.

Note that this post assumes that you are already familiar with Google Core Web Vitals and their impact on user experience and search engine optimization. If you are unsure about any of this, check the first article in this series or our standalone post on Core Web Vitals.

What Is First Input Delay? A Definition

So, as already mentioned, FID is one of three metrics for measuring website user experience that Google considers as core values to judge how user friendly a website is. It’s also part of their search algorithm, so if you score badly on this, your search ranking will suffer.

However, what exactly is First Input Delay?

In short, FID quantifies the delay between the time a user interacts with a web page (such as clicking a button) and the time when the browser is able to respond to that interaction. This reflects the responsiveness of a web page.

While Largest Contentful Paint calculates how long it takes for a web page to become useful to a visitor, FID measures how well it stays useful by performing whatever action the visitor wants – even during load. Naturally, if your site is more responsive, it makes for a better user experience.

You probably know this from your own Internet usage. Ever been on a site that took way too long to react to your input? You didn’t like that, did you? Well, neither do your website visitors.

How Is FID Calculated?

FID is measured in milliseconds (ms). To calculate it, the browser tracks the moment a user interaction occurs on a page and the time it takes for the browser’s main thread to process that interaction. The FID score represents the delay between the two events. As a consequence, a low FID score indicates that the page is highly interactive and responds quickly to user input.

At this point, you probably have to questions: What is the “main thread”? And what counts as an interaction?

Here’s the answer.

The main thread is basically the browser’s work pipeline. All processes that are necessary to render and run a website run through it. If it is constantly busy, it takes longer before it can react to new input.

metal pipes as stand in for browser main thread

As for what counts as an interaction, that can be a click on a link, a tap on a button, using a drop-down menu, text field, checkboxes, or radio buttons, as well as pressing a key on your keyboard (e.g. Esc to close a popup).

What Causes FID?

First Input Delay is often highest between First Contentful Paint (when the first page element appears in the browser window) and Time to Interactive (when the page first becomes usable and responsive to user input).

Basically, input delay stems from when the browser is busy with something else while the user tries to do something. In that case, it can’t respond timely to the input, resulting in waiting time for the site visitor.

On the technical side, common culprits for this are:

  • Large JavaScript files that the browser needs to parse and execute
  • Render-blocking resources that it has to wait for
  • Heavy calculations, DOM manipulation, or resource-intensive processes
  • Slow network connections or high latency that can lead to delays in fetching website files and other resources
  • Activities that block the main thread, such as heavy animations, long-running CSS transitions, or large image processing

One last thing that is important to note about First Input Delay is that it will be replaced by another metric called Interaction to Next Paint (INP) in March 2024. However, for now FID is what we are working with, so it still matters that you get familiar with it.

How to Measure First Input Delay

You can test your website’s FID with pretty much the same tools as the other Core Web Vitals:

  • PageSpeed Insights — Simply enter your page URL and receive a report including your FID value.
  • Chrome User Experience Report — Google collects and compiles real user experience data from many websites through its browser. You can access this data through different tools, including those mentioned here.
  • Search Console — The Web Vitals report in Google Search Console lets you know about pages with bad FID readings.
  • web-vitals JavaScript library — If you are more technically inclined, you can build this JavaScript library into your website and get the information about Core Web Vitals from there.

Most of these tools simply show the FID value in their results so you know what you are dealing with.

fid metric in pagespeed insights

What’s important to note is that you need real user interaction for this metric. It is not something you can simulate in a lab-type environment. Therefore, your best sources for this is real user data like from the CrUX report.

If you want to test your site in a lab environment beforehand, your best proxy metric is Total Blocking Time. You can also find that in PageSpeed Insights, for example.

total blocking time in pagespeed insights

In addition, focus on the really worst cases of FID on your site, it will tell you the most about what is wrong.

What Is a Good First Input Delay?

That only leaves the question, what number should you shoot for? A good FID score is typically below 100 milliseconds. Scores between 100 and 300 milliseconds are considered to need improvement. Everything over 300 milliseconds indicate a poor user experience.

first input delay performance scale

So, with these benchmarks in mind, let’s learn how to make the First Input Delay on your site better.

How to Improve First Input Delay on Your WordPress Website

Improving FID mostly involves optimizing the web page’s performance and reducing any blocking tasks that may delay the browser’s response to user input. The most common culprit for the latter is heavy or incorrect use of JavaScript. For that reason, much of the measures below will focus on that. However, there are also other things you can do.

General Performance Improvement Measures

A lot of the techniques that we already covered for how to improve Largest Contentful Paint also apply when you want to make your FID better, including:

  • Optimize your website environment — The faster your website generally, the quicker resources can be delivered, reducing time to interactivity. Therefore, invest in quality hosting, themes, and plugins. In addition, reduce the number of plugins on your site and keep it updated. In addition, implement caching and compression.
  • Implement a CDN — Content delivery networks allow you to shorten the distance between the server and the user, also resulting in faster file delivery.
  • Eliminate render-blocking resources — Any parts of a website that stall the loading process negatively impact all parts of the user experience and Core Web Vitals. Eliminating them from your site helps correct that problem. More details on render-blocking JavaScript below.

For more tips, check out our article on how to speed up WordPress, how to reduce server requests, and about speed testing your website.

Reduce, Defer, Async, and Minify Your JavaScript

As mentioned, JavaScript is usually the main factor for bad FID results. Here is how you can optimize the markup on your site so that it doesn’t become a problem.

Reduce the Overall Markup

Of course, the best thing you can do is to reduce the overall JavaScript on the page. Check the Coverage tab in your browser developer tools to find the unused JavaScript on a web page.

coverage data of unused css javascript in chrome developer tools

See if it is necessary for your site as a whole or if you can remove the unused JavaScript altogether.

In WordPress, excessive JavaScript is often the result of too many plugins or themes that come with a lot of bells and whistles causing First Input Delay. So, if you want to get rid of it, check if there is a way you can eliminate some of them or switch to a leaner version.

Async and Defer Scripts

After that, the next step is to optimize JavaScript delivery to the browser. The main problem here is that, unless otherwise specified, when the browser encounters a JavaScript script in your website markup, it stops rendering HTML until the script has been downloaded and executed. This also referred to as the “render-blocking resources” mentioned above.

However, there are ways around it and they are based on two keywords:

  • async – Adding this to your script call allows the browser to download it in the background without pausing the processing of the page. It will only execute once downloaded, independently of the rest of the page.
  • defer – Very similar to async. It tells the browser not to wait for the script and instead keep building the page. However, in this case, it will load the script last, when the rest of the page has been fully built.

Related articles

Interaction to Next Paint (INP): WordPress Optimization Guide

Interaction to Next Paint or INP is the latest...

How to Add Widget Areas to WordPress (Block & Classic Themes)

container.before_widget and after_widget — Same as above but...

7 Must-Have Pages Every Website Needs (+ 11 Optional Ones)

What are must-have, essential pages for every website?Every website...

Real-Time Collaboration in WordPress: Here’s What to Expect

Bringing real-time collaboration or collaborative editing to WordPress will...

Case Studies

Finance and Budgeting Blog

Easy Extra Dollar is your trusted source for valuable insights into finance, budgeting, and investing. The platform is dedicated to helping individuals and families...

Marketing Gamut – Marketing Blog

Marketing Gamut is the ultimate platform for marketing enthusiasts, offering valuable insights, engaging content, and thought-provoking discussions on all things marketing. The client needed...

Business and Marketing Insights Blog

Business Analysis is a platform dedicated to decoding the complexities of business and marketing through comprehensive data analysis and strategic planning. The client required...