Optimizing Web pages

Hyun Joo LEELIS 385 T: Information Architecture and Design

March 27, 2003

ContentsIntroduction

Speeding Up by Markup

Graphical design optimization

Optimizing and IA

Conclusion

Making Web pages user-friendly

“Fast response times are the most important design criterion for web pages” (Jakob Nielsen, 2000).

The increasing size of digital media and limited bandwidth make it difficult for users to access Web pages.

Maximum Page Size

“Users will wait at most 8 to 10 seconds for a Web page to display” (Newsbytes, 2001).

It means 30-40 Kbytes total in terms of page size at 56.6 Kbps bandwidth (Table 1).

Why important?

- Maximizing potential Audience

- Proliferation of Handheld/Wireless Web

Table 1. Bandwidth vs. speed(King, 2003, p. 20)

BandwidthAttention Threshold

1 Sec 2 Secs 10 Secs

56.6 Kbps 2KB 4KB 34KB

ISDN 8KB 16KB 150KB

T1 100KB 200KB 2MB

How Web connections work

Internet

Web server

Client

Web browser

Server

HTTP request

HTTP response

http://www.aol.com

History of web performance

After the Birth of the web

HCI researchers – online environments, network latency

User satisfaction

the effects of fixed/variable response times on user satisfaction

In the late 1990s~early 2000s

Shackel’s likability by studying the effects of download delays on user perception of web sites.

Speeding up by Markup: HTML/XHTML/DHTML Optimization

Removing white space, comments

Omitting redundant tags and attributes

*Automatic Optimization

Head minimization

Tables

Height/Width <img src="../images/heightwidth/palette.gif" width="160"

height="160">

439 Bytes<table id="white space" width ="800" >

<tr>

<td>speed </td>

<td>me</td>

<td> up </td>

</tr>

</table>

343 Bytes<table id="white space" width ="800">

<tr>

<td>speed </td>

<td>me</td>

<td> up </td>

</tr>

</table>

283 Bytes<table id="best"></tr><td>speed</td><td>me</td><td>up</td></tr></table>

alt Values

For Vision-impaired users (Accessibility) : rely on alt values to navigate graphic-rich sites.

For non-functional graphicsFor non-graphical browsers

<img src=“/images/global/webprojectlogo.gif" alt=“our logo"> <img src=“h.gif" alt=“”width=”1” height=“1”> <img src=“h.gif" alt=“explain.com”width=”1” height=“1”>

Minimize HTTP request

Each object-HTML pages, images, multimedia, external style sheets, JavaScript takes one HTTP request

Convert images and rollovers into text, consolidating images, and optimizing JavaScripts and style sheets

Complex tables= Slow Rendering Speed

Give browsers as much information as possible

Reduce complexity – simplify, layer

Use CSS to style, fixed table layout option

Substitute background colors for background images

Or do not use tables at all

- get rid of tables altogether and use div and CSS2

LayerBreaking up tables into separate tables

Perceived speed -Use a simple fast-loading table at the

top and an above-the-fold table underneath

-Include useful content, e.g. a search box or navigation bar

Cashing files

Re-using filesPreloading Graphics

<img src="large_graphic.gif" height=1 width=1 alt="">

Cache : 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

Graphical Design Optimization

Optimizing Web graphics - balancing between maximizing the quality of

graphics and minimizing the download time.

Reducing image file size – the number of colors, resolution, dimension, and quality of web-bound images

color depthresolution compression

Capturing and Preparing Images

Simplify your design

Creatively crop

Minimize HTTP request

Use thumbnails

Color

Indexed colors

RGB(true color)

Optimized “web-safe” color pallete.

Resolution

Computer monitors – 72 ppi (pixels per inch)

Saving files at a resolution of 72 ppi is a good way to minimize the file.

Compression

Lossy : creates smaller files by discarding some information

Lossless : never discards any information

GIF (Graphics Interchange Format)

Indexed color image format

CompuServe 1987

Support animation, transparency, interlacing

Lossless compression

8 bits per pixel (2^8=256 colors) http://www.webreference.com/dev/graphics/reduce.html

Original GIF24.8K

Size=13.21K 3 sec @56.6Kbps0% ditherCustom palette114 colors

Original image indexed colors Optimized “Web-safe” color palette

JPEG

Compression algorithm

Compress realistic true-color, grayscale images (e.g. photographs, fine artwork)

Supports 24 bits of color depth (2^24=16.7 million)

Lossy compressionhttp://www.webreference.com/dev/graphics/compress.html

Save for Web

Size=70.9 KB (72,663 bytes)

Original JPEG image

Size=11.9 KB (12,259 bytes)Photoshop Save for Web, optimized JPEG imageImage quality=60%

http://webdevfp.uwyo.edu/webdesign/optimizing/graphics/imageready.html

PNG (Portable Network Graphics)

Supports indexed, true-color up to 48-bit RGB, and grayscale modes

Supported by newer browsers

Designed for the Web

Advantage

- Variable transparency

- Interlacing

GIF/PNG Optimization

Minimize bit depth and maximize cropping

Consider interlacing larger files, to give preview

Convert graphic text to styled text wherever possible

Newer version

JPEG 2000, Exif, PNP, ART,Wavelet, Bravo, FlashPix

- challenge the GIF, JPEG monopoly compression

Other techniques

Cropping

Thumbnail

Interlacing

Enhancing perceived Speed using Flash

The most popular animation format on the Web.

Small, bandwidth Friendly

95 % percent of all browsers

Perceived Speedhttp://disney.go.com/park/bases/playhousebase/today/flash/index.html

Optimizing and IA

Speeding Up

Graphic/media-rich Design

?Balancing

Designers’ perspectives

Users’ perspectives

A role of IA

Conclusion

Optimizing Web pages by balancing between the speeding up and graphic-rich design using user-centered aspects

- the tasks that IA should do.Speed is a key component of usability and an important determinant of system acceptability.

Let’s make Web sites that people

actually use!

감사합니다 !