Streamline Your Website Pages

Squeezing the most efficient performance from your web pages isimportant. The benefits are universal, whether the site is personal or large andprofessional. Reducing page weight can speed up the browsing experience, especiallyif your visitors are using dial-up internet access. Though broadband access is thefuture, the present still contains a great deal of dial-up users. Many sites,ecommerce sites especially, cannot afford to ignore this large section of themarket. Sites with a large amount of unique traffic may also save on their totalmonthly traffic by slimming down their web pages. This article will cover the basicsof on-page optimization in both text/code and graphics.

Graphics

Graphics are the usual suspect on heavy pages. Either as a result of a highlygraphic design, or a few poorly optimized images, graphics can significantly extendthe 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 theones that aren't. Removing large graphics from the homepage to a separate gallerywill likely increase the number of visitors who "hang around" to let the homepageload. Separating larger photos or art to a gallery also provides the opportunity toprovide fair warning to users clicking on the gallery that it may take longer toload. In the case of graphical buttons, consider the use of text based, CSS-styledbuttons 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 yourimage. Though this topic alone is fodder for far more in depth analysis, I willtouch on it briefly. Images come in 2 basic varieties, those that are photographicin nature, and those that are graphic in nature. Photographs have a large array ofcolors all jumbled together in what's referred to as continuous tone. Graphics, suchas business logos, are generally smooth, crisp and have large areas of the samecolor. Photographs are best compressed into "JPEGs". The "Joint Photographic ExpertGroup" 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 mostcompressed and lowest quality, 100 the least and highest quality. JPEG is a "lossy"compression algorithm, meaning it "destroys" image information when applied, soalways keep a copy of the original file. Graphics and logos generally work best inthe "GIF", or more recently, the "PNG" format. These formats are more efficient thanJPEGs at reducing the size of images with large areas of similar color, such aslogos or graphical text.

A few general notes on other media are appropriate. Other types of media such asFlash 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 thesite entirely in Flash, then make sure the individual sections and elements are aswell compressed as possible. In the case of music, I will admit to personal biashere 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 aweb page. In terms of actual text content, there may not be much to do here. Apage's content is key not only to the user's understanding but also search engineranking. Removing or better organizing content is only necessary in extremesituations, 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 iscommon on "infomercial" sites, and violates basic design tenants beyond thoserelated to page weight.

Code is a different story. A website's code can be made more efficient in a varietyof fashions. First, via the use of CSS, all style elements of a web page can now becalled 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 alsothe official recommendation from the W3C. The same may be said of XHTML and theabandonment of "table" based layout. Tables, though effective for layout, producemore code than equivalent XHTML layouts using "div" tags. Where a minimum of 3 tagsare required to create a "box" with content in a table, only 1 is needed usingdivisions. 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 isthe removal of all "white space" from your code. Browsers don't require it; it isprimarily so authors can readily read and interpret the code. The savings areminimal at best, but for sites that receive an extreme amount of traffic, even a fewsaved 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 cansignificantly reduce total weight. The images that remain should be optimallycompressed into a format appropriate for their type, photos or graphics. Avoid hugeblocks of text that cause unnecessary vertical scrolling. Organize the site moreefficiently to spread the information across multiple pages. Adopt XHTML and CSS toreduce the size of the on-page code, and call the CSS externally. These tips shouldhelp reduce the size of your pages and speed their delivery to your viewers.

Source: Express-Press-Release.com

Get RSS updates on latest computer technology and software related press releases   

You are welcome to include these headlines in your own pages. If you want to find out how to parse this RSS file please read our tutorial How to parse RSS feeds with PHP.