Squeezing the most efficient performance from your web
pages is important. The benefits are universal, whether
the site is personal or large and professional. Reducing
page weight can speed up the browsing experience, especially
if your visitors are using dial-up internet access.
Though broadband access is the future, the present still
contains a great deal of dial-up users. Many sites,
ecommerce sites especially, cannot afford to ignore
this large section of the market. Sites with a large
amount of unique traffic may also save on their total
monthly traffic by slimming down their web pages. This
article will cover the basics of on-page optimization
in both text/code and graphics.
Graphics
Graphics are the usual suspect on heavy pages. Either
as a result of a highly graphic design, or a few poorly
optimized images, graphics can significantly extend
the load-time of a web page. The first step in graphics
optimization is very basic. Decide if the graphics
are absolutely necessary and simply eliminate or move
the ones that aren't. Removing large graphics from
the homepage to a separate gallery will likely increase
the number of visitors who "hang around"
to let the homepage load. Separating larger photos
or art to a gallery also provides the opportunity
to provide fair warning to users clicking on the gallery
that it may take longer to load. In the case of graphical
buttons, consider the use of text based, CSS-styled
buttons instead. Sites that use a highly graphic design,
a common theme in website "templates", need
to optimize their graphics as best as possible.
Graphics optimization first involves selecting the
appropriate file type for your image. Though this
topic alone is fodder for far more in depth analysis,
I will touch on it briefly. Images come in 2 basic
varieties, those that are photographic in nature,
and those that are graphic in nature. Photographs
have a large array of colors all jumbled together
in what's referred to as continuous tone. Graphics,
such as business logos, are generally smooth, crisp
and have large areas of the same color. Photographs
are best compressed into "JPEGs". The "Joint
Photographic Expert Group" format can successfully
compress large photos down to very manageable sizes.
It is usually applied on a sliding "quality"
scale between 1-100, 1 being the most compressed and
lowest quality, 100 the least and highest quality.
JPEG is a "lossy" compression algorithm,
meaning it "destroys" image information
when applied, so always keep a copy of the original
file. Graphics and logos generally work best in the
"GIF", or more recently, the "PNG"
format. These formats are more efficient than JPEGs
at reducing the size of images with large areas of
similar color, such as logos or graphical text.
A few general notes on other media are appropriate.
Other types of media such as Flash or sound files
also slow down a page. The first rule is always the
same, consider whether they are absolutely necessary.
If you are choosing to build the site entirely in
Flash, then make sure the individual sections and
elements are as well compressed as possible. In the
case of music, I will admit to personal bias here
and paraphrase a brilliant old saying, "Websites
should be seen and not heard." Simply, music
playing in the background will not "enhance"
any browsing experience.
Text and Code
The most weight to be trimmed on a page will come
from graphical and media elements, but it is possible
to shed a few extra bytes by looking at the text and
code of a web page. In terms of actual text content,
there may not be much to do here. A page's content
is key not only to the user's understanding but also
search engine ranking. Removing or better organizing
content is only necessary in extreme situations, where
more than page weight is an issue. An example might
be a long, text heavy web page requiring a lengthy
vertical scrolling to finish. Such a page is common
on "infomercial" sites, and violates basic
design tenants beyond those related to page weight.
Code is a different story. A website's code can be
made more efficient in a variety of fashions. First,
via the use of CSS, all style elements of a web page
can now be called via an external file. This same
file can be called on all a site's pages, providing
for a uniform look and feel. Not only is this more
efficient; it is also the official recommendation
from the W3C. The same may be said of XHTML and the
abandonment of "table" based layout. Tables,
though effective for layout, produce more code than
equivalent XHTML layouts using "div" tags.
Where a minimum of 3 tags are required to create a
"box" with content in a table, only 1 is
needed using divisions. Using XHTML and CSS in combination
can significantly reduce the amount of "on page"
code required by a web page. A final, relatively insignificant
trick is the removal of all "white space"
from your code. Browsers don't require it; it is primarily
so authors can readily read and interpret the code.
The savings are minimal at best, but for sites that
receive an extreme amount of traffic, even a few saved
bytes will add up over time.
Conclusions
Target images and media files first when seeking
to reduce the weight of a page. They are the largest
components of overall page weight and simply removing
them can significantly reduce total weight. The images
that remain should be optimally compressed into a
format appropriate for their type, photos or graphics.
Avoid huge blocks of text that cause unnecessary vertical
scrolling. Organize the site more efficiently to spread
the information across multiple pages. Adopt XHTML
and CSS to reduce the size of the on-page code, and
call the CSS externally. These tips should help reduce
the size of your pages and speed their delivery to
your viewers.
About the author:
Mr. Lester worked in the IT industry for 5 years,
acquiring knowledge of hosting, website design, before
serving for 4 years as the webmaster for Apollo Hosting,
http://www.apollohosting.com Apollo Hosting provides
website hosting, ecommerce hosting, vps hosting, and
web design services to a wide range of customers.
