When you click something and it takes a long time to respond, that’s First Input Delay (FID).
Here’s what to do:
- Delay remaining third-party code
- Lazy render HTML elements
- Remove jQuery-dependent plugins
- Avoid bloated themes + page builders
- Activate built-in page builder optimizations
- Don’t use page builders for your header, footer, sidebar
- Remove unused CSS (not in WP Rocket)
- Use a host with Brotli compression
- Use a CDN with full page caching
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.
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.
- 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.
9. Activate Built-In Page Builder Optimizations
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.
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.
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.