Who prefer slow web sites?

Monday, August 18, 2008 – 10:23 am | By Bjarne
Tagged , ,

While more and more people are using faster Internet connections and we get more and more high-speed Internet connections at work and in our private home, it seems like the designers and developers forget an important issue in their work with web sites - the speed!

The whole so-called Web 2.0 wave certainly has an effect on this issue. Every site has now implemented Flickr galleries, Twitter integration, FaceBook plugins, etc., etc. All these functions need an external server-call which ultimately will slow down a site’s load-time.

Who prefer slow web sites?

We think it’s a naturally part of our job, not just to develop and design attractive sites, but also to develop web sites with high perfomance.

There are proofs for the 3 following statements;

  1. Fast web sites will give a better user-experience and will cause the user to stay at your site for longer.
  2. Actually Google pays attention to load times when indexing. Said in another way, a slow web site isn’t that good if you find SEO important.
  3. If you are in the e-commerce industry the load-time is crucial! A slow page will make a potentially customer find another shop.

Off course there’s a fine line between load-times and boring web sites. A slick designed web site with a lot of graphics, buttons and pictures just loads slower than a clean text and CSS based site. to help you avoid the most common problems and issues, we’ve made this little list;

External server-calls

Keep away from it if possible. Make our own galleries instead of implementing your Flickr gallery. Instead of multiple server calls all of your content is loaded from one server. Logically this is the fastest model.

Another thing is that your users get the same experience every time, because you avoid possibly external server errors.

In general, host your own content.

Image width and height

Not many designers and developers is aware of it, but actually your content loads faster if all images have the width and height attribute set. In that way, the server instantly knows how big this object is, and loads the content in the background along with the rest of the content.

Or else it have to load the image, analyze the dimensions, and the go on with the rest of the content.

Caching

If you’ve build your page in dynamic language as ex. php, your server generates the pages every time a page is called. It takes time… You can increase these load-times a lot by the help of caching.

When a page is loaded for the first time, the server generates a static page from your dynamic content. The static page is being “saved”. And the next time the page is called up, the server serves the static page which has been generated once.

If you should update your content, the server go through the same procedure once again first time the page is being called afterwards the update.

CSS compress

Your external CSS documents are hopefully well structured and filled with comments and white-space. It’s a good thing and the right thing to do! But long CSS documents will off course make the kbs count. The same thing for JS documents.

A relatively easy way to make your external documents smaller is to use a compressor. A compressor typically removes;

  • Line-breaks
  • Whitespace
  • Often strips comments

Off course you shall save your well-structured documents, but only load / link the compressed versions in your header.

Search Google for a CSS compressor

Combine your external documents

Logically fewer external documents is better than a lot; combine your JS in one central JS dokument, and do the same procedure with your CSS styles in one central document.

The easiest method is simple copy / paste!

One Comment

  1. jitendra
    Posted Friday, December 19, 2008 at 2:36 pm | Permalink

    good articles.

Post a Comment

Your email is never shared. Required fields are marked *

*
*