1. Optimizing Web pages Hyun Joo LEE LIS 385 T: Information Architecture and Design March 27, 2003

2. Contents Introduction Speeding Up by Markup Graphical design optimization Optimizing and IA Conclusion

3. 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.

4. Maximum Page Size “Users will wait at most 8 to 10 seconds for a Web page to display” (Newsbytes, 2001).8 to 10 seconds 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

5. Table 1. Bandwidth vs. speed (King, 2003, p. 20) Bandwidth Attention Threshold 1 Sec 2 Secs 10 Secs 56.6 Kbps 2KB 4KB 34KB ISDN 8KB 16KB 150KB T1 100KB 200KB 2MB

6. How Web connections work Internet Web server Client Web browser Server HTTP request HTTP response http://www.aol.com

7. 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.Shackel’s likability

8. Speeding up by Markup : HTML/XHTML/DHTML Optimization Removing white space, comments Omitting redundant tags and attributes *Automatic Optimization Head minimization Tables Height/Width

9.  439 Bytes speed me up  343 Bytes speed me up  283 Bytes speed me up

10. alt Values For Vision-impaired users ( Accessibility) : rely on alt values to navigate graphic-rich sites. For non-functional graphics For non-graphical browsers

11. 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

12. 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

13. Layer Breaking 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

14. Cashing files Re-using files Preloading Graphics 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

15. 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 depth resolution compression

16. Capturing and Preparing Images Simplify your design Creatively crop Minimize HTTP request Use thumbnails

17. Color Indexed colors RGB(true color) Optimized “web-safe” color pallete.

18. Resolution Computer monitors – 72 ppi (pixels per inch) Saving files at a resolution of 72 ppi is a good way to minimize the file.

19. Compression Lossy : creates smaller files by discarding some information Lossless : never discards any information

20. 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

21. Original GIF 24.8K Size=13.21K 3 sec @56.6Kbps 0% dither Custom palette 114 colors Original image indexed colors Optimized “Web-safe” color palette

22. 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 compression http://www.webreference.com/dev/graphics/compress.html

23. 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 image Image quality=60% http://webdevfp.uwyo.edu/webdesign/optimizing/graphics/imageready.html

24. 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

25. GIF/PNG Optimization Minimize bit depth and maximize cropping Consider interlacing larger files, to give preview Convert graphic text to styled text wherever possible

26. Newer version JPEG 2000, Exif, PNP, ART,Wavelet, Bravo, FlashPix - challenge the GIF, JPEG monopoly compression

27. Other techniques Cropping Thumbnail Interlacing

28. Enhancing perceived Speed using Flash The most popular animation format on the Web. Small, bandwidth Friendly 95 % percent of all browsers Perceived Speed http://disney.go.com/park/bases/playhousebase/today/flash/index.html

29. Optimizing and IA Speeding Up Graphic/media-rich Design ? Balancing Designers’ perspectives Users’ perspectives A role of IA

30. 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!

31. 감사합니다 !