Optimizing Web pages

Hyun Joo Lee

The University of Texas at Austin

GraduateSchool of Information

LIS 385 T: Information Architecture and Design

Prof. Don Turnbull – Spring 2003

February 20, 2003

Optimizing Web Pages1

Introduction

Making Web pages user-friendly

To make Web sites user-friendly, theprimary thing to consider is optimizing Web pages. In his book of Designing Web Usability: The Practice of Simplicity (2000), Jakob Nielsen says, “fast response times are the most important design criterion for web pages.” The increasing size of digital media and limited bandwidth make it difficult for users to access Web pages.

The size of the Web page is determined by HTML files and any graphics, background images, included elements such as image, and JavaScript (.js), External Sheets (.css) and multimedia files such as sound, video, flash files in the page. By minimizing the amount of data that travels through the bandwidth, Web pages can be simple and loaded faster.Optimizing techniques make Web pages download faster and increase acceptability. According to Andrew B. King (2003, p. 5), it is important to make Web sites that people actually use and speed is a key component of usability, which helps determine sites acceptability.

Newbytes News Network analyzed that 50 percent of online transactions are aborted before their completion (May 11, 2001). The primary reason is poor Web performance. Users do not wait long and most users access the Internet at 56Kbps or less. Research of human factors has shown that “users will wait at most 8 to 10 seconds for a Web page to display” (Newsbytes, 2001). Eight to ten seconds for downloading means 30-40 Kbytes total in terms of page size at 56.6 Kbps bandwidth since 2Kbytes takes almost 1 second at 56.6 Kbps (Table 1). Nowadays the thresholds are becoming shorter. Web pages that violate this limit could lose intended users who do not wait for the pages to download.

Table 1. Maximum Page Size for Various Connection Speeds and Attention Thresholds (King, 2003, p. 20)

Bandwidth / Attention Threshold
1 second 2 seconds 10 seconds
56.6 Kbps 2KB 4KB 34KB
ISDN 8KB 16KB 150KB
T1 100KB 200KB 2MB

History

After the birth of the Web, the online environment has been studied broadly. Network latency, a delay between requesting resources and receiving, is not always the same. “The more resources a page has (graphics, multimedia), the less predictable the response rate” (King, 2003, p. 8). HCI (Human-computer interaction) researchers studied the effects of fixed response times on user satisfaction and simulated variable response rate for more real-world results. In the late 1990s and early 2000s, researchers began to look at “Shackel’s likability” (Appendix A) dimension by studying “the effects of download delays on user perceptions of web sites, flow states and emotional appeal” (King, p. 8).

There are several ways for optimizing web pages, such as optimization by coding (HTML, DHTML) techniques, using simple graphical design, using cache. Search engine optimization and Web server (e.g. HTTP) optimization are usually handled outside of IA. So,this research paper mainly deals with optimization by markup coding and graphic design techniques.

Speeding Up

HTML Optimization

HTML optimization is “the process of minimizing HTML file size to maximize page display speed” (Jupitermedia, 2001). Typical Web pages have extra characters (comments, spaces, returns and redundant attributes) that can safely be removed with no change in appearance. There are several techniques to make a HTML file optimized, such as limiting 255 line length, removing whitespace, omitting redundant tags and attributes, minimizing alt values and so on. Most of these techniques will not make much difference but they would impact Web page development. Examples of HTML optimizations are as below.

Examples)

  • HEAD minimization

By minimizing the size of HEAD, the initial display time can be shorten because browser

interact with servers in discrete-sized packets and the HEAD is parsed before the rest of the

page is rendered (Jupitermedia, 2001).

  • Tables

By simplifying complex tables, breaking up into separate tables, such as a simple fast

loading table on the top and using the colored table cells instead of graphics, the display

time can be faster.

Height/Width

The height and width attributes give information to the browser about the size of graphics.

Using height and width attributes means that the browser doesn't have to calculate the image

size because the height and width values are already decided. If the height and width

attributes are not included, the browser has to load the entire image, then calculate its size

before displaying it.

In addition, HTML editors such as FrontPage pollute the HTML page with a lot of extra and unwanted tags. Therefore, by removing these redundant tags in a text editor like Notepad, the loading time can be shorter. There are several applications that can help with this matter.

XHTML(Extensible HTML)

“X” means that HTML’s addition to a large family of extensible, interoperable, and self-describing markup language and act as a bridge between the HTML and XML (King, P. 99).

XHTML structures content logically, works well with browsers and can separates presentation into a style sheet. Properly designed XHTML documents are typically smaller and less complex. Also, using XHTML “saves on bandwidth and maintenance costs”, while it increases “accessibility and interoperability on alternate platforms”(King, p. 100).

DHTML Optimization

DHTML is basically a combination of Cascading Style Sheets (CSS) and Javascript tomake Web pages more interactive (TheWebsEye, 2002).DHTML files take comparatively small capacity since it is created using text, rendering faster than alternatives such as Flash and Java in HTML.

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents (W3C, 2003). Cascading Style Sheets are one of the key components of DHTML and a good way to minimizing markup file for maximizing speed.It has more flexibility than HTML CSS that was first supported in IE 3.0. Converting old-style table/font layouts into CSS style code saves 25 to 50 percent off file sizes and gives benefits of adaptable structure. For example, using CSS instead of the font tag to set font display values, we can add style very simply and consistently. The font tag will let you create some of the same display effects, but it is no longer considered a valid tag. Using CSS makesdocuments be standards-compliant and also, it provide display control through code working with both HTML and XML.

JavaScript

JavaScript is ideally suited to data validation, interactive forms and enhancing navigation. Also, JavaScript offers rich opportunities for file-size and execution-speed optimization (King, p. 193). According to King’s analysis (pp. 194-246), JavaScript is relatively slow compared to compiled languages since it is run over a network connection. But, most JavaScripts are so fast and small that users do not notice the speed degradation. By using techniques like packing, compression, and obfuscation, 50 to 90 percent of the size of JavaScript files can be saved. Also, using JavaScript saves both extra clicks and a trip to the server.

Caching files (Re-using files)

Cache is a small temporary storage area of the hard drive where browsers keep files while they display them. Any file that is in the cache can be displayed repeatedly without being downloaded again and again (Use cache, Retrieved February 5, 2003). The idea of using graphics on more than one page can be extended beyond the background or menu graphics using cache. In addition to reusing whole graphics, it is possible to reuse components shared in different graphics on more than one page and in more than one graphic. For example, if we have a company logo or title graphic that serves as the header for sections of the company's Web site, it is common to change only part of the graphic to reflect the particular section that it is labeling.

Graphical design optimization

Nowadays, images are everywhere in web pages and they determine the download time of web pages. The size of a HTML page depends on the number and size of images and multimedia objects, which make up over 50 percent of the average page.

The way to optimize Web graphics depends on balancing between maximizing the quality of graphics and minimizing the download time. Effective graphics that load fast and do not dither optimize factors such as color depth, resolution and compression. Graphics programs optimize the file size and quality of GIFs, JPEGs, and PNGs to varying degree. Each has its own strengths and weakness. By “eliminating and replacing images with text and CSS, combining neighboring graphics and reusing graphics with the same URLs” (King, p. 250), the download time of graphics can be decreased.

Color

Color depth determines the number of colors present in the image. It's an important factor when optimizing GIF images. If the number of colors become higher, the image size becomes greater. Between the image quality and size, there is always a trade-off.

Also, storing images in either indexed or RGB color affect the file size. Indexed color is mapped to the smaller color palette. RGB formats known as true-color use 8 bits for each Red, Green and Blue value to form a 24-bit pixel palette that has 16.7 million colors. The native format of most image editing programs is RGB color. The GIF format is an indexed color format. There is a common and optimized “Web-safe” color pallete.

Resolution

Web pages are viewed on computer monitors, which typically display data at 72 ppi (pixels per inch). Therefore, saving files at a resolution of 72 ppi is a good way to minimize the file. If we are using graphics files, which were originally created for print media, they are typically saved at a high resolution (300 ppi) (Use Screen Resolution. Retrieved February, 5, 2003).

Compression

Compression methods can be divided by two ways: lossy and lossless (Webreference, 2000). Lossy compression creates smaller files by discarding some information about the original image. (WebReference, 1996). It removes details and color changes it deems too small for the human eye to differentiate. Lossless compression, on the other hand, never discards any information about the original file.

Balancing between reducing the file size and graphical effectiveness are always trade-offs. In other words, matching the proper file format to the right image saves valuable download time and makes the image look better. Too much compression negatively impacts image quality, while too little compression can slow your site to a painful crawl. The goal is to give readers something pleasing to see within the time they are willing to wait.

The three graphic file formats that are supported by all browsers are GIF, JPEG and PNG (Appendix B). PNG are supported by newer browsers and designed for the Web. Each of these formats compresses graphic data using different methods. Each method works best with a certain type of graphical data: GIF or PNdG for line art with blocks of solid color and JPEG for photos or graphics with continuous tones (“Select the Best File Format”, Retrieved February 5, 2003).

For future trends, JPEG 2000, which has functionality such as “multi-resolution, superior compression efficiency at low bit rates, lossy to lossless progression, and embedded bit stream archtecture,” is on the horizon (WebReference, 1996). Also, Exif, PNP, ART, Wavelet, Bravo and FlashPix challenge the GIF, JPEG monopoly in image compression.

In addition, there are several other ways to optimize graphics, such as “cropping” which cuts off unwanted parts of a picture is a good way to enhance the focus of the graphic content and reduce file size. Also, “Anti-aliasing” can smooth out graphic’s edges but often adds size to graphic file and adds the page loading process. A “Thumbnail” is a miniaturized version of a full-sized image. As a design element it can enable you to show many images without the overhead of loading the full-sized versions. “Interlacing” is a technique for gradually loading graphic files. Interlaced GIFs display on the screen in a non-contiguous manner, and create the effect of low-resolution version of the graphic appearing very quickly. So interlacing can give the readers the illusion of higher bandwidth, because they have something to look at while the rest of the file is downloading.

In case of multimedia contents, it is helpful to use smaller midi and audio file (.wav) if possible. For providing interactive Web pages using multimedia files, it is important to consider not only creating multimedia contents but also delivering the contents efficiently since multimedia files dominates traffic. According to Maureen Chesire et all, a small fraction(3 percent) of streaming media is responsible for nearly half of the traffic although “most streaming-media files are low in but-rate (less than 56Kbps), small in size (less than 1MB), and short in duration (under 10minutes)” (King, p. 283).

For video, provide a link to the file and leave the choice of viewing it to the visitor rather than forcing it to load in the page. Also, when optimizing Flash content, several variables should be considered: “audio, bit rate, reuse symbols, keep animation to a minimum, and generate a file-size report to test” (King, p. 324).

Optimizing and IA

Between the “speeding up” of the downloading time of the Web pages and graphically enriched design, we cannot tell which is more important. Optimization does not mean simply speeding up web pages. Balance between the speeding up and graphical design by user-centered aspects could make web pages more effective and usable.

The information architectureof a Website is more closely related to user-centered aspects and the usability of Web sites rather than media-rich graphically designed Web sites. IAs should be able to “comprehend the whole picture rather than a single portion of it” and “seek design solutions from an objective point of view within the context of people’s needs, the content, the brand and the technology” (WebReference). Therefore, optimizing Web pages by balancing between speeding up and graphical enriched design using user-centered aspects is closely related to the tasks that information architects should do.

In his book of Designing Web Usability: The Practice of Simplicity, Jakob Neilsen, usability specialist,emphasizes the simplicity of Web sites that respond users’ needs. The importance of optimizing web pages is becoming more emphasized even though high bandwidth Internet services are spreading possibly because M-commerce and popular wireless handheld services rely on web page optimizing techniques.

Conclusion

As technology advances, web pages become more interactive and multimedia-based pages as designers believe that users want more complicated and activated web sites. Usability can be determined by “the users’ perception of the quality, which is based on the users’ ease of use, ease of learning and relearning, the intuitiveness for the users and the user’s appreciation of the usefulness of it” (Barnum, 2002, p. 6). Based upon the users’ perspectives, the primary thing that IAs should consider when they plan, design, and construct web pages is optimization that provides balances between usability and media-rich designed web pages. By optimizing web pages using several techniques, such as HTML coding and image file saving methods, IAs can enhance usability by speeding up the web pages and pursue the maximum effectiveness of graphical images at the same time.

References

King, A. B. (2003). Speed up your site. Indianapolis, IN: New Riders.

Neilsen, J. (2000). Designing web usability: The practice of simplicity. Indianapolis, IN: New Riders.

Chesire, M. & Wolman, A. & Voelker, G.M. & Levy H.M. Measurement and Analysis of a Streaming-Media Workload. Berkeley, CA: USENIX Association 2001.

Barnum, C.M. (2002). Usability testing and research. New York: Person Education, Inc.

ISBN 0-205-31519-4.

Newsbytes News Network.(May 11, 2001). Newsbytes Internet Week In Review: Almost 50

percent of online purchases aborted. Retrieved February 10, 2003 from

WebReferenceUpdate Newsletter. (December 21, 2000).Information Architecture - A New

Opportunity. Retrieved February, 12, 2003 from

WebReference. (June 10, 1996). Compression. Retrieved February 4, 2003 from

Jupitermedia Corporation. (March 19, 2001) Extreme HTML Optimization.

Retrieved February, 12, 2003 from

TheWebsEye. (2002). Using DHTML-Dynamic HTML.

RetrievedFebruary 13, 2003, from

W3C. (2003, Feburary 10).Cascading Style Sheets.

RetrievedFebruary 13, 2003, from

W3C. (2003, January 9). PNG (Portable Network Graphics).

RetrievedFebruary 13, 2003, from

Webdevfp. (2003, Feburary 4). Use Cache. Retrieved February 5, 2004 from

Webdevfp. (2003, Feburary 4). Select the Best File Format. Retrieved February, 5, 2003 from

Webdevfp. (2003, Feburaury 4). Use Screen Resolution. Retrieved February, 5, 2003 from

Web site optimization, LLC.(2003, March 1). Shackel's Acceptability Paradigm. Retrieved March 4, 2003, from

Roelofs, G.(1999). The Story of PNG. Retrieved February 5, 2003, from

Appendix A

Figure Shackel’s Acceptability Paradigm (quoted from Web site optimization, LLC)