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