Last updated on
Eliminate Render Blocking CSS

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.

17.5 Points

In this test, Eliminating render blocking CSS improved our PageSpeed Score by over 17 points on mobile devices! Check out the documentation to see how to take advantage of this feature on your site!

Upgrade to W3 Total Cache Pro and improve your PageSpeed Scores today!

Audit: Google PageSpeed Score
Before: 53.75
After: 71

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/

-94.86% Potential Savings
from Render Blocking
Resources

In this test, moving our CSS to the HTTP body reduced our Potential Savings From Render-Blocking Resources by over 94% loading nearly 2 seconds faster on mobile devices! Check out the documentation to see how to take advantage of this feature on your site!

Upgrade to W3 Total Cache Pro and improve your PageSpeed Scores today!

Audit: Potential Savings From Render-Blocking Resources
Before: 2432.5 ms
After: 125 ms

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.

-56.59% LCP Score

In this test, Eliminating render blocking CSS improved our Largest Contentful Paint time by over 56% loading nearly 4 seconds faster on mobile devices! Check out the documentation to see how to take advantage of this feature on your site!

Upgrade to W3 Total Cache Pro and improve your PageSpeed Scores today!

Audit: Largest Contentful Paint
Before: 7s
After: 3.04s

How the test was run

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

Desktop Mobile

Performance

Performance score

Standard site W3TC OptimizedDifference
84.75 84.75 0 0%
No change.

Points per Metrics

First Contentful Paint

Standard site W3TC OptimizedDifference
9 points 10 points +1 points +11.11%

Largest Contentful Paint

Standard site W3TC OptimizedDifference
14.75 points 15.75 points +1 points +6.78%

Total Blocking Time

Standard site W3TC OptimizedDifference
30 points 30 points 0 points 0%
No change.

Cumulative Layout Shift

Standard site W3TC OptimizedDifference
25 points 25 points 0 points 0%
No change.

Speed Index

Standard site W3TC OptimizedDifference
6.75 points 4 points -2.75 points -40.74%

Metrics

First Contentful Paint

Standard site W3TC OptimizedDifference
0.9 s 0.73 s -0.18 s -19.44%

Largest Contentful Paint

Standard site W3TC OptimizedDifference
2.18 s 1.98 s -0.2 s -9.2%

Total Blocking Time

Standard site W3TC OptimizedDifference
5 ms 17.5 ms +12.5 ms +250%

Cumulative Layout Shift

Standard site W3TC OptimizedDifference
0.01 0.01 +0 +9.09%
No change.

Speed Index

Standard site W3TC OptimizedDifference
1.95 s 2.55 s +0.6 s +30.77%

Diagnostics

Largest Contentful Paint element

Standard site W3TC OptimizedDifference
2152.5 ms 1995 ms -157.5 ms -7.32%

Potential savings from render-blocking resources

Standard site W3TC OptimizedDifference
465 ms 15 ms -450 ms -96.77%

Potential savings by serving images in next-gen format

Standard site W3TC OptimizedDifference
927 KiB 934.25 KiB +7.25 KiB +0.78%

Time third-party code blocked the main thread for

Standard site W3TC OptimizedDifference
0 ms 0 ms 0 ms
No change.

Potential savings from unused CSS

Standard site W3TC OptimizedDifference
145 KiB 182 KiB +37 KiB +25.52%

Potential savings from unused JavaScript

Standard site W3TC OptimizedDifference
77 KiB 218 KiB +141 KiB +183.12%

Potential savings if Minifying CSS

Standard site W3TC Optimized
Passed audit Passed audit

# of static assets without an effecient cache policy

Standard site W3TC OptimizedDifference
96 35.5 -60.5 -63.02%

JavaScript execution time

Standard site W3TC OptimizedDifference
0.2 s 0.2 s 0 s 0%
No change.

Main-thread work

Standard site W3TC OptimizedDifference
1.25 1.15 -0.1 -8%

# of long main-thread tasks

Standard site W3TC OptimizedDifference
3 3.25 +0.25 +8.33%

Initial server response time

Standard site W3TC OptimizedDifference
1302.5 ms 2612.5 ms +1310 ms +100.58%

# of large layout shifts

Standard site W3TC OptimizedDifference
1.25 1 -0.25 -20%

# of user timings

Standard site W3TC Optimized
Passed audit Passed audit

# of animations found

Standard site W3TC Optimized
Passed audit Passed audit

Network payload

Standard site W3TC OptimizedDifference
2802 KiB 2857 KiB +55 KiB +1.96%

DOM size

Standard site W3TC OptimizedDifference
664 626.5 -37.5 -5.65%

# of chains found

Standard site W3TC OptimizedDifference
69 4 -65 -94.2%

Defer offscreen images

Standard site W3TC OptimizedDifference
0 0 0
No change.

Minify JavaScript

Standard site W3TC Optimized
6 KiB Passed audit

Properly size images

Standard site W3TC OptimizedDifference
327 KiB 327 KiB 0 KiB 0%
No change.

Efficiently encode images

Standard site W3TC OptimizedDifference
0 0 0
No change.

Enable text compression

Standard site W3TC Optimized
Passed audit Passed audit

Preconnect to required origins

Standard site W3TC Optimized
Passed audit Passed audit

Preload key requests

Standard site W3TC OptimizedDifference
0 0 0
No change.

Preload Largest Contentful Paint image

Standard site W3TC Optimized
Passed audit Passed audit

Avoid multiple page redirects

Standard site W3TC Optimized
Passed audit Passed audit

Use video formats for animated content

Standard site W3TC Optimized
Passed audit Passed audit

Remove duplicate modules in JavaScript bundles

Standard site W3TC Optimized
Passed audit Passed audit

Avoid serving legacy JavaScript to modern browsers

Standard site W3TC OptimizedDifference
0 0 0
No change.

Largest Contentful Paint image was not lazily loaded

Standard site W3TC Optimized
Passed audit Passed audit

Avoids document.write()

Standard site W3TC Optimized
Passed audit Passed audit

Image elements have explicit width and height

Standard site W3TC OptimizedDifference
0 0 0
No change.

Has a <meta name="viewport"> tag with width or initial-scale

Standard site W3TC Optimized
Passed audit Passed audit

Uses passive listeners to improve scrolling performance

Standard site W3TC Optimized
Passed audit 0

All text remains visible during webfont loads

Standard site W3TC Optimized
Passed audit Passed audit

W3 Total Cache

You haven't seen fast until you've tried PRO

   Full Site CDN + Additional Caching Options
   Advanced Caching Statistics, Purge Logs and More

Everything you need to scale your WordPress Website and improve your PageSpeed.

Leave a Reply

Your email address will not be published. Required fields are marked *

W3 Total Cache logo

We Can Help Optimize Your Website

Optimize your site’s performance with our one-time premium services or ongoing monthly VIP support. View services

Got a Minute?

Your feedback helps us improve. Complete our customer survey now.

Partners

Bunny CDN Logo