Here’s what I figured out about how to eliminate all render-blocking JS & CSS:
Install W3 Total Cache
Go to Minify
Use the “help” wizard that you can see as a button near the top
Accept the suggestions without making changes. This will combine all your CSS files into 1, and all your JS files into 1, 2 or 3, depending where you load them (if you load all in the same area, e.g. in the <head>, you’ll only get 1 combined file).
Set all JS to “Non-blocking using Async”.
Now test your site. If everything works, the only blocking CSS/JS file left should be your combined CSS file, and nothing else.
Most likely some JS functions won’t work properly anymore. If this is the case, it gets a bit more complicated.
In this case, try the following:
Remove all the JS files in the Minify settings of W3
Open the source of your functioning page where no JS files are combined and manually add to W3 Minify ONLY the JS files found in the header (since these are the ones “above the fold”) and IN THE ORDER that they exist in your source file. Try this. If it works, try moving them all into the <body> or just before the </body> using the Minify JS settings.
In my case, I had a strange issue whereby combining jquery.js with the other JS files broke many js functions that depend on jquery even though they loaded after. To get around this I made jquery.js load on its own after <body>, and made all the others load combined just before </body>, with everything set to load using async.
Using this method, the only “above the fold” problem I have is the combined CSS sheet.
If your combined CSS is small, you can try inlining the entire thing.
If not, the only way around this that I currently know is to manually inline only the relevant parts of this combined CSS, and then to load the combined CSS in the footer using JS.
If someone knows of a way to automatically inline only the relevant CSS, I’d be very happy to hear!
