Oct 21, 2021
Time: 3:03 am
First Input Delay (FID) is an important metric when it comes to increasing conversion rate and now, thanks to the Page Experience update, it is important for SEO too.
FID gets a bit technical when it comes to optimizing for performance. FID is the delay between the initial page load and when the user makes their first interaction with the website. FID is different from Time to Interactive in the fact that FID is a user-centric metric. In other words, it is measured based on the user’s actions rather than a specific event. That is why you will not see an FID score when using the PageSpeed Insights tool, it can’t be simulated. FID is able to track user interactions that may occur before a page is fully rendered.
What is a Good FID?
According to Google, an FID of .1 second is what you should aim for. While it is important to optimize for FID, it isn’t always the best metric to measure actual user experience. While a user may click on a link or perform another input, the browser still has to execute that task, and if the main thread is still busy rendering the page, it may feel slow and clunky to the user. In order to improve FID, we can look at Total Blocking Time (TBT) which measures the time between the First Contentful Paint (FCP) and Time to Interactive (TTI), or the period of time the main threadwork is busy and unavailable to new user requests.
How to Improve FID
By focusing on TBT, you can determine which requests are blocking the main thread. One of the best ways to improve TBT, and therefore FID, is to remove unnecessary scripts in the <head> tags. Pull up the page in question, right-click and select ‘inspect’. Open the <head> tag and analyze what scripts are there.
If you have multiple stylesheets (<link rel=”stylesheet”) loading aside from those local to your template files, you may want to consider what options you have for removing features that require their own external stylesheet. In my case, Formidable Forms was running its own external stylesheet on every page of my website, including those that did not have a form. After a bit of research, I switched to Fluent Forms, which still offered the functionality I needed in a lightweight package, and best of all it only loads the stylesheet on pages that actually use the form.
Another example of external scripts might be using several different fonts. A current client was using Google fonts, custom Elementor fonts, and Fontawesome. After a conversation with the client to discuss the value that using these separate fonts provided versus their user experience cost, we were able to remove two of the three external scripts which improved their PageSpeed Insights score by 10 points!
If your website uses a page builder (Elementor, DIVI, Themify), then you’re going to have a tough time when it comes to improving FID. In order for a page to render content, it has to load the CSS stylesheets. While these page builders make it incredibly easy to create a website as a non-developer, each new widget added to a page will generally produce its own external stylesheet. Consider hiring a WordPress theme developer to create a custom theme that fits your exact needs and doesn’t require external stylesheets.
Once you’ve sorted through what scripts can be removed or combined to reduce the load on the main thread, use async or defer attributes on less important scripts. Either of these methods will ensure that your scripts are not render-blocking by telling the browser to load them in the background alongside the rest of the tasks until the script is ready to execute.
Improving FID can involve a lot of testing, analyzing, and tough decisions. It is much easier to optimize page performance at the planning stage of a new website. To that end, hire a digital marketing company with the expertise to create a website that is visually appealing, easy to manage, and lightning-fast.