W3 Total Cache is one of the most recommended plugin in WordPress, which speeds up your site by caching and minifying and combining the JavaScripts and CSS files. It results in faster page load speed.
We can move JS files to footer easily by choosing manual Minify in W3TC setting, but there is no option to move CSS files to footer. In this article, we will show you how to move CSS and JS files to the footer which inserted by W3 total cache plugin at the top of the rendered page. So when you test your page by Page Speed insights you will get the suggestion to remove the render blocking CSS and JS files.
Move W3 Total Cache CSS to Footer
By default, W3 Total cache plugin does not provide any option to move CSS files to footer. It places the CSS files at the top of the page which results in render blocking the page. We can move generated CSS files to the footer by adding following code:
<!-- W3TC-include-css -->
Put above code before wp_footer(), so that our CSS to be loaded prior to our JavaScript files. This will move all Combined and Minified CSS Files to the footer.
Move W3 Total Cache JS to Footer
We can move JS files created by W3 Total Cache easily by choosing manual minify which will discuss in the previous article how to setup W3 Total Cache. The second method to move JS files by inserting following code to the footer before the closing </body> tag.
<!-- W3TC-include-js-head -->