Move W3 Total Cache JS & CSS to the footer
14 July, 2014 by Tom Elliott
If you care about web performance of your WordPress site and are chasing top page speed scores as measured by tools such as Google Insights, there’s a good chance that you’re using W3 Total Cache plugin to minify and combine JavaScript and CSS files.
Page Speed measurement tools will usually recommend that you remove render-blocking JavaScript and CSS out of the <head> tag, since every external file in the <head> has to be download by the browser before the page is rendered. By moving CSS and JS out of the header and into the footer, then we avoid render blocking and can significantly increase our page speed scores.
Moving W3 Total Cache JS to footer
Moving the minified JavaScript created by W3 cache plugin is relatively easy. We have a number of ways to do this in WordPress:
- Use wp_enqueue_scripts in our theme’s and plugins to place our JS in the footer by setting the last parameter to true.
- Using a plugin such as scripts to footer to automatically place any resulting JS at the bottom of our pages.
- Place the code
<!-- W3TC-include-js-head -->before the closing</body>tag.
Move W3 Total Cache CSS to footer
CSS is considered more important to place in the header as we don’t want our visitors to see un-styled content display briefly before the CSS has loaded.
Web performance advocates however will recommend moving the main CSS file(s) to the footer before the closing </body> tag and in-lining critical display styles within the <head>.
With W3 Total cache, we can move all combined and minfiied styles to the footer by using the following:
<!-- W3TC-include-css -->
Just drop this line before wp_footer(), as we still want the CSS to be loaded prior to our JavaScript files.
20 Comments
Not working for me? mine looks like this:
but doesn’t work, I have minified enabled on JS and CSS manually, but still get error saying Your page has 3 blocking CSS resources. This causes a delay in rendering your page?
-
Hi Shane, is the JS and CSS now in the footer? Happy to take a look if you want to send a link
so I put it in the footer.php in my child theme right above wp_footer(), as you said and it works, page speed insights no longer saying the file is blocking anything but now some css elements seam not to be loading all as my pages look different, I guess that’s where putting important css in the head comes in.
-
actually when I take all but one style sheet out of w3 my site still is not styled right but if I take all out of w3 then its styled right again but of course that defeats the purpose. so it seams putting the w3 combined file in my footer for some reason making my site style not look correct
-
ok, so it does work, however it makes some css, in my case a good bit not listen, But I was able to fix it by putting the !important tag behind the css that wasn’t listening. I didn’t finish but it worked on all the ones I done.
-
abdul shomad says: hi, this tricks work on moving the css successfully. and the web site work fine. but when i check it at validator.w3.org, it show “Element link is missing required attribute property” from css that just moved. i should add property=’stylesheet’ to have it fixed. any idea how to add this on minified css? thanks
abdul shomad says: found the solution, have to adding it on minify.php manually on w3-total-cache/lib/W3/Plugin/
savvas kevrekidis says: Well, i followed your advise and placed both lines in footer and i saw a very nice improvement on loading time.
Took me 2+ months to find the right solution.
Thank you very much!
Do you have a knowelenge on how to set w3-total-cache?
If you can point me to a reliable tutorial, cos so far i only found pieces, but not a complete and in detail. Specialy for minify set up.
Thanks again.
Hi, I’ve used the codes for the JS/CSS files, and some have moved to the footer, but some have not, and the PageSpeed Insights still kicks out the errors.
Advice?
-
Hi Niall, it’s quite hard to see as your HTML is minified but I think it’s the Google Font request in the header that’s causing some of these issues. I’d either try moving this to the footer or combining with your main stylesheet and request the fonts from your server instead.
Hi, thanks for this info which I’ve implemented & seems to have placed the CSS & JS files at the footer accordingly.
However, when I check the page speed performance with Google’s PageSpeed Insights it still gives me the “Eliminate render-blocking JavaScript and CSS in above-the-fold content”.
I expected to see a vast improvement & can’t understand why it hasn’t – is it something to do with clearing caches perhaps?
-
Hi Mark,
Moving all JS and CSS to the footer will usually increase page scores but not always. It’s unlikely a caching issue. If for example you have a full screen image that only loaded by the JavaScript in the footer, this can still count as render blocking as can the CSS if it determines the visibility of the above-the-fold text.
I need more detailed explanations on how to do this? I am using Genesis with a child theme and am not sure where/how to do this. The js and css files that are causing my warnings: Remove render-blocking JavaScript:
are actually the w3 minify js and css and the google fonts
Thank you for your help!
Hi i have kind of the same problem as Tami.
I added the following lines to my functions.php which loads “” right before the footer. And “” to load right after the footer. When inspecting the the page source i see them being printed, although pagespeed insights still states that they are render-blocking JavaScript and CSS in above-the-fold content (for the W3 css and js file).
Thanks!
my code in functions.php:
add_action (‘genesis_before_footer’,’bsg_load_css_to_footer’, 4 );
function bsg_load_css_to_footer() {
echo ““;
}
add_action (‘genesis_after’,’bsg_load_js_to_footer’, 5 );
function bsg_load_js_to_footer() {
echo ““;
}
Praveen Kumar says: Working in my case but some parts of the theme is broken. Probably some required js is causing this issue.
Howdy ! The details provided by Tom Elliott climbed a high note in google speed! Thanks Tom!
Snippet doesn’t work. It seems W3TC moved “move render blocking CSS to footer” inside premium version.
Thanks! That helps!