First Input Delay (FID) In WordPress: It Means You Need To Optimize JavaScript

When you click something and it takes a long time to respond, that’s First Input Delay (FID).

A low FID score is mainly due to unoptimized JavaScript added by themes, plugins, page builders, and third-party code. You can use the coverage report in Chrome Dev Tools to find your largest JavaScript files, then make optimizations based on where the files are loaded from.

Other than the obvious suggestion of using lightweight themes/plugins, any remaining JavaScript can usually be deferred, delayed, minified, removed on specific pages with Perfmatters, or by hosting fonts + analytics locally. And if you absolutely must use a page builder, don’t use it for your header/footer/sidebar, and use their built-in performance settings.

Because First Input Delay can’t be measured in the lab, Google recommends using total blocking time instead which happens to be a whopping 30% of your PageSpeed Insights score.

Here’s what to do:

 

1. Find Large JavaScript Files

Open your coverage report to view your largest JavaScript files. You can see if they’re from plugins (especially jQuery/WooCommerce plugins), your theme, or third-party code (like GTM). This is why using lightweight themes/plugins sounds obvious, but many people still don’t do it.

 

2. Host Third-Party JavaScript Locally

Some third-party code can be hosted locally which is faster than external requests from websites like Google Fonts (fonts.gstatic.com) and Google Analytics (google-analytics.com).

Perfmatters can do both and can also optimize your GA tracking code with a smaller script (i.e. analytics-minimal.js) and by disabling remarketing features to prevent requests to DoubleClick.

 

3. Delay Remaining Third-Party Code

For third-party code that can’t be hosted locally, delay it.

How you delay JavaScript depends on which optimization plugin you’re using. Perfmatters requires you to manually add JS files (same with FlyingPress and Flying Scripts), while WP Rocket does it automatically. If it requires you to add them, see this list of common JS files.

 

4. Defer JavaScript

Deferring JavaScript improves first input delay by loading it non render-blocking which responds faster to user input. If deferring JavaScript breaks your website, find the problematic files and exclude them. Otherwise, you may see the eliminate render-blocking resources error.

 

5. Unload JavaScript In Perfmatters

Perfmatters and Asset Cleanup unload JavaScript, CSS, and plugin on pages they’re not used.

First, enable the script manager. Then in the script manager settings, enable test mode to prevent things from breaking your site. Remember to disable this setting when you’re done.

Next, view any page on your site and go to Perfmatters → Script manager in your top menu. You’ll see a list of CSS/JS files loading on the page. If they’re not being used here, you have the option to disable them on current URL, all pages, all posts, and other options like using regex.

Examples

• Disable social sharing plugin everywhere but posts
• Disable contact form plugin everywhere but the contact page
• Disable slider plugin everywhere but pages/posts that use sliders

 

6. Lazy Render HTML Elements

Both FlyingPress and LiteSpeed Cache support lazy rendering HTML elements. This should improve total blocking time (and first input delay) by lazy loading any element on the page.

Inspect your website in Chrome Dev Tools, then copy non-critical CSS selectors loading below the fold (jump to 1:08 in the video). Common CSS selectors you can do this with are comments (#comments) and footer (#footer). Just make sure these are the correct selectors for your site.

 

7. Remove jQuery-Dependent Plugins

If you see jQuery errors in your PageSpeed report, it’s commonly from plugins.

Use Perfmatters to display dependencies, then check your script manager to see all plugins using jQuery. This obviously means removing plugins/themes using jQuery, but it’s worth it. Right now, Rank Math is the only plugin I use loading jQuery and I’m hoping to replace it soon.

 

8. Avoid Bloated Themes + Page Builders

I see Elementor/Divi users posting PageSpeed scores all the time in Facebook Groups.

That doesn’t mean you should use them. Both page builders add lots of extra JavaScript (and CSS) which definitely slows it down. While I get drag and drop page builders are easy, take it from someone who spent many months redesigning their site just to ditch Elementor. I use GeneratePress + GenerateBlocks but Kadence and Blocksy are good/lightweight options as well.

 

9. Activate Built-In Page Builder Optimizations

If you absolutely insist on using Elementor or Divi, both have performance settings that can reduce JS/CSS/fonts. For example, Elementor’s improved asset loading. Also avoid installing a bunch of extra page builder plugins since they’re known for adding even more CSS/JavaScript.

 

10. Don’t Use Page Builders For Your Header, Footer, Sidebar

Since these load across your site, you want them to be as small as possible.

The problem is that page builders add extra code, so by using it for these areas, you’re making your entire site load slower. You can still use your page builder to design pages, but consider coding these in CSS which is much more lightweight. WP Johnny even offers this as a service.

 

11. Minify JavaScript

Minifying files reduces their size and can be enabled in your cache plugin. Just like deferring JavaScript, if minifying files breaks your website, find the problematic files and exclude them.

 

12. Remove Unused CSS (Not In WP Rocket)

While removing unused CSS improves first input delay, don’t use WP Rocket for it.

It loads used CSS inline which is slow for users because it increases HTML size. Instead of the “inline” method, three other popular plugins (Perfmatters, FlyingPress, and LiteSpeed Cache), have the option to load used in a separate file. This is faster for visitors especially since the CSS file can be cached. In other words, WP Rocket’s “remove unused CSS” is slower for actual users.

 

13. Use A Host With Brotli Compression

The better compression, the smaller the files!

Brotli compresses pages to smaller file sizes than Gzip, but only a handful of hosts support Brotli. The one I’m on does (Rocket.net), but you should check with your host to see if they do.

 

14. Use A CDN With Full Page Caching

Have you tested your site in KeyCDN and checked your global TTFB?

When your server is far from visitors, it causes latency which adds to first input delay. While using a CDN should help, not all CDNs are equal and some perform much better than others.

I suggest avoiding WP Rocket’s RocketCDN as well as SiteGround’s CDN. They either have a small network or lack many features like HTTP/3, image optimization, and full page caching.

Cloudflare Enterprise is arguably the most performant CDN which you can get through Rocket.net (what I use), Cloudways, or FlyingProxy. The downside to Cloudways is that despite them saying full page caching is coming soon, they still don’t have it, and it’s $5/mo per domain.

QUIC.cloud is another great CDN and is available on LiteSpeed. It has a good-sized network with HTML caching and page/image optimizations which are integrated into LiteSpeed Cache.

BunnyCDN also has a good-size network with a higher Tbps compared to StackPath (what RocketCDN uses) and has solid features. And if you’re using FlyingCDN on FlyingPress, it uses BunnyCDN and includes Bunny Optimizer’s image optimization and geo-replication for $.03/GB.

Hope this helped! As always, lmk if you have questions in the comments.

Cheers,
Tom