September 06th, 2010

speed  |   webdesign  |   hosting

Need to have a lift-off for your site?

Starting with your service provider: 

  • The unlimited-everything hosting package for $1.99 per month seems nice at first, but then be sure to check your site during business hours.
  • Search independent reviews, try to find an ISP that has been around for some years, has decent support and does not have hundreds of thousands of customers crammed into small amount of servers.
  • Check your logs or Google Analytics statistics to find out where your visitors are  mostly coming from. Try to put the site on a server that is geographically closer to them.
A lot is already achieved by having a nice, non-congested connection to your site. Then you can start fine-tuning,  you got to have a real speed blast, right?

Moving on to the software that is located on the server:

  • Make sure that there are adequate caching capabilities available for your blog or CMS software. WordPress for example even has a cache component that makes static HTML pages out of dynamic ones.
  • When having a very old content management system, you may even consider scrapping the existing one altogether and move your content to a modern one. As a bonus, some new trends like search-engine friendliness will likely be supported.
  • Always be sure to experience by yourself how snappy the new CMS feels or make sure to select the one that has a fast web programming framework like Yii or Symfony 2 under the hood.

Now that you have your ScramJetCMS installed and the site flies, why not squeeze some extra Machs out of it?

The easiest tools for pointing out some possible extra tweaks are distributed as add-ons for Firefox' plugin called Firebug. These are Yahoo! YSlow and PageSpeed by Google. The two are quite similar so we'll be just checking YSlow.

Install Firebug and then YSlow. 

 

Activate Yslow by clicking on its icon next to the bug icon in the bottom-right corner of the browser
Click on the button to see the current score and recommendations for possible tweaks.
If you have just a blog and your site does not have lots of of traffic, select "Small site or blog" from there. The rating might improve.

If the web designer has done a decent job then most likely the following items have a low rating and might be improved:

  • Making fewer HTTP requests
  • Add Expires headers
  • Compress components with gzip
  • Minifying JavaScript and CSS
  • Avoiding scaling of images

Making fewer HTTP requests

There will be less HTTP requests when there is a small amount of images and other resources like CSS ja JavaScript files to be downloaded.

Images can be combined into sprites . Combine all small, non-repeating backgrounds or ordinary images into larger files. Images may be separated by type, like all-images.png, all-images.gif ...and so on. You can even make a gif-version of the png sprites file, just to handle IE6 smoothly and to avoid too large dose of Alpha Filter. For example, here are some PNG images used on this site.

To combine JS and CSS - files, check Minify. For example your multiple CSS "link" statements may be replaced with something like this: 

  1. <link href="/min/f=/css/file1.css,/css/file2.css,/css/file3.css" rel="stylesheet" type="text/css" />


As a bonus, JavaScript and CSS will also be gzipped and thus even covering some of the third proposition already.

Add Expires headers

Make sure that your hosting company supports the following .htaccess content and copy-paste it there. Internet Explorers do not handle ETags optimally so it is just better to set the server to ignore those.

  1. Header unset ETag
  2. FileETag None
  3. <FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
  4. Header unset Last-Modified
  5. Header set Expires "Fri, 21 Dec 2020 00:00:00 GMT"
  6. Header set Cache-Control "public, no-transform"
  7. </FilesMatch>


Compress components with gzip

Some compression was already implemented by using Minify in the "Making fewer HTTP requests" - part. For the rest of the content, you need to consult the provider of your CMS. There might be gzip support already built into it and you might just need to activate it or it must be added. For WordPress for example, there's WP HTTP Compression.

Minifying JavaScript and CSS

This was already implemented with the help of Minify in the "Making fewer HTTP requests" - part.

Avoiding scaling of images

Go through all images on your site and make sure that the dimensions set in CSS or as HTML parameters are the same as the actual sizes of the images. Make sure that the CMS you are using supports proper thumbnail generation and there's also support for thumbnails making in the wysiwyg editor you are using in the CMS for text and image insertion.


After following these guidelines, this page right here got a blazing score of 98! When the site was not optimized, the scores were generally between 70 and 80.


Some speed test sites:
Geometrix - uses both Google Speed and YSlow to test the site
WebPageTest - test your site from different geographic locations
SearchMetrix - speed and SEO testing