How to Reduce First Input Delay in WordPress
User experience is at the center of many activities that form the daily routine of website administrators and optimization specialists. Better user experience is a reason to improve website navigation. It’s also why you might want to improve website loading speeds, or even make sure you stick with a maintenance schedule – all of these things will help users find your website more enjoyable and easy to use.
The things you can do to improve the user experience on your website are many. Reducing the First Input Delay, or FID, of your WordPress website is one of them. Still, you can be forgiven for not having heard of FID, or not being sure what it is and why you should care about it – let alone how to optimize it. But don’t worry – we’re here to help!
In this article, we’ll show you:
First Input Delay is a metric – a measurement – that describes a specific aspect of a website’s interactivity. When someone visits your website and they interact with an element like a link or a button for the first time, you want them to experience your website as responding instantaneously.
Usually, however, that’s not what happens – there’s a small delay even before the website starts processing the request. That delay is what First Input Delay measures. Specifically, it’s the delay that occurs with the very first interaction with a page on your website.
You should note, however, that the First Input Delay isn’t the same as the time it takes for a page to become fully interactive. There’s a metric called Time to Interactive – TTI – that measures it, and there’s no reason why the first interaction with the website, when FID is measured, cannot happen while the website is still not fully interactive.
The First Input Delay isn’t the loading time, either. It’s not Total Blocking Time – TBT – which is a metric that measures how long the main thread is blocked so that it causes a website to become unresponsive. These two metrics are similar, though, as both measure the amount of time a website isn’t being interactive. The difference is that FID measures the lack of interactivity after user input, while TBT measures it in general, without user input.
First Input Delay is one of the three metrics Google included into its Core Web Vitals – a group of core metrics that signal to the search engine the quality of user experience a page provides. When Google says it pays attention to a metric and even considers it when judging the quality of your website – you take notice of that.
There are other practical reasons to keep an eye on your website’s FID. As opposed to the other two Core Web Vitals metrics – the Largest Contentful Paint (LCP) and the Cumulative Layout Shift (CLS) – as well as TBT, FID is a fielding metric. It’s measured only when a user is viewing the website and cannot be recreated in a test environment as the lab metrics can.
The threshold of 100ms for a “good” delay length is what people can tolerate before they start noticing that the website isn’t reacting to their activities instantaneously. Anything more than 300ms, and the FID is considered poor and detrimental to user experience.
Finally, FID measures the delay of the very first user interaction with your website – when first impressions are forged. That’s a crucial time when a small error can send the user looking for other websites before you’ve had a chance to win their trust.
The First Input Delay isn’t a perfect metric. Google even stated that it has plans to replace it and reduce some of its shortcomings, and those shortcomings are plenty. Scrolling, for example, doesn’t count as an event to measure FID. Measuring only the delay of the event, and not its full duration isn’t ideal. For now, however, FID will have to do.
Remove Scripts and Minify Code
You should also consider minifying the code on your website. You cannot possibly get rid of all the CSS, but you can make sure that it’s as streamlined as possible. Minifying the code won’t have the biggest impact on the FID, but everything that helps is more than welcome.
Luckily for you, you can use WordPress performance plugins such as Asset Clean Up that can help you recognize which scripts are loading with your pages and simply choose not to load the ones you don’t need.
The practice of deferring code means reducing its priority during loading, effectively making them load the last. This can come in handy if you want to deal with some render-blocking code or scripts, the type of code that will stop the website from rendering while it’s being executed. If the code or script isn’t critical for the workings of the page, you might use the “defer” attribute to run the code or script the last. Plugins like Hummingbird will do it for you.
Let’s Wrap It Up!
Unless you have a static website without a single interactive element on it, the First Input Delay is a metric that’s worthy of your attention. Thanks to it, you can get a sense of the quality of user experience your website is providing to people the first time they see each page. If you notice something’s wrong and some pages have a delay that’s bigger than a hundred milliseconds, you can do several things to try and get the delay under control.