|
<< Return to Articles Home
Page
|
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.
|
