Tips To Speed Up Your Website

During the week I was finishing up “Phase 2″ of one of our projects and realised that I hadn’t done some tweaks to speed up the clients site. So I thought it would be make a fun blog post to document the process I take and to note the speed improvements. Just remember that speed is a factor in Google’s rankings as I discussed in that blog post.

Image Credit Link

Page speed is important!

Page speed is important not only the end user experience but it’s even more important for Google in many ways. The speed of your site improves Google’s crawling ability and indexation, which may affect the way Pagerank distributes throughout the site’s hierarchy (Petrovic, D. 2011).

Disclaimer: Before I start I should make a disclaimer that these results won’t be 100% ”accurate” as such because they don’t factor in external factors such as the speed of my internet connection, network lag and other programs I had open at the time which may have been accessing the internet at the same time! *puts away flame extinguisher*

There are a few handy tools that I use to monitor a sites speed so if you’re interested in playing along at home on your own site then take a moment to make sure you have the following software and add-ons installed:

• Mozilla Firefox
• Firebug – Every web developers favourite Firefox add-on
• YSlow – A brilliant add-on that makes recommendations for increased page performance

Open up Firefox and type in the URL of the site you wish to analyse and hit enter. Once the page is loaded press F12 and you should see the Firebug panel open up at the bottom of Firefox. e.g.

(Click the image to see the full sized image)

Next you’ll need to click on the Net tab and select Enabled.

Press F5 on your keyboard to reload the page and the Net Tab will fill up with some lovely information about the speed of your site. e.g.

(Click on the image to see the full size image and pay attention to the bottom right hand side that shows the time it took your site to download. I’ve taken these screenshots on our site which I’ve already optimised for speed. In our case the speed is 344ms (onload: 1.51s).

Now click on the YSlow tab next to the Net tab and click on the Run Test button. e.g.

(Click on the image to see the full size)

You’ll now get a Grade for your site.

N.B. We are on a shared host at the moment so there are a few things that I’ve had to get around in different ways and YSlow hasn’t picked up on the gSip compression on sennza. If you’re on a shared host you can check if gZip compression is working on your site at here.

What I did to optimise our clients site and the results

1) Compressed my images

During every project I always used Adobe Photoshop to do the image slicing and as any designer would (or should) know about Adobe Photoshop is that it’s compression of .png is sub-par. Strangely the .png compression in Adobe Fireworks is much better and I’ve never understood why Adobe haven’t fixed this, however they might’ve done that in CS5 but I’ve been too busy to read up on that aspect of CS5 yet!

YSlow comes with a set of tools to assist with speeding up your website. One of these tools is a called Smush.it™. Smush.it™ is a wonderful tool that will take any images and analyse their compression and automatically re-compress the image to achieve the smallest files size without any quality loss. I think it’s a wonderful tool! You can access it in YSlow. Click on the image below to see the full size image so you can see the link to Smush.it™.

Running Smush.it™ through YSlow will only “smush” the images on the page you are currently viewing. I like to “smush” all my files at once by going to the Smush.it™ site and clicking on the UPLOADER tab and uploading all the images from my site in one going and doing them all at once. After your images have been smushed you will need to upload them to your server and sometimes change your CSS as you might have some .gifs altered to .png format. (You’ll be able to see this as the filename will be image.gif.png. Meaning Smush.it™ realised that a .png would be a smaller file size than a gif)

Results after re-compressing images: After “smushing” the images were compressed by 19.37% and the site loaded 28.7% faster!

2) Enabling gZipping (Server side compression)

As we are on a shared hosting solution I learnt that gZip compression wasn’t enabled and there was only one way for me to enable this for our site. I edited the .htaccess file to include this line:

php_value output_handler ob_gzhandler

Making my my .htaccess now look like this:

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress
php_value output_handler ob_gzhandler

Results after gzipping: The site loaded a whopping 81.98% faster! (If you only do one thing to your site…then do this!)

3) Adding Expires headers

Next up I added some more lines to the .htaccess file to set Expires Headers. You can read more about them here. Thus my .htaccess file now looks like this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
php_value output_buffering 1
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html A7200
ExpiresByType text/javascript A604800
ExpiresByType image/gif A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/x-icon A2592000
</ifModule>
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPressphp_value output_buffering 1
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html A7200
ExpiresByType text/javascript A604800
ExpiresByType image/gif A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/x-icon A2592000
</ifModule>

Results after adding Expires Headers: The site now loaded 90.26% faster than it did originally!

4) Fixing ETags

Next up I fixed up ETags. I haven’t had much to do with these bad boys before so I did some reading and modified my .htaccess so that it is now this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
php_value output_buffering 1
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html A7200
ExpiresByType text/javascript A604800
ExpiresByType image/gif A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/x-icon A2592000
</ifModule>
# BEGIN WordPress
<IfModule mod_rewrite.c&gt;
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
php_value output_buffering 1
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html A7200
ExpiresByType text/javascript A604800
ExpiresByType image/gif A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/x-icon A2592000
</ifModule>
<ifModule mod_headers.c>
Header unset Last-Modified
Header unset ETag
FileETag MTime Size
</ifModule>

Results after fixing ETags: No change (WTF was the point of that!!! )

5) Last but not least, minifying CSS and JavaScript files

By default WordPress is configured to do this for all of it’s core files however if you’ve got your own custom theme then you will need to do this yourself. Minifying is simply taking out all of the white space (line breaks, carriage returns, etc) and comments from your CSS and JavaScript files which reduces the file size significantly. You can can code a PHP file to do this for you or use an online tool such as this one.

Results after minifying: The site loaded 91.48% faster than the original speed!

Conclusion

Making changes such as these is important for all websites. There are a few more tips and tricks that I could’ve gone into but I think there is one thing that everyone should do to there site and that’s enable gZip compression as noted in 2).

Works Cited

Petrovic, D. (Tuesday, March 22nd, 2011) - Influencing User Behaviour Through Search Engine Optimisation Techniques
Source: http://dejanseo.com.au/obstacles-in-experimental-testing-and-reverse-engineering-of-google-algorithm/