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.
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:
- 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.
Most of these tools simply show the FID value in their results so you know what you are dealing with.
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.
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.
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
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.
Reduce the Overall Markup
Async and Defer Scripts
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.
Here’s what using
defer looks like in practice:
<script async src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script> <script defer src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script>
As you can imagine, both of these methods can result in significant time saved during page load. Their main difference:
defer keeps the relative order of scripts the way they appear in the document, while
async uses the order in which the scripts are done downloading.
It further reduces the file size and makes them faster for the browser to download. There are plenty of tools out there to do this, including the plugin recommendations below.
Break Up Long Tasks
What are long tasks, you ask?
Anything that blocks the main thread for more than 50ms. You can see these in Chrome developer tools marked with red flags.
If you cut them down into smaller parts, you can load them asynchonously, resulting in less uninterrupted work in the main thread.
How do you do that?
For more very technical tips on how to handle long tasks check this resource.
Useful WordPress Plugins to Improve FID
- Plugin Organizer — Change the order in which plugins load on your site and selectively switch them off on chosen pages or content types.
- Autoptimize — Can combine and minify CSS and JS files automatically as well as add
deferto scripts. It’s also super easy to use.
- WP Rocket — A paid caching plugin that can do a lot of what we talked about above. Generally, most caching plugins offer similar functionality.
Final Thoughts: First Input Delay in WordPress
FID is one of the metrics that make up the triumvirate of Core Web Vitals and it measures the interactivity of web pages. Since nobody likes sluggish web experiences, this is an important part of user experience. By focusing on improving First Input Delay, website owners and developers can provide a more responsive user experience, and ultimately improve user satisfaction and engagement.
Do you have any other tips to improve First Input Delay on WordPress websites? Share your thoughts and recommendations below!