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.
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 rather so-called CGI links that trigger a second server response (in this case, 2 additional ones).
We measure a server-side processing time of 50ms per link.
Injecting JS into a website in this manner results in the Pagespeed Insight test tool reporting 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 regarding “concatenate CSS” – Jetpack Boost causes a change in the display of menu items, which are now shown with an “underline”.
As with the concatenation of JS, inline styles are excluded from the concatenation. The result of the concatenation is also output in a manner similar to that 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 generally works quite well.
In our assessment, the problem with the incorrect display of menu items stems from a change in the sequencing of CSS selectors, which is quite possible when excluding inline CSS.
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”. Thus, virtually at the very beginning of the HTML source code’s head section.
Further inline CSS remains unchanged.
Links to CSS files are embedded in <noscript> tags; some of them are loaded unchanged but deferred.
This ensures that the Pagespeed Insights test tool website reports that “render-blocking elements” are completely eliminated.
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, through its option for JS and CSS, can lead to consistent and improved performance gains, which Pagespeed Insight duly acknowledges.
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 mentioned exclusion list also allows for targeted exclusion of CSS.
Because IndexReloaded processes CSS similarly to how it processes JS.
Without the use of Critical CSS (CCSS), IndexReloaded consolidates the existing CSS into a single file, maintaining the sequence, which is loaded as a file link in the head section.
With CCSS activated, this consolidated CSS is split 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 disregarded functions that the two plugins do not share.
For example, when using IndexReloaded for image management, an additional solution must be employed to achieve an overall performance improvement.
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.
| Test Overview | Jetpack Boost | IndexReloaded |
| Testresults Javascript | ||
| Concatenate JavaScript | File Links Only | File Links and Inline Scripts |
| Deferred Loading of JavaScript | Yes | Yes |
| Exclude Files from Concatenation | Yes | Yes |
| Format of Concatenated JavaScript | CGI links | File links |
| Testresults CSS | ||
| Concatenate CSS | File Links Only | File Links and Inline CSS |
| Exclude Files from Concatenation | No | Yes |
| Critical CSS, Correctness | < 50% | 99% |
| Format of Concatenated CSS | CGI links | File links |