How to Optimize First Input Delay in WordPress: 13 Quick Fixes to Improve FID

Do you want to fix the first Input delay in WordPress? If you are looking for a simple guide to do that, keep reading this article.

When running a website or online store, ensuring the speed and performance of it is optimized is mandatory. No one likes slow websites. You will lose potential customers and conversions if the website takes too long to load.

This article will show 13 methods to improve FID in WordPress. So if you are into a complete guide on first input delay optimization, this is the right spot.

But first, let’s learn the first input delay and how to find it.

What is First Input Delay (FID)?

First Input Delay, also known as FID, is a value that tells how fast a website can handle user interactions. It displayed the time required between a user interaction, such as a link click, and how quickly the browser responded to the action.

According to Google’s web.dev, FID is one of the stable Core Web Vitals metrics for measuring load responsiveness is the number of seconds it takes for the page to respond after a user taps on it.

What is a good FID score?

A good First Input Delay score is typically less than 100 milliseconds. A score below 50 milliseconds is considered excellent, while a score above 300 milliseconds is considered poor.

If the FID of your website is under 100 milliseconds, you are doing great. On the other hand, if it is above 100 milliseconds, you should start checking what is causing the delay.

If you have too much unoptimized JavaScript, it can cause a delay in the loading time. Hence, you should optimize the JS code mainly to improve FID in WordPress.

FID is directly connected with user experience, so if your FID score is low, I highly recommend optimizing it.

How to measure FID score?

To optimize First Input Delay in WordPress, the first step is to test your website on the Google PageSpeed Insights tool and measure first input delay score. Compare your site’s FID score with the recommended FID score i.e. 100 ms.

You can also use tools like WebPageTest or Google Lighthouse (browser developer tools) which provide performance reports including FID measurements.

You can also check the overall performance of your site with all the Core Web Vitals field metrics in the Chrome user experience report on Google Seach Console and compare it with lab metrics if you want to check the affecting URLs one by one.

If the score is near the recommended value, I would suggest focusing on improving other core web vitals metrics like Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP), and First Contentful Paint (FCP). By doing so, the FID will improve over time.

Here is the latest Core Web Vitals report of our website and you can see that the FID is just 13 ms and we are passing in all the CWV key metrics.

Why Improving First Input Delay Is Helpful for Core Web Vitals

The First Input Delay has a significant impact on the user’s first impression of your website. A low FID score indicates a fast and responsive website, which creates a positive first impression. On the other hand, a high FID score suggests a slow and unresponsive website, which can lead to a negative first impression and potential user abandonment.

Improving the first input delay has so many advantages. Some of the popular benefits are:

• Good for Search Engine Optimization (SEO)
• Improves user experience
• Reduces bounce rate
• Improves PageSpeed Score

Now you know how optimizing the first input delay could be helpful. Next, let’s move to the article’s core, where you will learn how to properly enhance the first input delay in WordPress.

How to Optimize First Input Delay in WordPress – Fix FID

To enhance the First Input Delay score, our objective should be to decrease the time to interactive during real user interaction. Here are many ways you can tweak to improve the FID in WordPress. This article will show you the best methods like:

• Using a lightweight theme
• A CDN with full-page caching
• JavaScript minification
• Removing unused CSS
• Deferring JavaScript
• Reducing page builder uses
• Enabling performance mode in page builders
• Hosting third-party code locally
• Unloading unused JavaScript
• Lazy rendering of HTML elements
• Removing plugins that solely depend on jQuery
• Delaying JavaScript code
• Using Brotli compression

Below, we will explain how to do these tasks and how much impact it will make on your FID improvement.

1) Use Lightweight Themes and Plugins

When you do not need fancy features, stick with a lightweight theme. Many well-coded, lightweight themes exist, like GeneratePress, Astra, Kadence, etc.

These themes could be a great addition to your WordPress website or WooCommerce store if you prefer a speed-optimized experience.

While fancy themes add features like a slider and transition effects to your page, JavaScript usage is increasing. This is bad for FID, and we recommend avoiding such practices.

Similarly, you should also choose only well-coded plugins. You can find multiple free, freemium, and premium plugins for a single task. Choosing a well-coded plugin will always help you to improve the load times of your website. Our recommended caching plugins to improve core web vitals are FlyingPress, Perfmatters, and WP Rocket.

All in all, choose a lightweight theme and well-coded plugins for your website.

2) Use CDN and Full Page Caching

Using a CDN service will always help you secure your website and optimize it for performance. There are so many free, freemium, and premium CDN providers available. But I won’t recommend all of them.

Here are the options I would prefer:

• BunnyCDN
• Cloudflare Enterprise
• KeyCDN

You must avoid SiteGround’s CDN option and WP Rocket’s in-house CDN called RocketCDN. Compared to other providers, they still have room for improvement.

Once you have added your website to the content delivery network, the first input delay will be improved.

3) Minify JavaScript

You should remove unnecessary characters and reduce JavaScript file size by minifying them to improve FID.

Most performance optimization plugins like WP Rocket, FlyingPress, and W3 Total Cache can help you with the task.

Here’s how you can minify JavaScript with WP Rocket.

Sometimes, minifying the JavaScrip files can cause problems in the front end. If you are experiencing any issues, you should revert the changes.

In earlier days, both the CSS and JavaScript minification was recommended to improve the core web vitals. But nowadays we have tools to completely eliminate the unused CSS and then use the minified version of it. Will discuss more on it in the next section.

4) Remove Unused CSS

As the name says, unused CSS is not part of your website. So if you remove them, there won’t be any issues. Since unused CSS can affect the first input delay score, it is better to remove them.

I won’t recommend using WP Rocket for removing unused CSS. As WP Rocket will increase the HTML size by inlining the used CSS, and the page will become heavier.

The ideal tools to remove unused CSS are Perfmatters and FlyingPress. From the Asset settings of Perfmatters, you can see the option to remove unused CSS.

You can also exclude stylesheets from the settings. Removing unnecessary CSS reduces render-blocking resources, thereby decreasing blocking time and improving the First Input Delay (FID).

There are 1% chance that after removing unused CSS, your site or its design may not work properly. In that case, instead of completely removing the unused code, you can load the unused CSS files in the footer of your site. It will prevent anything from breaking and will not impact on First Input Delay.

Let’s see how reducing page builder usage will help optimize the FID.

5) Reduce Page Builder Usage

You can create stunning landing pages or custom designs with a page builder plugin like Elementor or Divi Builder. While this is a good thing visually, page builders can severely affect your website’s performance, including FID.

You should reduce the use of page builder plugins on your website. Instead, you can try some FSE Themes (Full Site Editing themes) available in the market.

I have tested FSE themes like Spectra One, Neve FSE, and Raft, which are good. Since they completely avoid every page builder plugin, you can expect a quick boost in the FID score.

If you still can’t avoid any page builder plugins, you can enable the performance mode of the page builder plugin. We will explain the performance mode later in this article.

6) Defer JavaScript Loading

Another method we have for you to improve FID in WordPress site: deferring JavaScript.

Most WordPress performance optimization plugins come with this feature. Here’s how you can defer JavaScript with Perfmatters.

Under Assets > JavaScript, you can see the option to defer the existing JavaScript files.

You can also exclude certain JavaScript files from deferral from the same page. Reducing the Javascript execution time above the fold ultimately enables your site to respond more quickly.

After deferring JavaScript, you can turn off this option if you see any issues in the website’s front end.

7) Activate Performance Mode In Page Builders

If you can’t run your website without page builder plugins like Divi Builder or Elementor, activate the performance mode in the settings. Both Elementor and Divi Builder have performance optimization settings.

You can optimize the JS files and improve the First Input Delay score by enabling it. Here’s how you can enable performance mode in Divi Builder. If you go to the Divi theme settings page, you can see a Performance tab under General Settings.

There, you can see every speed optimization options that will help you improve the performance of your Divi-powered website.

Now, let’s see how to optimize an Elementor-powered website similarly. Go to the Elementor settings, then Experiments and Features.

Scroll down until you see the Improved Asset Loading feature.

Once you have marked it as Active, you are good to go. What the feature does is it will only load the JS code when necessary. You can reduce the JS code size and fix the first Input delay in WordPress site by activating it.

Next, let’s see how hosting third-party code locally can help us improve FID in WordPress.

8) Host Third-Party Scripts Locally

Instead of calling third-party scripts from their servers, I highly recommend hosting them on your server. The main two scenarios where you handle third-party JS codes are

• Google Fonts (https://fonts.gstatic.com/)
• Google Analytics (https://google-analytics.com/)

With the Perfmatters plugin, you can host these external JS codes locally. Here’s how to host Google Fonts locally using Perfmatters.

Open the Perfmatters options and go to Fonts. There, you can see an option for hosting the fonts locally. Enable it and save the settings.

To host Google Analytics locally, go to the Analytics settings. Next, enable local analytics.

There are multiple script types:

• analytics.js
• gtag.js v4
• gtag.js
• Minimal
• Minimal inline

You can pick an option based on your preferences.

This way, you can host Google Analytics and Google Fonts locally.

In the next step, you will learn how to unload unused JavaScript properly and fix the first Input delay in WordPress.

9) Unload Unused JavaScript

Unloading unused JavaScript is another excellent option to fix the first Input delay in WordPress. With the Perfmatters plugin, you can do the task.

The first thing you need to do is enable Script Manager. The script manager helps you unload unnecessary scripts on your WordPress site.

Next, go to a page in the front end and open the script manager options. There, you will see the scripts loaded by plugins.

By default, all the scripts will be loaded everywhere on your website. But through the script manager settings, you can disable specific scripts from loading where it is not required.

For example, if you use a social media sharing plugin like Social Snap, you only need to enable it on posts. Turning it off everywhere else will help you optimize your website.

Similarly, if you use any slider plugins, enable the scripts only where you have embedded the sliders.

If you are turning off a specific script, deactivate it individually.

On the other hand, if you will turn off the entire plugin, use this option.

You can choose the locations from the settings and disable the plugin from loading CSS and JS scripts.

That’s it!

10) Lazy Render HTML Elements

Similar to lazy loading images, you can also lazy render HTML elements. With a plugin like FlyingPress, you can do it.

Enter the non-critical CSS selectors loading below the fold in FlyingPress’s lazy render HTML elements settings and save it.

Once you have done it, the HTML elements will be only rendered when needed. Hence, it can save you loading time and improve FID.

11) Remove Plugins That Use jQuery

jQuery can affect the website’s speed and first input delay in WordPress. It is recommended to eliminate every plugin that depends on jQuery.

With Perfmatter’s script manager tool, you can find the plugins that depend on jQuery. This section will show you how to find the plugins that can negatively impact the FID score.

Open the script manager settings and enable the Display Dependencies option.

Next, open the script manager and scroll down until you see the jQuery section. There, you can see all the plugins that depend on jQuery.

You could avoid these plugins and use alternatives that come with lightweight code and don’t need jQuery.

Next, let’s learn how to delay JavaScript code and fix the first Input delay in the WordPress site.

12) Delay JavaScript Code

The next thing you should do is delay JavaScript files. When you enable this feature, the JavaScript files will be loaded only after user interaction. This feature could be used for the JS code that can’t be hosted locally which will improve page loading speed.

You can see the option to delay JavaScript from the Assets > JavaScripts section under Perfmatters settings.

You can delay specific scripts or all scripts from the settings page. While you delay specific scripts, you must enter the file’s name in the box.

Another notable feature of Perfmatters is you can also set up a delay timeout.

The delayed scripts will be loaded automatically if no user interactions are reported.

Once you have enabled this, save the settings. This is how you can delay JavaScript to fix the first Input delay in WordPress.

13) Start Using Brotli Compression

GZIP and Brotli are compression methods you should use to make your website’s files smaller. Brotli offers a better compression ratio than Gzip, which hundreds of thousands of websites use worldwide.

To improve the FID, enabling the Brotli compression is a good idea. Sadly, only a few web hosting providers come with the compression method in-built. The one that supports Brotli is Rocket.net.

Hence, you should contact your web hosting provider and check if they have this feature. Or, if you use Cloudflare, you can enable Brotli compression from there.

You can find the options by going to Speed > Optimization > Content Optimization.

That’s it!

Potential causes of High First Input Delay Score

Some potential causes of high First Input Delay scores include:

• Excessive rendering time due to heavy JavaScript and CSS.
• Long tasks that block the main thread.
• Slow server response time.
• Large and uncompressed image files.
• Render-blocking JavaScript and CSS resources.

Identifying and addressing these issues can help reduce First Input Delay score and improve initial page load time. These causes not only impact the FID but also impacts other CWV performance metrics as well.

Conclusion

Improving the core web vitals is mandatory for running your website smoothly. Since Google uses website speed as one of the ranking factors, I recommend checking the speed of your website and tweaking it to make it better.

This article has shown you actionable methods you can use to fix the first Input delay in WordPress. All the methods are easy to follow.

You can choose any performance optimization plugin like Perfmatters, FlyingPress, or WP Rocket. All the options come with optimization features that will help you score better in FID tests.

Which method did you use for boosting the first input delay score?

Have you got a better score than before?

Let me know in the comments.