SEO site speed optimisation

I felt it important to go through the process of optimising my website, to improve its speed in browsers.  In the past few years Google has factored the site speed in to help determine how to rank search engine results, so it is an important SEO consideration as well.  I used a site called GTmetrix, as recommended by my friend & SEO guru Mark Attwood.

When I first used GTmetrix to generate a site speed report, it wasn’t great…  Mark recommends achieving a score of at least 90% for both the PageSpeed score and the YSlow score.

Site speed before

There were several areas I needed to focus on:

Site speed areas to fix

Enable gzip compression

First off I used their own site’s advice and edit my .htaccess file as described here.

When a user hits your website a call is made to your server to deliver the requested files.  The bigger these files are the longer it’s going to take for them to get to your browser and appear on the screen.  Gzip compresses your webpages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.

# gzip compression
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
# END gzip compression

Leverage browser caching

Again I followed the advice on their site here.

Every time a browser loads a webpage it has to download all the web files to properly display the page.  This includes all the HTML, CSS, javascript and images.  Browser caching can help by storing some of these files locally in the user’s browser.  Their first visit to your site will take the same time to load, however when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally.

This means the amount of data the user’s browser has to download is less, and fewer requests need to be made to your server.  The result? Decreased page load times.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/font-woff "access plus 1 year"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 week"
</IfModule>
## EXPIRES CACHING ##

I also added a couple of extra lines to include SVG and the woff font type…

Optimize images

It only advised me to reduce the file size of one image, so this was a relatively easy update.  It was the background image in the header behind my name.  I had inadvertently saved it originally as a PNG-32.  I changed this to PNG-8, which reduced the file size from approx 12.5k to 3.5k.  I lost the gradient effect a little, but it was so subtle that it wasn’t really an issue.

What are the differences between the various PNG formats?

  • PNG-8: The 8 stands for 8 bit. It can handle up to 256 colours. They are similar to GIFs, and uses a lossless compression method. More ideally suited to small, more simple graphics such as logos & icons.
  • PNG-24: It is similar to PNG-8s, but has support for 16 million colours, and will preserve colour variations such as gradients better.  It will be a larger file size as it retains more detail.
  • PNG-32: It’s the highest quality of all PNG formats, and supports full alpha transparency.  It is therefore the largest file size of the three formats.  It is best used for detailed graphics such as those that have gradients, varying colors, rounded edges and transparencies.

Enable Keep-Alive

Keep-alive is a method to allow the same tcp connection for HTTP conversation instead of opening a new one with each new request.  It just required adding the following to the .htaccess file:

# enables KEEP-ALIVE
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
# END enables KEEP-ALIVE

Remove query strings from static resources

I couldn’t really do much about this without the help of a plugin.  I installed Zendy Speed: Query Strings for this purpose.  It increased the rating from 83% to 94%…

Defer parsing of JavaScript

Again I used the help of a plugin.  Installing WP deferred javaScript increased the rating from 82% to 100%!

Other tips

For the other recommendations, much of it was out of my control, as they mostly related to 3rd party WordPress plugins.  So I continued to fight plugins with more plugins!

I found the article ‘The Ultimate Quickstart Guide to Speeding Up Your WordPress Site‘ extremely useful.  It requires installing the W3 Total Cache and WP-DBManager plugins. The W3 Total Cache plugin optimises your site using caching: browser, page, object, database, minify and content delivery network support.

The last thing I did was something that the YSlow results advised.  It recommends using a Content Delivery Network (CDN) for some of the resources.  I couldn’t really do anything about the 3rd party plugins this time, but I did have a few resources of my own I was calling locally in the header.php template file.  Luckily I came across the CDNjs library resource.  You can browse the library for any plugins you’re using, and get a full CDN url to use instead of locally calling files.  It supposedly means less load on your server, therefore meaning less work for your server to do.  An interesting post on the subject can be read here.  Interestingly though, PageSpeed recommends reducing DNS lookups.  So I guess you need to find a bit of a balance.

Conclusion

After setting all this up, I re-ran the performance test.  The results were way better than I expected!  I’ve nearly halved the page load time and total page size.  The requests have also been reduced from 27 to 19.  I’m very pleased with that.

Before:

Site speed before

After:

Site speed after optimisation

It just goes to show that this procedure shouldn’t just be an afterthought, and that making some images smaller is all you need to do…  It should be PART of the process EVERY time.  And it should be regularly monitored if your site is constantly being updated.

 

Share my post!
Facebooktwitterredditpinterestlinkedinmail Loading Likes...