Skip to content

7 Quick Fixes to Speed up your Website

by Toby Somerville on October 29th, 2010

Two things that are often overlooked when it comes to building websites is speed and efficiency. Everyone is so focused on getting their site ‘out there’, and getting it to the top of Google or appearing on the front page of Digg, that when they get to that elusive and exclusive place they find their sites load slowly or not at all. Not good.

Now there there are a large number of reasons that this happens. So, how do you make your site fast and efficient, no matter what hosting you are using?

Here are a 7 quick and dirty ways to increase the speed and efficiency of your website:

  1. Include JavaScript and CSS as external files
    Putting your JavaScript and CSS in external files allows the same file to be used across multiple pages. The web browser can therefore cache (store) a version locally and so does not need to retrieve it again for every new page. This reduces page load times for the client and your bandwidth usage.
  2. Include the CSS at the top of the page and the JavaScript at the bottom
    That external CSS file should be called in the head of the page as it is a non blocking i.e. can be loading at the same time as the rest web page. JavaScript on the other hand is blocking and must be completely downloaded and run before anything after it can be downloaded. Therefore the JavaScript should be loaded at the end of the page just before the closing body tag.
  3. Make sure all your images are optimized for the web
    Optimizing an image for the web really means making the image as small as possible in terms of file size and dimensions. Images from your digital camera will in general be too big. They should be saved as jpg images at 72 dpi at a maximum quality rating of 80%. An excellent free service to wring every last byte from an image is Smush It.
    The image should also be resized to the correct dimensions for the page. A Free online image editor is  Picnik.
    There is more to image optimization as there are 3 main compression types used on the web: gif, jpg and png. They each have their benefits and disadvantages depending on the image being used and the browser displaying it, but we’ll look at them in another post.
  4. Load as few external files as possible
    Every CSS, JavaScript, image and media object that exists in your page requires a separate call to the Internet to retrieve it. Browsers limit the number of simultaneous connects they can make, so that slows the loading of the page especially if you have a large number of external files. A simple way to reduce the number of external call is to combine as many of your CSS and JavaScript files into as few files as possible.
  5. Make sure your HTML and CSS are valid
    Valid code is rendered faster by web browsers. To check validity use the World Wide Web Consortium’s validator.
  6. GZIP your text based files
    GZIPping is compressing the text base files (HTML, CSS, JavaScript) prior to sending them to the client, this can reduce the file size by up to 80%. It is built into most common web servers by default. Ask your hosting provider to make sure GZIP is enabled for your site.
  7. Use a CDN
    A CDN is a Content Deliver Network. That is a network of servers around the globe that deliver files from the closest geographical location to the client.

Hopefully that has given you a few quick pointers on how to speed up your site. Future posts will give you even more tips on how to make your site perform even faster whilst using fewer resources.

No comments yet

Leave a Reply

You must be logged in to post a comment.