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:
Qode Themes: Top Picks
View Collection
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.
You can measure your website’s FID using PageSpeed Insights. You can also find information about it in the Core Web Vital Report in Google’s Search Console. In case you notice that the FID on the pages on your website tends to wander north of 100ms, you should react.
Remove Scripts and Minify Code
The reasons for a long First Input Delay are often that there’s simply too much going on for the website to be free to respond to a visitor’s command. Just think about all those JavaScript-heavy plugins you might be running, the complex theme you have chosen for your website, or all the fancy interactivity and animation features. The more you give the page to load when it’s first opened, the more likely it is it will increase the FID.
This problem is caused by both CSS and JavaScript, although JavaScript tends to be the bigger problem of the two. So, as part of your FID-reducing endeavor, you should assess the impact of your theme, the plugins, and the design choices on the input delay. You can try a lightweight theme like our Qi Theme instead of a heavy, complex theme. As for the plugins, removing the ones you don’t need and finding low-impact alternatives for the ones you do is an option.
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.
Selective Loading of JavaScript
Some WordPress plugins will be too useful to remove or substitute yet still bog your website down with JavaScript. Page builders tend to be like that – they load JavaScript even on the pages that don’t use them. And they’re not the only culprit.
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.
Defer and Async JavaScript
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.
Alternatively, you can also use the “async” attribute to execute some scripts as soon as possible. Again, you can add the attribute yourself, or use a plugin like Async JavaScript to help you out. Async JavaScript will also let you choose which scripts to award the “defer” attribute, too.
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.
