Configuring W3 Total Cache for Pagespeed Insights (or what we did so you can laugh at us)
One of the big things I tackled when I took over Pocketables was dealing with a highly customized site aimed at mobile users where the theme didn’t support mobile users, and it hadn’t really been functionally updated since 2013.
Once we got a theme that worked with mobile and desktop, the biggest complaint was loading speeds and that was knocking us down on search engines which is where about 90% of our traffic comes from.
I slapped the free version of W3 Total Cache in (all that I can afford at the moment,) and that helped a lot, but with just the default settings we were still getting long load times due to every other CSS loading from a separate site, 26 or so little Javascripts all over the place, and demons.
Should note – the pay version may do this all for you. Don’t know.
We were still scoring abysmally on Pagespeed Insights – a free site testing location owned by Google that more or less can give you an idea if you’re going to be penalized in search rankings by how long it takes your site to load.
Now, we still are showing pretty slow, but that’s primarily due to Google Ads and the video, which if we get enough support would be going away. However next to nothing is now Pocketable’s issue.
Step 1 – install W3 Total Cache in WordPress.
Step 2: Under general settings enable Page Cache, Minify, select manual mode*. That should be it. Save settings and purge cache.
*select auto if you are fine with it. W3 Total Cache will do good here, but not great with off-site scripts.
Step 3 – Minify settings, the only thing that’s going to be a pain
I have Inline CSS and JS minification checked. CSS Enable and combine only (combine only may just be our getting it to work right with Cloudflare setting, feel free to experiment)
Save and purge cache
Step 4 – the part that sucks
Your next assignment is to locate render blocking resources on the PageSpeed Insights report – your main slowdowns will probably be CSS and Javascript which we’re going to attempt to combine into two wads of code rather than 30 or so separate requests to a server to get things.
Each request takes some time, 40+ take a lot of time, especially on slow connections as you have to contact the server, the server say yo, you tell it what you want, it serve it.
On Pocketables it was claiming 18+ seconds for render blocking resources. This was incorrect, but whatever. We lowered that to 0.19 seconds, which I consider a good improvement.
OK, head over to PageSpeed Insights, enter your website, and scroll down to Render Blocking Resources.
Adding just a plugin or two balloons the number of scripts, css, and other things that are served. Each of the render blocking resources used above take time to get, load, execute. Each one is a fraction of a second, but they add up.
Assuming you’ve got quite a few, we’re going to put these into some wads of code.
First make a text file of each and every Javascript. You’re going to have to mouseover the ../js/query… to get the full URL because that’s not something that would be all useful to you is it? Come on Pagespeed.
I’m saying put these in a text file because you’re going to want to for debugging purposes, trust me. Separate the render blocking javascript (.js files) from the render blocking CSS, write down your 30 or so long URLs of these including off-site URLs.
We’re going to enter these one by one in the JS and CSS file management minification section.
For Pocketables this was 17 javascripts and 22 css files. Each one I had to type out into notepad because Page Speed insights gave me no way to pull the full URL.
Save settings, purge cache, wash hands, wipe on pants.
After adding everything things broke, looked like garbage, and I ended up pulling out a line that had jquery.js, reload, and bam. 18 seconds of render blocking resources were now listed as 0.19 seconds.
What about AMP?
Days after doing this I got reports from webmaster tools that several thousand AMP pages were now invalid due to external Javascript.
Appears we fixed that with adding under the page cache setting / Never cache the following pages:
*/amp
Viola.
Got any secrets, let me know. I never wanted to work on WordPress, never wanted to run the site, just wanted to write little rooting articles and things about what I was interested in.
