After my last post on the Fastest WordPress Themes, I thought the next logical step was to see what it would take to boost any site’s Page Score to as close to 100% as possible. So for this post, I decided to take a look at this site, SlickWP and see what things I could do to improve my Page Score.
What I came up with, are four actionable steps that any WordPress owner can take right now to improve their Page Score rating.
What’s the point of doing this whole exercise?
Slow loading websites make a bad impression on your visitors, so anything you can do to make your site load faster is worth doing.
The Initial Benchmark
To see what sort of improvement I was making, I first needed to do a benchmark score of the site initially. This is with none of the plugins I’m going to talk about below activated.
For this test, I decided again to go with the free testing tool, GTMetrix. I was also only testing the front page of this site, but you should run these tests on individual posts as well.
According to GTMetrix, I received an initial page score of 77. This was pretty bad. According to the recommendations I was lacking in these main areas:
- Enable gzip compression
- Leverage browser caching
- Remove query strings from static resources
- Optimize Images
- Specify Image Dimensions
These are the main issues I set out to fix.
Step 1 – Install W3 Total Cache
So here are the settings you should set with W3 Total Cache installed.
Under General Settings you will want to turn on: Page Cache, Minify, Database Cache and Object Cache
Then go to Browser Cache and under the General section turn on Set expires header, Set cache control header, Set entity tag (eTag)
With just these settings, you should already see your Page Speed score rise up dramatically.
Step 2 – Optimize Your Images
Having large images on your site can really slow down your site. Luckily, there are well known image compression algorithms you can use to reduce the size of each image you have on your site.
I actually found two WordPress plugins that do a nice job with automatically compressing your images. WP Smush.it and Ewwww Image Optimizer. Both will compress images as you upload them, automatically, and both include a bulk image compression tool that lets you compress all the existing images of your site in one shot.
That said, as I was tested my Page Score using both these plugins, the Page Score recommendations were still saying that my images were not being optimally compressed.
So I did a little bit of research, and found an awesome free, open source Image compression OS X software called ImageOptim. It integrates with the best image compression tools and using it will allow you to achieve the best possible compression for all your images.
Once you launch ImageOptim, and all you need to do is drag one or multiple images into it and it will automatically start compressing. While slightly less convenient then using the plugins mentioned above, it’s definitely worth using if you are on a Mac.
Specify Image Dimensions
Another easy image optimization you should be doing is to specify the width and height of each of your images. You do so like this:
<img src="myimage.jpg" height="200" width="400" />
Just remember when doing this to specify the actual height and width of the image.
By default WordPress adds these height and image attributes to your images if you add them via the Add Media button in the editor. If you add images manually anywhere else on your site though, you will need to remember to do this yourself.
Step 3 – Fix the Gravatar issues
Gravatar is a free service used on all WordPress installs to show avatar images in your comments. What you’ll notice when you run GTMetrix on your site is that you’ll see a bunch of recommendations related to gravatar under Remove query strings from static resources and leverage browser caching.
This is quite the annoying problem. Sure you could turn gravatars off, but that would make your site look a little too plain and boring.
Luckily, I found a plugin that fixes this exact problem. It’s called Nix Gravatar Cache and it fixes all the above problems instantly. Works great!
Step 4 – Load JQuery from CDN
Fortunately there’s a plugin that does this for you called Use Google Libraries. Just install and activate this plugin and it will work automatically.
With these 4 tweaks, you should easily be able to get your Page Score into the high 90’s. On this site, I was able to achieve a PageScore of 98 and a page load time under 1 second!
While a Page Score of 98 is awesome, this is only for the front page of my site. In practice you should also do this testing on a sampling of other pages on your site to find more issues.
For example, one recommendation that YSlow makes, and the reason why my YSlow score is still low is that I should be using a CDN. That’s something I’m interested in trying out in the coming weeks, so be on the look out for my future post on that.
In this post, you now have learned 4 techniques that you can implement right now on your WordPress site to boost your Page Speed score. The faster you increase your page load times, the better experience your user will have. This had the side benefit of increasing your conversions and even your search engine rankings.
In the comments below, I’d love for you to post a before and after Page Speed score of your own site after following the suggestions in this post. Please share and let us all know how fast your site gets!