How to Improve First Input Delay (FID) in WordPress

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.

core web vitals assessment from Google

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:

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.

first input delay shown in Google PageSpeed

A poor FID score is anything higher than 300ms. This can be caused by a few different factors. 

One of the most common causes of high First Input Delay is heavy JavaScript code. If a browser has to execute a large JavaScript file, it can be too busy to execute other requests.

Having too many JavaScript-based plugins can negatively affect your loading times. Similarly, some themes can have complex files that cause the same problem.

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.

passed 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.

Google Search Console verification process

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.

core web vitals tab in Google Search Console

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. 

3. Lighthouse

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.

inspecting an element with Lighthouse

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.

generating a report with Lighthouse

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.

report from Lighthouse

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 speed score

Then, you can customize its settings to optimize your files for fast loading. By optimizing CSS, deferring JavaScript, and implementing lazy loading, you can improve your FID score.

settings in Jetpack Boost

Jetpack Boost is a free plugin. If you already have Jetpack installed on your WordPress website, you can activate Jetpack Boost from the dashboard.

2. Defer render-blocking JavaScript

Another effective way to optimize your FID score is by deferring render-blocking JavaScript. By default, all JavaScript on your website is render-blocking. This means that a browser will stop loading a certain page until it can download and execute these scripts.

In this case, you can defer JavaScript execution. This will tell the browser to render the most relevant content first. 

To identify this render-blocking JavaScript, you can use PageSpeed Insights. First, type your website’s URL into the search bar.

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.

render-blocking resources shown in Google PageSpeed

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.

Once you decide to defer non-essential JavaScript on your website, you can use a plugin to make this process simple. With Jetpack Boost, you can do this in just one step.

In your WordPress dashboard, navigate to Jetpack → Boost. Then, find the setting labelled Defer Non-Essential JavaScript.

defer non-essential JavaScript with Jetpack Boost

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

When you evaluate your website in PageSpeed Insights, you may also see other render-blocking resources. Similar to JavaScript, certain coding can prevent your page from loading while the browser reads them.

Just like with JavaScript, you can defer non-critical CSS. Start by running your website through a performance tool to see if your CSS needs to be optimized.

finding CSS that can be optimized with Google PageSpeed

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.

optimizing CSS with Jetpack Boost

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. 

4. Eliminate unnecessary JavaScript

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. 

Many scripts are necessary to display your website, but chances are, you have some unnecessary CSS and JavaScript. If you’re not sure how to tell the difference, you can go back to PageSpeed Insights.

Like you did with the first three methods, scroll to the Opportunities section. This time, look for unused JavaScript and CSS.

list of unused JavaScript on your site

Next to each unused script, there will be a URL that tells you where it’s coming from. In this example, Google Analytics and Google Tag Manager were creating some unnecessary JavaScript.

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. 

Alternatively, you can use a plugin like Asset CleanUp to remove unused CSS and JavaScript. This tool can eliminate render-blocking resources to decrease your site’s number of HTTP requests.

Once you’ve installed and activated Asset Cleanup on your site, go to Asset CleanUp → CSS/JS Manager in your dashboard. On this page, you can select different elements of your website to view its CSS and JavaScript. 

For example, you can click on Homepage and it will display all the loaded files on this page.

Asst CleanUp settings 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.

unloading code from plugins

Once you remove unused scripts, click on Update. After this, you can clear your cache to immediately apply these changes.  

5. Minify CSS and JavaScript

Although you can easily remove scripts from your site, you’ll only want to get rid of the ones you’re not using. For necessary CSS and JavaScript, you can simply minify them instead.

An easy way to do this is by installing the Autoptimize plugin. This is a free tool that can automatically minify your CSS and JavaScript files after a simple setup process.

After installation, go to Settings → Autoptimize. Under JavaScript Options, you can check the box next to Optimise JavaScript Code.

options to optimize JavaScript

Then, you’ll need to do the same for the CSS Options. By customizing these settings, the tool will automatically minify the existing CSS and JavaScript on your website.

options to optimize CSS code

When you’re finished, save your changes. You also have the option of emptying your cache after this process.

6. Delay JavaScript execution time

To optimize your JavaScript even further, you can delay its execution time. This involves telling the browser to only load the JavaScript after a user interacts with your content. Unless a visitor scrolls down the page or clicks on a button, these scripts won’t be processed.

To do this, you can use a plugin like Flying Scripts. With this tool, you can delay the execution of JavaScript files until there’s visitor activity on your site.

After you activate Flying Scripts, go to Settings → Flying Scripts. This will open the settings page for the plugin, where you can start implementing JavaScript delays.

FlyingScripts options

Start by writing keywords that identify the scripts you want to delay. For example, you can use “gtag” for a Google Tag Manager script.

Then, you can implement a timeout. Essentially, this will execute the JavaScript when there has been no activity for a certain period of time. You can set a timer for up to ten seconds. Once you’re finished, click on Save Changes.

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?

You can improve your FID score by optimizing the scripts on your website. Usually, complex JavaScript and CSS files will prompt a browser to stop loading until it processes them. By removing, deferring, or minifying scripts, you can boost your site’s speed.

Although you can use different tools for this process, Jetpack Boost can help you implement multiple solutions at once. Using this plugin, you can optimize your CSS structure and defer non-essential JavaScript.

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.

Your website can have a poor FID score due to heavy and inefficient JavaScript and CSS coding. Fortunately, you can easily identify these issues using a tool like Google’s PageSpeed Insights. Then, you can install a plugin like Jetpack Boost to minify or defer CSS and JavaScript.

This entry was posted in Performance. Bookmark the permalink.

Rob Pugh profile
Rob Pugh

Rob is the Marketing Lead for Jetpack. He has worked in marketing and product development for more than 15 years, primarily at Jetpack, Mailchimp, and UPS. Since receiving a Master of Science in Marketing Degree from Johns Hopkins University, he’s focused on delivering products that delight people and solve real problems.

Explore the benefits of Jetpack

Learn how Jetpack can help you protect, speed up, and grow your WordPress site.

Get up to 60% off your first year.

Compare plans

Have a question?

Comments are closed for this article, but we're still here to help! Visit the support forum and we'll be happy to answer any questions.

View support forum
  • Enter your email address to follow this blog and receive news and updates from Jetpack!

    Join 111,110 other followers
  • Browse by Topic

  • %d bloggers like this: