How to get Minified File location from w3 Total Cache

1.5k Views Asked by At

As I'm sure many of you know, Google PageSpeed Insights will sometimes complain about what it calls "render blocking css" when you test your sites.

Their suggestion is to render only "necessary" CSS inline in the HEAD. If you have CSS in an external file (as most everyone does), the recommendation is to load this after the page loads. This seems pretty extreme, but that's the recommendation. It appears to be a big blocker to improving one's Mobile PageSpeed scores as well...

You can use the PageSpeed Module for Apache or nginx to help you identify which CSS is actually "necessary". Again, one can argue about the relative value of doing this, but it is Google's current recommendation.

I had a notion to use javascript to "Lazy Load" the CSS file by having a small script fire in the footer of my theme, injecting the CSS into the head. You can see an example of this technique here: https://bensmann.no - This is NOT my site. I'm basically looking to replicate or copy what he's done with his minified CSS - Load it into the HEAD after the page has loaded via Javascript contained at the bottom of the page

I would then put <!-- W3TC-include-css --> inside a <noscript> tag, thereby suppressing the placement of the minified CSS, as well as ensuring it appears for non JS browsers.

So, the issue is I need to get the location of the minified CSS file somehow, as well as the hash used to name the file (for an ID for the element). Anyone know how one can access the location of minified CSS file with PHP in the footer?

2

There are 2 best solutions below

0
On

You'll have to learn about Critical Path CSS, which is a slippery slope, and truly, nobody really knows for sure which CSS is critical or not.

In the interim (or as a permanent solution), installing a plugin like Autoptimize and playing around with it will greatly improve your Page Speed Insights scores.

Remember to tick Show Advanced Options when going to the settings. I'd personally suggest to just inline all CSS and use that option, but that's just me.

If any plugins are broken after implementing this, just untick the Optimize CSS code, find the plugin's CSS file, and add that to the exception list.

0
On

While this post does not give you the solution, it might bring you closer to moving the css where you want it:
http://freetheweb.tumblr.com/post/12482217372/w3-total-cache-better-css-js-placement