How to Improve “First Input Delay” (FID) in WordPress

As a part of Core Web Vitals tutorials, I covered about First Contentful Paint and now its time to work on “First Input Delay”.

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.

In simple words, when you visit a page, the text gets visible first followed by other elements. Even though texts are visible, you won't able to scroll the page or zoom images or click any elements that are powered by JavaScripts. After a few times, these elements will be available for interaction.

This is what FID Measures. “The time taken for the user's first interaction to the time of browser responding to interaction”

Which is responsible for poor FID? JavaScripts.

You need to optimize the Javascript parsing and execution on your web pages to improve FID.

Coming next is my favourite Javascript optimization techniques. They are

1. Remove Unwanted JavaScripts

When it comes to WordPress, the poorly coded themes and plugins are the main cause for poor JavaScript experience on your sites.

Your ultimate aim should be choosing a good framework based WordPress themes and not using a cheap theme.

Before optimizing any JavaScripts, you can check the JavaScripts running on your site and remove unwanted ones.

Open your site homepage, Right-Click and click on “Inspect Element” and navigate to “Network” Tab. Now select JS and you'll see all the JavaScripts belongs to your site.

This is one random site I choose from SERP results.

When you hover, Chrome shows which plugin takes more time to load. Obviously, you need to choose a good TTFB hosting to reduce initial server response time as written on LCP optimization.

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.

All the above three themes come with Vanilla JavaScript instead of jQuery which greatly reduces render-blocking resources just out of the box.

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.

2. Reduce JavaScript Execution

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.

3. Minify and Compress JavaScript

WP Rocket does this job with ease, although many free plugins like Auto Optimize does the same job. Since WP Rocket is an all-in-one optimization plugin, I recommend them for better results.

Along with Minify, few sites recommend to “Combine JavaScript Files” to reduce HTTP requests.

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.

4. Defer Parsing of JavaScript

To display a web page, the browser needs to render the HTML first.

When a browser tries to do this job and encounters a JavaScript, it has to stop, request the file, wait for it to download from server, and then execute it. Afterward, the browser continues parsing the HTML.

To avoid this, you need to stop render-blocking JavaScripts on your WordPress sites.

Go to the “File Optimization” tab in WP Rocket and enable the option ” Load JavaScript Deferred” and also select “Safe Mode for jQuery” to support inline jQuery references from themes and plugins.

5. Advanced JS Optimization

While the above optimization techniques can be achieved using plugins and codes, few of the JS improvement requires a developer.

Our team came across a site that uses Quizzes as their main monetization program which involves a large set of JavaScripts that perform Long Tasks.

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.

Concluding

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.