 |
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.
 |
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!! |
You may also be interested in reading....
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.
|