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:
-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!
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!
