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. Some designers focus with near
exclusivity on reducing page weight to the exclusion of all else.
Though perhaps appropriate in some cases, single-minded focus on
only one aspect of design is generally not recommended. 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.
|
