Download ppt - School of Information

Optimizing Web pages
Hyun Joo LEE
LIS 385 T: Information Architecture and Design
March 27, 2003
Contents
Introduction
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)
Attention Threshold
Bandwidth
1 Sec
2 Secs
10 Secs
56.6 Kbps
2KB
4KB
34KB
ISDN
8KB
16KB
150KB
100KB
200KB
2MB
T1
How Web connections work
Client
Server
HTTP request
Internet
Web browser
Web server
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 graphics
For 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
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
Cashing files
Re-using files
Preloading 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 depth
resolution
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 image
indexed colors
Optimized “Web-safe” color palette
Original
GIF
24.8K
Size=13.21K
3 sec
@56.6Kbps
0% dither
Custom
palette
114 colors
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
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
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 Speed
http://disney.go.com/park/bases/playhousebase/today/flash/index.html
Optimizing and IA
A role of IA
Speeding Up
Users’
perspectives
Balancing
?
Graphic/media-rich
Design
Designers’
perspectives
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!
감사합니다 !