How to make your website or blog faster and keep visitors – and Google – happy

published on April 16, 2010 in Blogging,SEO & PPC

Learn how to speed up your website

Last friday saw the announcement that speed was now officially a raking factor in Google’s algorithm. For most websites, improving their loading time is straightforward: they can start by compressing images and pages, caching static elements and combining and minifying CSS and Javascript. This is what I will cover in this article.

However, the amount of time that can be saved will be strongly dictated by your hosting company and the type of site you have: static vs dynamic, hand coded vs blog vs CMS.

Optimising your website’s speed

NetAccountant has been optimised for the purpose of this article – and to keep you and Google happy. Here’s the original performance table from Web Page Test:

NetAccountant First Test

NetAccountant First Test - Fully loaded in 3.535 seconds

Less than 4 seconds is quite a good time for a shared hosting account. But Google’s – unrealistic – definition of a fast site is one with a loading speed of less than 1 second, so let’s try to shave a second or two off my time.

Picture compression.

One of the larger picture file I was using was the logo (over 20Kb). After some manipulation in an image software and further compression using Yahoo’s Smush it, it has been reduced by half without any loss in quality.

Smush it is actually a great tool available in YSlow and it allows batch processing of all the images that are on a page. Note: it won’t optimise images that aren’t on the page, so you may have to manually add their URL or make sure you “smush” pages that contain all your different images. The other thing to be aware of, is that “Smush it” may change the image format/extension, so you cannot simply re-upload them back, you may need to change your HTML as well.

Text File compression

This is something I was unable to implement, unfortunately, as the shared hosting account I have doesn’t allow it. Compression requires more CPU resources and it impacts all the sites on the server. The hosting company’s decision is therefore understandable.

However, I have used it in the past with great result and I’d like to share the code to be copied in the .htaccess file if your host has mod_deflate enabled.

<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>

This code will compress the HTML output (any web page even if it uses PHP or ASP), CSS and javascript using the Apache 2 module. You may have to use mod_gzip instead, if your site is hosted on an older version of Apache.

Caching of static elements

Caching saves on the number of outgoing requests your browser makes in order to fetch images or static files such as CSS and Javascript. It is possible to “tell” the browser that once it has fetched a file it doesn’t need to fetch it again for x amount of time (weeks, months, or years even). This is an example of the information that you need to add to your .htaccess file if your host has mod_expires enabled.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/png "access plus 2 months"
ExpiresByType image/gif "access plus 2 months"
ExpiresByType image/jpeg "access plus 2 months"
ExpiresByType image/jpg "access plus 2 months"
ExpiresByType application/x-shockwave-flash "access plus 2 months"
ExpiresByType text/css "access plus 2 months"
ExpiresByType text/javascript "access plus 2 months"
ExpiresByType application/javascript "access plus 2 months"
ExpiresByType application/x-javascript "access plus 2 months"
</IfModule>

These above directives will have the following result:

  • favicon will be cached for 1 year
  • images (.png, .gif and .jpg), flash files, CSS and javascript will be cached for 2 months.

So a visitor who comes to your site today will be able to come back for 2 months without having to re-download a static file they had already seen previously, making their visit that much faster. Note: if you edit your CSS file or javascript file, it is good to rename it with a version number so that the new file is served instead of an old one that may be cached by the visitor’s browser.

What else can be done?

There are 4 other points I’d like to discuss before concluding this article with a new test.

  • CDN or Content Delivery Network, are servers, or clusters of servers, configured to be extremely fast and clever: they send the files from the closest server to your visitor. In my opinion they are only useful for very popular sites, or sites with large or many files to download. I would say that in 95% of the cases your website doesn’t need a CDN especially if your own server is already responsive.
  • Combining images as sprites: I may do a tutorial at some point about CSS Sprites, but for now have a read through this great a list apart article explaining what sprites are and how to use them. In a nutshell, sprites are images being combined into one, so that the browser only needs to download a single file. You then use CSS to decide which image to show.
  • Combining CSS and javascript: this could prove to be tricky for blogs as each theme and plugin comes with its own sets of files that need to be updated as the theme/plugin does.
  • Minifying CSS and javascript: another time saving practice that is made more difficult if you use a blog or CMS because changes will get overwritten by software / plugin updates. Minifying removes all the white space and comments you file may contain to make it as compact as possible.

New results

NetAccountant Final Test

NetAccountant Final Test - Fully loaded in 2.453 seconds

A gain of just over a second on the “first request” is very satisfactory in my opinion because of the relatively good first performance.

40Kb were saved in file size from smushing images and minifying some of my Thesis files. I would also add that I have been working on websites for a while, and had already applied some of the time-saving techniques I knew about (relatively well optimised image files, use of WP Super Cache, lean and valid HTML code).

I am a bit disappointed not to be able to use the server compression (to reduce the large CSS and javascript files that represent 80% of the 149Kb that still need to be downloaded) but I may go around this by not calling those files until the visitor is on an article page.

subscribe

{ 9 comments… read them below or add one }

Venetia May 13, 2010 at 11:37 am

These are something new and technical to me but I need to comply with what Google wants. Aside from image resizing which is the easiest thing I could do to make my site faster, I would try some tips you shared and see what will happen. Thanks

Reply

Preston Guyton - Myrtle Beach Real Estate May 20, 2010 at 3:33 pm

These are fantastic ideas. I was not aware of Yslow before. You are the star! Thank you so much for sharing with us this valuable post! I am a realtor and have both website and blog but have not thought about improving the website’s speed.

Regards,
Preston Guyton

Reply

netaccountant May 27, 2010 at 1:04 pm

Thanks for the kind words Preston

Reply

YNH from Web Hosting May 21, 2010 at 10:36 am

It now seems that google looks at every single tiny component to rank its searches. Website speed as a ranking factor I feel is kind of silly! I can understand to extent that websites that take an age to load are not ideal, but if the content is good and other factors then the ‘speed’ of the site should not matter. But unfortunately it seems like it does.

Reply

netaccountant May 27, 2010 at 1:04 pm

Website speed is a factor, but as mentioned in the article, I think it will remain a small one. Only websites with horrendous loading time might get “penalised”. Relevancy is still the target aimed at by all the engines – or at least it should be.

Reply

Contractors Accountant July 1, 2010 at 12:03 pm

Gosh, I didn’t realise website speed was a factor. So are bigger sites penalised?

Reply

netaccountant July 5, 2010 at 12:05 pm

@contractors Accountant – Not necessarily, mainly slow ones. But as I said, Google is still giving relevancy and links more importance than speed.

Reply

Nabil from webbhotell January 22, 2011 at 5:56 pm

Those are some great tips on how to make ones blog faster. But I believe you’ve missed out on a few things.

Not only should make their pitctures smaller by using smush.it – they should also use a plugin called cSprites for WordPress which uses the advanced CSS-technique also known as CSS Sprites which combines all your pictures into one big picture.

Result: less HTTP requests. An even faster blog in other words :)

Reply

netaccountant January 28, 2011 at 11:59 am

Hi Nabil, yes that’s the CSS Spriting I was referring to above – nice find on the WP plugin though.

Reply

Leave a Comment. This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.

CommentLuv badge

Previous post:

Next post:

©2017 NetAccountant.net - All rights reserved
Site Map | Legal Stuff