Date post: | 05-Jan-2016 |
Category: |
Documents |
Upload: | jonah-obrien |
View: | 216 times |
Download: | 1 times |
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!
감사합니다 !