Webtacular
   


Improving page speed

Improving page speed

Posted 05 June 2009

   

With the of broadband internet widespread in  homes and offices, people are used to loading up websites instantaneously. Because of the modern worlds drive to get everything done "right now," when a website doesn't deliver the goods within seconds, people become impatient and leave as quickly as they arrived. Who who can blame them when a click on the back button reveals many alternatives within search results?

Don't want to risk losing valuable prospects? Then read on!

What elements should I improve?

Steve Souders, ex-Chief of Performance at Yahoo, is a well recognised expert on page speed. Through researching the relationship between servers, browsers and websites he came up with 14 best practice rules for speeding up websites.  Below is a look at what we believe are the most important ones.

Use an Expire Header

When people visit a website their web browser will by default 'cache' the content. This means elements such as images are saved on disk so re-visited pages will load quicker as the images are already stored. This gives a misconception to repeat users that a website is fast, whilst new users have to wait longer.

On a web server, you can change the expiry header to "never expire" on all elements including images, stylesheets and Flash. This way, there are less HTTP requests to download content that could isntead be cached by the user's web browser.

Changing the expiry header is different depending on which web server you use (Apache, ASP.net). A Google search will find the a walkthrough for your server.

Minimize HTTP Requests

HTTP requests are simply the loading of the elements of the pages such as images, JavaScript, CSS and Flash animations.

There are some ways of reducing HTTP requests beyond changing expiry headers whilst keeping the same content, but as these aren't all cross-browser friendly its best to ask yourself if each element is actually enhancing your page, or can it be removed?

Arranging Code Intelligently

In the official specification of HTML, it is said that CSS stylesheets should be put in the Head of the page. This helps the user as it will mean the page will load progressively, so although it might not actually load quicker, it will seem like it.

Improvements within your CSS can be made by making one time expressions, as otherwise every time a user scrolls down the browser re-accesses the stylesheet.

JavaScript on the other hand, should be placed at the bottom of the HTML because browsers are unable to download anything else at the same unlike with images. It is worth noting that not all scripts will work outside of the Head, especially ones that write.

Lightbulb

Remember, all new visitors have an uncached version of your website. It will take longer for them to load your website than returning users (like you!).

Cutting down JavaScript and CSS

A lot of webmasters put their non-HTML code within the page itself. This technique reduces HTTP requests when comparing to making these scripts into external files. However, it does increase the size of the HTML document itself which of course increases download time fractionally.

To externally link your CSS stylesheet, paste all of the code (excluding start and end tags) into an editor and save it as a '.css' file. You then link to it in your HTML in the Head of the document, an example being:

You can do the same with JavaScript, this time saving it as a '.js' file. It would display as follows:

You can also reduce the size of JavaScript and CSS by 'minifying' it. You can use a tool such as Yahoo's code compressor to do this. It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, omitting as many white space characters as possible, and replacing all local symbols. This results in a smaller file size and quicker download speed.

Finally, many websites accidentally duplicate JavaScript code too, or have it placed on a page where it isn't needed. Be sure to check this isn't happening on your website!

Avoid Redirections

Any redirection by default slows down the process for a user. A particular wasteful re-direction is linking to a sub-folder without the trailing slash. This intitates an automatic, and unncessary redirection. Ensure when linking to a subfolder to do so like this:

Redirects are often used to cover old website domain names etc. If possible, try to avoid them as both 301 and 302 redirects aren't cached.

How can I test my website current speed?

If you have a great connection, you may be blind to any speed issues your website may have. You can test your website's page speed by using Yahoo's YSlow Mozilla Firefox add-on which, like Google Page Speed, analyses web pages and suggests ways of improving them for the benefit of improved speed.

If you enjoyed this article from Webtacular, you can share it with your friends using the button below. Thanks for your support!!

Bookmark and Share


You may also be interested in reading....
 

Article Icon

Google Launches Page Speed

   
Article Icon

Does page speed affect rankings?

   
Article Icon

Page speed to become ranking factor on Google?

   

Articles to your inbox

Discover more about Search Engine Optimisation, Pay Per Click advertising and Email Marketing by getting our articles when they're published.

Just put your e-mail address in the box below.

 

Sign Up

 

 


Latest Articles

Latest Articles

News Articles

Getting to the top of Google Business listings

   
News Articles

Making the most of unsubscribes

   
News Articles

Getting people to subscribe

   
News Articles

The benefits of permission based email marketing

   
News Articles

The subject line commandments

   

View All

Webtacular is a service from Sixth Sense ESP

© 2009