Fast loading pages are imperative to a good website design and staking this would just mean losing visitors. Cause no person sticks to a page that takes more than 8 seconds to load. And this is an established fact.



Reasons for a slow website

Popular belief spells that a website runs slow because of the file size of the elements in it. But actually, that's just one of the many responsible factors. What slows down a website can be

File size of the HTML document

File size of document dependencies such as scripts, images, multimedia elements etc.

Complexity of the HTML

Speed of the connection of the user

Speed of third party servers

Response time of DNS servers

Speed and response time of the user computer

Server responsiveness

Tips for a faster website

There are certain things that you can do to overcome the technical factors and get a quick response web site.

With quality intact, optimize all the HTML content of the website alongwith the dependencies. All the comments and line breaks in the HTML documents that is a part of publication process should be ripped off.

You can reduce the number of dependencies by using the least amount of file includes. Multiple scripts could be collated into one and all the images can be loaded at once using CSS sprite techniques.

Do not include third party content from servers. Instead use the local RSS feeds. This way, you would not have to deal with DNS server delays and moreover, you are independent of the other server if in case it goes down.

Define dimensions for images alongwith their container elements. This ensures that the first rendering of the page is correct and it doesn't jump around when the image is loading.

Keep the large dependencies like massive scripts etc towards the end of the document. This way, the rest of the page is displayed before the browser loads them. If large java scripts are loaded at the beginning of the document then the server waits with rendering until they are fully loaded

Some special speed requirements!

Reducing the number of file includes obstructs the maintainability of the product. To maintain a consistency in the look and feel of the website with different pages, different styles should be kept in own includes and added to the only those pages that make use of them. There could be one base CSS include, one for the homepage, one for article and so forth.

Scripting follows the same lines. To make maintenance easier, you should keep methods that do the same job in their own JavaScript includes. This way you can find a certain method without having to scab through the whole script. But avoid adding scripts inside the body of the document as it mixes the web development layers structure and behavior.

There are technical ways too

The PHP script collates several scripts or CSS style sheets into a single file. In case of JavaScript, it even cuts down on size using Douglas Crockford's JSmin. The easy to use scrip and will cache the collated file for you until you change one of the files included in it. Thus you have the files automatically packed, cached and the include file updated when you change them. You get the best of both, maintenance and speed without having to change anything by hand.

Tacking the onload problem

Unless the scripts are embedded in the body of the document, they would need to be started when the document finishes loading. This gives rise to delays and subsequent problems. The reason for this delay is the way browsers load, parse and render documents.

How to avoid the on-load problem with on-demand pulling of content

Majority of cosmetic onload issues arise because the document is overloaded with far too much content. There are either massive amounts of text displayed in a tabbed interface or the navigation comprises of multiple levels. JavaScript should be used to load the content only when the clever interface can be offered to the user. Users without JavaScript would get a plain version comprising only of the most necessary elements and content.

These ideas will help change your website or application and make it more responsive!