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.
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
- Removing unused CSS
- Reducing page builder uses
- Enabling performance mode in page builders
- Hosting third-party code locally
- Lazy rendering of HTML elements
- Removing plugins that solely depend on jQuery
- 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
These themes could be a great addition to your WordPress website or WooCommerce store if you prefer a speed-optimized experience.
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
Here are the options I would prefer:
- Cloudflare Enterprise
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.
Sometimes, minifying the JavaScrip files can cause problems in the front end. If you are experiencing any issues, you should revert the changes.
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.
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.
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.
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:
- gtag.js v4
- Minimal inline
You can pick an option based on your preferences.
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.
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.
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.
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.
Potential causes of High First Input Delay Score
Some potential causes of high First Input Delay scores include:
- Long tasks that block the main thread.
- Slow server response time.
- Large and uncompressed image files.
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.
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.
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.
Why is First Input Delay important?
Because it directly affects the user experience. A low FID score means that your website responds quickly to user input, providing a smooth user interface and responsive browsing experience. On the other hand, a high FID score indicates that there is a delay in the actual user interaction, which can lead to poor user experience and abandonment of your site.
Check FID score in Google Search Console
You can check Google core web vitals metrics in the Experience section of GSC for both mobile and desktop. It categorizes the URLs of your site and shows poor URLs, URLs that need improvement, and good URLs. This CWV data comes from the Chrome UX report or the Chrome User Experience Report. That reflects actual usage data on your site from users around the world.