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 -->
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
<!-- W3TC-include-js-head -->