 |
Qualica Technologies
4th Floor West Wing, 158 Jan Smuts Ave, Rosebank, Johannesburg 2196
T: +27 11 731 1700 | F: +27 11 327 6052
|
|
|
|
|
 |
"Qualica is about providing measurable
improvements to customers' business processes
through our specialised products and services".
|
|
 |
|
|
|
|
|
|
Website owner: Optimise or Die
By Paul Bouwer
Senior Developer
Qualica Technologies (Pty) Ltd
Website optimisation (WSO) is a highly underrated and under-utilised commodity when it
comes to site design. Website size and complexity optimisation is crucial in terms of saving
bandwidth and network traffic which, translated, means lower costs.
Possibly even more crucial is the potential to retain online customers because your site will
load more quickly - and appear more responsive. With the competition just a click away,
Website owners, especially those concluding transactions online, must cause their
customers as little inconvenience as possible.
WSO is the process of reducing web site size, traffic and complexity to maximize website
performance. It can also include search engine optimisation (to ensure that your Website
features prominently among search engine results), pay-per-click optimisation (to get the
best value out of the keywords you bid for when associating your Website with search
engine advertisements), and conversion rate optimisation (getting more traffic and sales)
as part of your overall site redesign process.
There are several techniques that can be employed to improve website performance, and
Qualica has used them on sites such as that of 1time airlines, which is now an award-
winning site in terms of its ease of use and navigability.
One of the techniques used on the 1time site by Qualica was compression. This allows
content to be compressed before being sent to the browser. Modern browsers can all
handle this compressed content and will uncompress before displaying the page to the
user. Compression can result in 70-90% savings in content size - very significant. We
compressed all pages from the website. We also only compressed to those browsers and
versions of browsers that could handle it - there are certain browser versions (IE 6) that
have know compression bugs - we erred on the side of caution - rather have a slower site
than one that does not work with your browser.
Another technique used was to reduce the number of images, javascript and css files
referenced on a web page. There is a current limit of 2 connections to a web site in all the
major browsers. It is easy to see then how a large number of requests will make the site
appear slow. We actively worked to reduce the number of items that the browser would
have to request per page. We did this by combining all core javascript functions into a
single js file. We also combined multiple related images into a single image and used the
sprite css technique to show just the required image from the combined image where they
were needed.
The expires headers technique is used to configure web servers to tell a browser how long
it should cache specific website content for before asking the web server for it again. This
can be used to force the browser to cache content that will not change in a predetermined
time frame. Thus a specific image or javascript library can be served once and after that
the browser will not ask the web server for it again. This comes back to minimising the
number of requests for a page. The expires header basically tells the browser when it can
expire the content and ask for the content from the web server again. It should not ask for
this content again until the expiry date has been reached. If you do not use an expires
header, the browser will always confirm with the web server that it has the latest version of
a file even if it does not download the content again - resulting in more requests than
necessary. We used this technique to ensure that all static content was fetched only once
by the browser during the user's interaction with the website. This results in fewer requests
over the user's session with the website as more and more of the static content is cached
on the browser side. An example is the core javascript lib which is downloaded once on the
landing page and never again even though every single page references it.
ETags are a web server configuration technique and are used to to manage versioning of
specific website content. The browser will check the etag (version) for some content in its
cache against the etag the web server reports. If the etags do not match the browser will
ask for the new version of the content and update its etag in its cache for that
content.Some of the content on the 1time site is too dynamic and we do not used "expires
headers" on it. On this content the browser will perform the etag check which helps to
reduce the size of requests.
Awareness of WSO is not as widespread as it should be, given that most of the techniques
are fairly trivial. With companies like Yahoo publishing website optimisation rules and
providing tools like YSlow (http://developer.yahoo.com/yslow/help) the knowledge should
become more mainstream. Web site optimisation is important for business sites since
bandwidth cost money and implementing these techniques saves bandwidth and network
traffic. This directly relates to the bottom line. It also provides the end user with a better
user experience since the website will load faster and appear more responsive. In South
Africa with our limited bandwidth this is even more relevant.
Not enough developers are aware of the simple techniques that can employed to gain
huge savings in terms of bandwidth and speed. It is incumbent upon Website owners to
ensure that vendors and internal development teams take cognizance of these techniques,
since they have a direct bearing on business effectiveness.
The argument for optimization is a no-brainer, and there are few pitfalls expect perhaps
over-optimisation, or spending too much time to recover too little in terms of savings.
|
|
|
|
|
|
 |
