As your site traffic increases, you’ll want to ensure that things continue to run smoothly. If visitors have to wait more than a few seconds for your page to load, they’ll likely leave your site and may never come back.
Fortunately, there are some simple tests to evaluate your performance and, if improvements are needed, there are solutions that can almost immediately improve your loading times.
In this post, we’ll discuss one aspect of site performance: First Input Delay. You’ll learn what it is, why it’s important, and how you can measure and improve the FID score on your WordPress site.
An introduction to first input delay
First Input Delay (FID) is the loading time a visitor experiences after interacting with your website for the first time. Essentially, when someone clicks on a link or taps a button, they have to wait for their browser to respond. If your site has a high FID score, visitors wait for longer periods.
FID is one of the main metrics of Core Web Vitals. Created by Google, this report measures the performance of web pages.
Here are the three main performance metrics that are included in the Core Web Vitals report:
- Largest Contentful Paint (LCP): this measures the time it takes your website to load after a user requests the URL.
- First Input Delay (FID): this is the time it takes your website to respond after a visitor interacts with a page.
- Cumulative Layout Shift (CLS): this measures all the layout shifts that occur while a page is loading.
Although all of these metrics evaluate your website’s user experience, your FID score is one of the most important. If your page doesn’t load quickly, it can leave a poor first impression. In fact, a one-second delay can decrease visitor satisfaction by 16 percent.
Here are some benefits of improving your FID score:
- A boost in your visitors’ average time on page
- A reduction in your bounce rate
- An increase in conversions
Potential causes of a poor FID score
When you run a Core Web Vitals test, the report will give you a First Input Delay score. An acceptable FID is 100 milliseconds or less.
A poor FID score is anything higher than 300ms. This can be caused by a few different factors.
Another factor can be third-party scripts. If your website has many third-party analytics codes and tags, this can increase your page’s latency. Sometimes, browsers can prioritize these scripts, delaying the loading of other content on your site.
How to measure your website’s FID score
Now that you know what First Input Delay is, it’s time to put your website to the test.
There are several Core Web Vitals tools you can use to check your FID. If you receive a poor report from any of these tools, you can take action to improve your website.
1. PageSpeed Insights
One well-known tool you can use is PageSpeed Insights. This enables you to assess your website’s performance on a variety of factors.
After you enter your website’s URL, PageSpeed Insights will give you a detailed performance analysis. At the top of the page, you can see whether your site has passed the Core Web Vitals assessment.
Using this report, you can review your website’s FID score, which will be measured in milliseconds. As we mentioned earlier, any score under 100ms will pass the test.
Note that you’ll need to check your site’s performance for both mobile and desktop browsers. You might notice slight differences in your FID score on these two devices.
This is one of the fastest ways to measure the First Input Delay on your website. If you need a quick overview of your web performance, this could be the right tool for you.
2. Google Search Console
Similar to PageSpeed Insights, Google Search Console is a free tool that you can use to evaluate site performance. With this service, you can view traffic data for your site and troubleshoot specific issues like First Input Delay.
To start using Google Search Console, you’ll have to verify your website ownership. There are several ways to do this, but we’ll outline the HTML file upload method. Start by entering your domain or URL prefix.
Then, download the HTML file that has been generated for you. You’ll need to upload this file to your site’s root directory before you can employ the features of Google Search Console.
After verification, you’ll be able to access your dashboard. Here, you can navigate to the Core Web Vitals tab.
Unlike PageSpeed Insights, it may take some time to access your report if you’re new to this tool. Also, you may not be able to see a report if your site doesn’t get enough visitors.
Google Search Console can give you similar metrics on your FID score. You’ll receive an evaluation of Poor, Needs Improvement, or Good based on real-world usage data.
Lighthouse is a web development tool that you can use to audit the performance of any web page. Although it doesn’t directly measure First Input Delay, it will give you the Total Blocking Time (TBT). You can use this as a proxy for FID.
Put simply, TBT evaluates how well your site responds to user input. Like FID, TBT measures the delay between the First Contentful Paint (FCP) and the Time to Interactive (TTI). Since they’re so similar, you can use TBT to gauge your FID score.
To view Lighthouse’s report on your website, you’ll need to right-click on your web page. Then, choose Inspect.
At the top of the generated code, find the double arrow icon. Then, click on it and select Lighthouse.
On the next page, you’ll see an option to generate a report. When you click on this, Lighthouse will audit your website.
After the audit is complete, you can view detailed analytics on your site’s performance. You’ll also see reports on your SEO and web accessibility.
Then, scroll down until you see Metrics. In this section, you’ll see your Total Blocking Time.
Although TBT and FID are similar, it’s important to note that FID is a field metric. Since it’s based on users in real-time, it can’t be measured in a lab setting.
Lighthouse is a lab metric tool, so its Total Blocking Time metric won’t assess real interactivity. Fortunately, improving your TBT score can also improve your First Input Delay.
How to reduce first input delay in WordPress
When you test your website using one of the above tools, you might receive a poor First Input Delay score. Fortunately, you can improve your score by implementing a few effective strategies.
Let’s look at how to reduce First Input Delay in WordPress.
1. Install an optimization plugin
An easy way to get started is to install a plugin that focuses on Core Web Vitals. By doing this, you can improve your First Input Delay without any heavy lifting.
Jetpack Boost is a powerful, easy-to-use plugin that you can use to optimize your Core Web Vitals. It provides many ways to boost your web performance and improve your FID score.
After activating Jetpack Boost, the tool will automatically give your site a performance score. You can view how fast your pages load on both mobile and desktop views.
Jetpack Boost is a free plugin. If you already have Jetpack installed on your WordPress website, you can activate Jetpack Boost from the dashboard.
Then, scroll down to the Opportunities section. Here, you’ll see suggestions for improving your web performance. Find where it says Eliminate render-blocking resources.
When you expand this section, there will be a list of resources that you can defer or eliminate altogether. On the right-hand side, PageSpeed Insights will show you how these changes can impact your loading time.
Finally, turn on this feature. When implemented, the switch will turn green. Now, try running your website through PageSpeed Insights again to see if your FID score has improved.
3. Defer non-critical CSS
Then, you can use the Jetpack Boost plugin to optimize your CSS. In your WordPress dashboard, navigate to Jetpack → Boost. Then, find the setting labelled Optimize CSS Loading.
After you click on this option, the plugin will automatically generate the critical CSS for your website. It will move this important information to the beginning of the page, which can help your content load faster.
Deferring non-critical CSS can enhance your overall performance. It should also improve your FID score on PageSpeed Insights.
If you installed a lot of plugins or a complex theme, your website could be running too many scripts. If a browser needs to execute a long list of scripts to load your website, it can lead to slow speeds.
If you know which theme or plugins are causing the problem, you might consider deleting them. Then, you can install different versions that are well-coded and more lightweight.
For example, you can click on Homepage and it will display all the loaded files on this page.
This information will be listed based on location. You can scroll down the page to see scripts from your plugins, themes, core software, and third-party sources.
There are two ways to remove a piece of script. You can unload it on this specific page or site-wide.
Once you remove unused scripts, click on Update. After this, you can clear your cache to immediately apply these changes.
When you’re finished, save your changes. You also have the option of emptying your cache after this process.
Start by writing keywords that identify the scripts you want to delay. For example, you can use “gtag” for a Google Tag Manager script.
7. Implement a content delivery network
Another effective option for improving your First Input Delay is to use a Content Delivery Network (CDN). This is a group of connected servers that can distribute your online content to users across the world.
When using a CDN, you can decrease the distance between your server and online visitors. This is because when someone visits your site, the content is delivered from the server that’s closest to their location. If you only have a single server in one location, it can take a long time to send data to international users.
Luckily, sites that utilize Jetpack already come with a free CDN. If you navigate to Jetpack → Settings → Performance, you can turn on the Site Accelerator.
Jetpack will optimize your images and static files. Unlike with other CDN providers, there’s no file limit. Plus, you won’t have to worry about extra monthly fees or a complicated management process.
Frequently asked questions about First Input Delay
So far, we’ve looked at how First Input Delay works and how you can improve your score. Now, let’s look at some common questions about FID.
How can I measure my WordPress site’s FID score?
You can easily measure your website’s First Input Delay score using a tool for Core Web Vitals. PageSpeed Insights is an easy-to-use option. All you have to do is enter your site’s URL and the tool will generate a detailed report on your site’s performance.
Google Search Console functions very similarly. After you verify that you own a website, you can view your FID report based on real-world visitor data.
You can also use Lighthouse. This tool gives you your site’s Total Blocking Time (TBT). Although this won’t display results from real visitors, it can give you a better understanding of your page responsiveness.
What is a good FID score?
Put simply, your site will fall into one of three scores:
- Good: 100 milliseconds or less
- Needs Improvement: ranges from 100ms to 300ms
- Poor: greater than 300ms
After you measure your FID score, any results over 100 milliseconds will require some adjustments.
How can I easily optimize my FID score?
Improve your first impression
When a new visitor interacts with your website, they expect their browser to respond quickly. If your site has a high First Input Delay (FID), it can cause users to leave the page without reading your content. By focusing on your site’s response time, you can improve the user experience and retain more visitors.