Test Jetpack Boost and IndexReloaded

We have decided to test existing popular WordPress plugins with the aim of improving website performance.

The first in the series is the Jetpack Boost plugin in version 3.3.1.
The plugin has over 300,000 active installations and has been translated into 29 languages.
With around 4000 downloads a day, the popularity of this plugin far exceeds that of the still new and unknown IndexReloaded plugin.

We focussed on the JS and CSS features in this test. We used the HTML source code and the results in the Google Chrome inspector to get an impression of the chosen technology – focussing on JS and CSS as mentioned.

Jetpack Boost offers 2 options each for JS and CSS processing.
For JS, these are “Chaining JS” and “Delaying non-essential JavaScript”.
For CSS, these are “Concatenate CSS” and “Optimise loading of critical CSS (manually)”. In the free version, the Critical CSS (CCSS) must be generated manually via the backend; the paid version generates CCSS automatically.

Our test website uses the Inpirio theme and utilises WooCommerce with the latest WordPress version and PHP 8.1.

To the test overview table

Test JavaScript-Features

The tests of the JS options “Link JS” and additional “Delayed loading of JS” were successful in the sense that no Javascript errors occurred.

In the HTML source code, you can see that all inline JS have been left in place, and a JS file from Elementor has also been omitted from the processing when “linking JS”.
The JS linked via files is summarised and fed into the website via 2 new JS links.

However, these are not links to files but so-called cgi links that trigger a 2nd server response (in this case 2 more).
We measure a server-side processing time of 50ms per link.
The Pagespeed Insight test tool acknowledges this type of JS feed into a website with a message about “non-cacheable resources”: “Serve static assets with an efficient cache policy 2 resources found”.

The “Delayed loading of JS” is well implemented, in case of problems this can simply be switched off and the site continues to work

It can therefore be said that Jetpack Boost hardly ever fails when processing JS. With file links, instead of the cgi calls, Jetpack Boost could get 10 on 10 for JS processing. So 9 out of 10 is correct.

Test CSS-Features

The CSS features test began with a disappointment with “CSS concatenation” – Jetpack Boost causes a change in the display of the menu entries, which are now displayed with “underline”.

As with the concatenation of JS, inline styles are excluded from the concatenation. The result of the concatenation is also output in the same way as used for JS concatenation.

These links are kept in such a way that they are weighted as “deferred” by Pagespeed Insight.
The following HTML is used for this purpose:

type='text/css' media="not all" data-media="all" onload="this.media=this.dataset.media; delete this.dataset.media; this.removeAttribute( 'onload' );"

This basically works quite well.
We believe that the problem with the incorrect display of menu items is due to a change in the sequencing of CSS selectors, which is quite possible if inline CSS is excluded.

The “Critical CSS” option has no influence on the display of the website design. We achieved a correct page display with “Critical CSS” activated and “Concatenate CSS” deactivated.

Jetpack Boost inserts the Critical CSS as inline CSS immediately after the meta tag for the “viewport”. In other words, at the first position in the head of the HTML source text.
Further inline CSS remains unchanged.
Links to CSS files are embedded in <noscript> tags, some of which are loaded unchanged but with a delay.
This ensures that render-blocking elements are completely eliminated on the Pagespeed Insights test tool website.

The analysis in Chrome’s coverage tool of the Critical CSS generated by Jetpack Boost shows a low coverage for the Critical CSS.
This does not correspond to the actual purpose of Critical CSS and indicates a production logic for CCSS that is qualitatively inadequate.
In addition, the coverage of the CSS files loaded with a delay contains Critical CSS, i.e. CSS that should not be loaded with a delay.

Jetpack Boost fails with Critical CSS.
Chaining CSS may or may not work.
With 3 out of 10 possible points for CSS processing, we are somewhat disappointed.

Conclusion of the test

Jetpack Boost can lead to a consistent and improved performance gain via its options for JS and CSS, which Pagespeed Insight also acknowledges accordingly.
However, the Critical CSS feature must be assessed as incorrectly implemented.
The output of JS and CSS via Cgi results in a slightly higher server load.

We would clearly recommend Jetpack Boost, with the reservations mentioned above … if we didn’t know IndexReloaded.

IndexReloaded and JS

IndexReloaded attempts to combine inline JS and JS from file links.
The aim is to insert this summarised JS as a delayed loaded JS file at the end of the HTML source code.
The challenge that IndexReloaded tackles in this way – without errors in the JavaScript console – is therefore kept to a maximum.
JS parts can be excluded from this processing via the Excludes list.
Jetpack Boost also offers an Excludes list for JS, but this is used less frequently until the plugin outputs error-free JS.
In terms of ease of installation, Jetpack Boost is more suitable than IndexReloaded.
IndexReloaded outperforms Jetpack Boost in terms of precision – the inclusion of inline JS creates the leeway to load the entire JS at the end of the file, the HTML source code becomes slightly smaller.

IndexReloaded and CSS

The Excludes list mentioned above also allows CSS to be specifically excluded.
This is because IndexReloaded processes CSS in a similar way to JS processing.
Without the use of Critical CSS (CCSS), IndexReloaded summarises the available CSS in a file that is loaded as a file link in the head area.
With CCSS activated, this summarised CSS is divided into CCSS and non-CCSS. This is done “on the fly” when a webpage is loaded.
Strictly speaking, a web page must be loaded twice so that correct CCSS can be created.
From the 3rd loading of a web page CSS is output cache-supported.
With CCSS, an option can be used to select whether the CCSS is output as inline CSS or as a file link.
CSS that is considered “not critical” is loaded via JS with a short delay after the web page is fully loaded.

Comparison of Jetpack Boost and IndexReloaded

If you are not afraid of the potentially higher effort required to set up IndexReloaded, you can achieve better performance values with IndexReloaded – this can be seen in the test results and in the comparison of JS and CSS functionality.

In this test, we have ignored functions that the two plugins do not have in common.
For example, when using IndexReloaded for image management, a further solution must be used to achieve an overall improvement in performance.

Our completely unbiased recommendation is therefore to use IndexReloaded.
We realise that as developers of IndexReloaded we are clearly negatively biased to judge another plugin without giving further details.
We hope to have addressed these “further details” objectively in this article.

If the options for CSS and JS are deactivated in Jetpack Boost, IndexReloaded and Jetpack Boost can be activated at the same time.