Eliminate Render Blocking CSS – Google PageSpeed Test

In this Google PageSpeed Experiment, we’re testing W3 Total Cache’s feature to Eliminate Render Blocking CSS to examine its effects on website performance.

Control Website

On our Control website we installed WordPress and the following plugins with a focus on plugins that add interactive features and elements to the site:

• Accordions Combo
• Contact Form 7
• Dracula Dark Mode
• Post and Page Builder
• Responsive Accordion And Collapse
• Responsive Lightbox & Gallery
• Smart Slider 3
• Spiffy Calendar
• TablePress
• WooCommerce
• WPB Accordion Menu or Category

Control Website: https://wordpress-speed-test.com/051624_site1/

Experimental Website

With our experimental website, we installed WordPress with the same plugins as our Control Website.

We also installed W3 Total Cache Pro and enabled the option to Eliminate render-blocking CSS by moving it to HTTP body.
Experimental Website: https://wordpress-speed-test.com/051624_site2/

Experimental Website Changes

WordPress Plugins that add interactive elements and styles to your page often increase load times as the site needs to make additional HTTP requests to load these resources. This causes the site to wait for the additional requests to complete before it can start rendering the page.

For example, we used Dracula Dark Mode to add a Dark Mode switch to the page. This means the site has to load the original styles in addition to the styles that will be used for dark mode which effectively doubles the number of style-sheets that need to be requested on each page load.

We used multiple plugins that add accordion sections as these are quite common and while they seem light and simple on the surface, each has its own style-sheet and JavaScript resources in order to function properly. They need these resources in order to show or hide the content within the accordion. These extra resources on their own may not have a significant impact but we used multiple to demonstrate how these simple interactive elements can add up when loading the site, especially on mobile devices.

To address this, on our Experimental Website, we used the Eliminate render-blocking CSS by moving it to the HTTP body option in the Minify advanced settings under the CSS section. What this does is take any minified CSS files and insert their contents directly into the page to prevent making additional requests. This saves on load time by eliminating the need to request these CSS files as their contents will be included directly in the source of the page.

While this has little effect on the desktop scores we consistently saw a significant improvement in mobile scores.

How the test was run

We conducted four tests on each website using Google PageSpeed Insights and averaged all the scores.