Google speed test

[Paul]

Hi Tom

I just ran the google speed test
https://developers.google.com/speed/pagespeed/insights/
with generatepress.com and my side gronova.org. both sides google recommends similar improvements.
Any idea how to solve it?
Thanks, Paul

[Tom]

Hi Paul,

Eliminate render-blocking JavaScript and CSS in above-the-fold content

CSS files and some Javascript/jQuery files must be added above the folder. One thing you can try to optimize this a bit better would be to use a minifying plugin. This one is pretty good: https://wordpress.org/plugins/autoptimize/

Optimize images

This is up to you on how you size and save your images – I wouldn’t worry too much about it though.

Leverage browser caching

This can be done by your hosting, or by using a plugin like W3C Total Cache.

Minify CSS

The plugin I mentioned above should take care of this.

Enable compression

I believe this is a hosting thing – but the W3C Total Cache plugin might take care of it as well.

Minify HTML

Either the plugin I’ve mentioned above or the one I linked to should take care of this.

None of these are major show-stoppers, but there are ways to make them better if you do a little research on them – you can always click on the links on the Google Page Speed page to see what they suggest 🙂

When it comes to stuff GeneratePress can control (not the user content), the results are actually really good (99/100 user experience etc..).

[Philippe]

Hello,

I advise you to use WP Fastest Cache (best score, easy to use + configure)

https://wordpress.org/plugins/wp-fastest-cache/

and Autoptimize (for optimize HTML, JS, CSS)

https://wordpress.org/plugins/autoptimize/

This two plugins working set is the best choice for optimal score.

For images, you can download images automatically optimized by Google on the page :

https://developers.google.com/speed/pagespeed/insights/

after testing your site or optimize yourself your images if necessary. This can help a lot to have a better score, do not too much compress images because the visual rendering can become poor.

You should be able to make your website about 50% faster with this two plugins

[Tom]

Thanks for posting those, Philippe! Super helpful! 🙂

[Georg]

@Philippe
Do you have any live sites with this plugin combination, an what are the page speed scores you are getting?

[Philippe]

@ Georg

Hi,

I have two sites with this plugin combinaison.

This combination works perfectly for me because my web host offers a shared service not realy powerful.

The first thing I made was to optimize the file “.htaccess” without plugin (Attention in case of bad manipilation this can make your site inaccessible). Then I have installed WP Fastest Cache then Autoptimize.

I also have optimized manually the images of my two websites, following the recommendations of Google Speed for obtain a best indexation.

For those who have a basic hyper-performance hosting, I have read that these plugins can slow their site.

In my case, with all these settings, it helped me to obtain a better performances… I went from 58/60 points to 85/86 points in Google Speed.

One of my websites was ranked the 4 th page after a search in Google. After the treatment I described above, it is reassembled on the first page of google search 🙂

Good weekend to you.

[richpags]

My experience using Autoptimize based on Toms recommendations.

I’ve noticed that my autoptimize cache file gets very large.
700mb in the last few days which is not great as I only have 1GB of disk space.

I’ve disabled “Also aggregate inline JS?” to see if it makes a difference.

Regards
Richie

[Tom]

Seems like a common issue with Autoptimize: https://wordpress.org/support/topic/autoptimizes-cache-size-is-getting-big-part-3/

[richpags]

Yep,

I’ll report back in a few days with “Also aggregate inline JS?” disabled results.

I guess it also comes down to how much traffic a site is getting re cache size.

Regards
Richie

[Tom]

Looking forward to hearing the results 🙂

[richpags]

Regarding more Autoptimize testing.

After a few days with the option “Also aggregate inline JS?” disabled, my cache file size is 4.5MB. Files: 18

Little better than 700MB cache over 2 days haha.
Would it be fine to leave this option disabled?

Regards
Richie

[Tom]

Absolutely! Shouldn’t be an issue at all 🙂

[S-Config]

Hello everyone.

I was asked to report my website for how I managed to pull off a 100/100 for google site speed. I guess I was already doing what Philippe has going on with using the combination of WP Fastest Cache and AutoOptimize. With all of the settings default or using the thread dealing with generatepress optimization page https://generatepress.com/fastest-wordpress-theme/ i could only get a 95/100 with google PageRank saying to eliminate CSS blocking.

Now users of WordPress will warn you not to use multiple cache plugins. Unforseen consequences and all. But I think what it comes right down to for me was telling which cache software what exactly to do. I told WP Fastest Cache to totally back away from all CSS optimization on my site. Then going back to AutoOptimize I checked one additional box to Also aggregate inline CSS? which got me to the magical 100 because the CSS is gone! It’s now apart of the HTML which in Googles mind is perfectly fine. Checking this option could result in other plugins failing to format due to use of dynamic CSS so use caution on this one!

Now there is some things I did a little differently from the GeneratePress Optimization page. Like I did not use the Async Javascript plugin. WP Fastest Cache was doing a bang up job already. Fastest Cache also took care of minification of html and JS.

Image optimization – if google speed test hits you with this and you got a linux box you could hammer through the folders of your entire WP site with utilities like ‘optipng’

find /path/to/wordpress/files/ -type f -name "*.png" -exec optipng -o2 -strip all {} \;

Stripping the meta from jpg files is good because Google does not like meta inside of images. It could confuse the search engine. jpegoptim is the linux utility to fix that!

find /path/to/wordpress/uploads/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

I also turn off all thumbnail images WordPress produces because WordPress’s libGDI hook is a functional tool for generating new images. But it sometimes blows PNG files out of proportion by converting them from 4-8bit to 24bit.

And don’t forget about WebP. The EWWW image optimizer plugin gives the ability to add a hook for the new format. Google loves sites that use their tech. But understand if you re-render all of your images through EWWW it will generate a bunch of WebP images filling up disk space on your site.

If you are getting render-blocking JS issues – This could be a result of too many fancy plugins. If you’re site has sections where a plugin is only used on a page or one entry. try and see if you can get an option to disable java-script of that plugin on all pages except for the one you want. It’s why I had to upgrade to FooBox Premium plugin for image viewing. So it only loaded when there was a gallery, instead of on every page of my site.

There’s a bunch of other stuff I did but it falls out of the scope of Google Speed Test. Anyhow, that’s my experience with it all. Hope it helps.

[Tom]

That is a beautiful post. Thank you so much for taking the time to write it! 🙂

[richpags]

Cheers for the write up S-Config.

I had another play with Autopimize and WP Fastest Cache settings.
Best I can get on google speed test is 85/100 speed on mob. 95/100 for desktop.

If I exclude jquery.js in Autopimize, I get 91/100 speed on mobile and 97/100 on desktop, but my product images disappear when browsing a product.

Richie

[Author]

Posts