Google Core Web Vitals: Eliminate render-blocking resources and reduce unused CSS in Joomla 4

Improve your Joomla 4 website Google Core Web Vitals score using a plugin to eliminate render-blocking resources and reduce unused CSS. 

Core Web Vitals score for Joomla website

We've been working on improving the core web vitals score for our Joomla website

Interesting to note that even though the site has had a low PageSpeed score, it hasn't stopped the traffic from increasing every month. And the user experience isn't bad, the site loads reasonably quickly and performs OK on both Desktop and Mobile.

What is the ideal page speed for better Google search ranking?

Google says core web vitals are important, so if it helps the site to rank, we should try to improve them

"We don't really have a threshold to giveaway but basically the recommendation is to make sites fast for users"

Site Speed: What SEOs Need to Know
https://www.youtube.com/watch?v=7HKYsJJrySY&t=71s

Ask Google Webmasters - Martin Splitt

Google PageSpeed Insights

We've checked the Google PageSpeed Insights results and made some changes to the website compression and caching. 

Google PageSpeed Insights
https://pagespeed.web.dev

Take a look at this guide for more info:

Check and enable Gzip text compression in Joomla 4
https://techlabs.blog/categories/joomla/check-and-enable-gzip-text-compression-in-joomla-4

Google Core Web Vitals

The Desktop score has improved to where all URLs are now considered to be "good" by Google. but the Mobile score still shows URLs "need improvement". 

Core Web Vitals - Mobile

PageSpeed Insights - Desktop score

The Desktop score of 98 is good

PageSpeed Insights - Mobile score

But the Mobile score of 77 isnt great

The main issues are largest contentful paint (LCP) and first contentful paint (FCP). That's basically the time it takes for the website to be "drawn" or shown on screen.

The longer it takes pages to load, the poorer the user experience will be. People want nice fast websites.

Core Web Vitals: Eliminate render-blocking resources and Reduce unused CSS

The details show these two issues and the estimated time that could be saved by solving these problems

Eliminate render-blocking resources and Reduce unused CSS

What are render-blocking resources?

Render blocking resources are Java scripts JS, CSS files or styles that are blocking the first paint of your website. 

The report gives us a list of CSS files and Java scripts that are making the website slow to load.

Find render-blocking resources using Chrome Developer tools

We can use Chrome developer tools "Show Coverage" to see how much code was loaded vs how much was used to render the page

Show Coverage
Press [F12] to open Chrome developer tools
Run command [Ctrl] + [Shift] + [P] - Show Coverage
Press record to start capturing coverage

Code in green is being used to display the first paint of the page. Anything that's in red is code that is loaded but not being used to immediately display the page, which is making it slower and giving us the low first contentful paint (FCP) score.

What is unused CSS?

Web browsers will download and process all CSS style sheets before they display the web page on screen. Unused CSS are style sheets that have been download, but not used to render or draw the page.

Eliminate render-blocking resources and reduce unused CSS in Joomla 4

We are really at the mercy of the Joomla template and Page Builder here.

We only have a couple of options to improve the PageSpeed results: Turn off any template features and scripts that we are not using, or use a third party plugin to try and fix the issues.

Joomla 4 Core Web Vitals plugin

In this example, we are going to use Aimy Speed Optimization Joomla plugin to eliminate render-blocking resources and defer image loading on the website which should improve the core web vitals score.

You can read the plugin documentation here for more info about the configuration settings that might be best for your website.
https://www.aimy-extensions.com/joomla/speed-optimization.html

System - Plugins

Enable the plugin

Plugin settings

Eliminate Render-Blocking: Yes

Images settings

Action: Deferred Loading
Selection: Uploaded Images

Test website speed using PageSpeed Insights

Test website speed using PageSpeed Insights
https://pagespeed.web.dev

References:

Chrome Developers - Eliminate render-blocking resources
https://developer.chrome.com/en/docs/lighthouse/performance/render-blocking-resources

Chrome Developers - Remove unused CSS
https://developer.chrome.com/en/docs/lighthouse/performance/unused-css-rules

Chrome Developers - Coverage: Find unused JavaScript and CSS
https://developer.chrome.com/docs/devtools/coverage

by Author