In this test, Eliminating render blocking CSS improved our PageSpeed Score <\/strong>by over 17 points on mobile devices! Check out the documentation<\/a> to see how to take advantage of this feature on your site!<\/p>\n\t\t\t

\n\t\t\t\t Upgrade to W3 Total Cache Pro<\/a> and improve your PageSpeed Scores today!\n\t\t \t<\/p>\n\t\t\t

\n\t\t\t\t
Audit:<\/strong> Google PageSpeed Score<\/div>\n\t\t\t\tBefore:<\/strong> 53.75<\/div>\n\t\t\t\tAfter:<\/strong> 71<\/div>\n\t\t\t<\/div>\n\t \t<\/div>\n\t<\/div>\n\t \n <\/p>\nControl Website<\/h2>\n
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:<\/p>\n
\n
Accordions Combo<\/li>\n
Contact Form 7<\/li>\n
Dracula Dark Mode<\/li>\n
Post and Page Builder<\/li>\n
Responsive Accordion And Collapse<\/li>\n
Responsive Lightbox & Gallery<\/li>\n
Smart Slider 3<\/li>\n
Spiffy Calendar<\/li>\n
TablePress<\/li>\n
WooCommerce<\/li>\n
WPB Accordion Menu or Category<\/li>\n<\/ul>\n
Control Website: https:\/\/wordpress-speed-test.com\/051624_site1\/<\/a><\/p>\n\t \n\t
\n\t\t
\n\t\t\t-94.86%<\/span>\n\t\t\tPotential Savings
\nfrom Render Blocking
\nResources<\/span>\n\t\t<\/div>\n\t\t
\n\t\t\t
In this test, moving our CSS to the HTTP body reduced our Potential Savings From Render-Blocking Resources <\/strong>by over 94% loading nearly 2 seconds faster on mobile devices! Check out the documentation<\/a> to see how to take advantage of this feature on your site!<\/p>\n\t\t\t
\n\t\t\t\t Upgrade to W3 Total Cache Pro<\/a> and improve your PageSpeed Scores today!\n\t\t \t<\/p>\n\t\t\t
\n\t\t\t\t
Audit:<\/strong> Potential Savings From Render-Blocking Resources<\/div>\n\t\t\t\tBefore:<\/strong> 2432.5 ms<\/div>\n\t\t\t\tAfter:<\/strong> 125 ms<\/div>\n\t\t\t<\/div>\n\t \t<\/div>\n\t<\/div>\n\t \n \nExperimental Website<\/h2>\n
With our experimental website, we installed WordPress with the same plugins as our Control Website.<\/p>\n
We also installed W3 Total Cache Pro and enabled the option to Eliminate render-blocking CSS by moving it to HTTP body.
\nExperimental Website: https:\/\/wordpress-speed-test.com\/051624_site2\/<\/a><\/p>\n
Experimental Website Changes<\/h3>\n
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.<\/p>\n
For example, we used Dracula Dark Mode<\/strong> 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.<\/p>\n
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.<\/p>\n
To address this, on our Experimental Website, we used the Eliminate render-blocking CSS by moving it to the HTTP body<\/strong> 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.<\/p>\n
While this has little effect on the desktop scores we consistently saw a significant improvement in mobile scores.<\/p>\n\t \n\t
\n\t\t\n\t\t\t-56.59%<\/span>\n\t\t\tLCP Score<\/span>\n\t\t<\/div>\n\t\t
\n\t\t\t
In this test, Eliminating render blocking CSS improved our Largest Contentful Paint time <\/strong>by over 56% loading nearly 4 seconds faster on mobile devices! Check out the documentation<\/a> to see how to take advantage of this feature on your site!<\/p>\n\t\t\t
\n\t\t\t\t Upgrade to W3 Total Cache Pro<\/a> and improve your PageSpeed Scores today!\n\t\t \t<\/p>\n\t\t\t
\n\t\t\t\t
Audit:<\/strong> Largest Contentful Paint<\/div>\n\t\t\t\t
Before:<\/strong> 7s<\/div>\n\t\t\t\t
After:<\/strong> 3.04s<\/div>\n\t\t\t<\/div>\n\t \t<\/div>\n\t<\/div>\n\t \n \n
How the test was run<\/h2>\n
We conducted four tests on each website using Google PageSpeed Insights and averaged all the scores.<\/p>\n

Control Website<\/h2>\nOn our Control website we installed WordPress and the following plugins with a focus on plugins that add interactive features and elements to the site:<\/p>\n

Experimental Website<\/h2>\nWith our experimental website, we installed WordPress with the same plugins as our Control Website.<\/p>\n