First Input Delay aka FID is a part of Core Web Vitals which is also going to be an ranking factor in 2021.
There is no better time than now to optimize your sites for Core Web Vitals and let us learn optimizing FID in WordPress.
Optimize First Input Delay (FID) in WordPress
At first, let's see, what is First Input Delay?
First Input Delay (FID) measures the time taken between a user's first interaction in the page to the time taken by browser to respond to the interaction.
This is what FID Measures. “The time taken for the user's first interaction to the time of browser responding to interaction”
Your ultimate aim should be choosing a good framework based WordPress themes and not using a cheap theme.
This is one random site I choose from SERP results.
Now sort time and check every JS of your site. Without seconds thoughts, remove plugins that are needed from least to moderate level. Some of the most common plugins which inject such JS are
- Page Builders like WPBakery
- Social sharing like AddThis, ShareThis
- Related posts plugins like YARP
- Security plugins like Wordfence
- Fancy Designer plugins etc.
I'm a big fan of page builders but later realized, they are meant to be to design landing pages alone and not to use on regular blog posts.
If your hosting company has WAF security, you don't need a security plugin. Choose a theme that comes with inbuilt social sharing, related post options, and not dependent on Page builders. Neve is one such theme that impressed me in the last few months and not to forget Astra and GeneratePress which are also got developed with fewer JS.
While I showed an unoptimized site above and here is how bloggingio.com JS looks like
I just kept the most essential JS and removed the rest of them which is why our Core Web Vitals results are better.
The JS generated by your plugins will load on all pages irrespective of the use case. Thrive Ultimatum is a great marketing plugin to improve conversions. But at the same time, the plugin JS loads on all pages even if you don't have any active promotions on your site.
Likewise, the page builders like Elementor will add a lot of JS elements even if you don't use them.
To optimize JS here, WordPress plugins like WP Asset CleanUp and PerfMatters helps you load selective JS per page. If you don't use page builders on a page, you can disable loading their JS. This is one of the underrated methods which can fix FID with ease in WordPress.
For this tutorial, I'm considering PerfMatters since it does the job easier than any other plugin in the market.
Once you installed the plugin, enable “Scripts Manager” under Extra tab.
Head to any URL that needs to be optimized and click on Scripts Manager” in Admin bar.
Now, the plugin shows all the CSS & JS loaded on the page and you can simple choose OFF to turn off the JS loading from the page.
But don't do that if your site uses HTTP/2 as it will harm the deliverability of your scripts. Concatenating JS files is need only if your site uses HTTP/1.
Also, instead of plugin-based JS minification, I recommend going for CDN based minify as explained in LCP post for better results.
How to Compress JS files in WordPress?
Brotli and Gzip are the two compression algorithms to perform this function. Ask your web hosting provider or look into your cPanel to enable these options.
To display a web page, the browser needs to render the HTML first.
5. Advanced JS Optimization
While the above optimization techniques can be achieved using plugins and codes, few of the JS improvement requires a developer.
Any JS task that takes more time for execution is considered as Long Tasks. Google recommends splitting-up of Long tasks that can reduce input delay on your site.
This is our very first copy to improve FID in WordPress. We are testing two modes of advanced implementations but the codes aren't the same for all sites, it requires intensive testing of site load time and code adjustments.
I'm also exploring any new plugins which can optimize FID further and I'll update further on this.
/see you all soon.