Optimizing

Document Sample
Optimizing Powered By Docstoc
					    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


 T1               100KB                   200KB            2MB
   How Web connections work
                                      Server
  Client
               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
                                 Size=13.21K
                                 3 sec
                                 @56.6Kbps
Original                         0% dither
GIF                              Custom
24.8K                            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                                               Size=11.9 KB
   (72,663                                                 (12,259 bytes)
    bytes)                                                 Photoshop
  Original                                                  Save for Web,
JPEG image                                                  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    Balancing
               ?
                           Graphic/media-rich
                             Design
   Users’
perspectives

                    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!
감사합니다 !

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:10
posted:12/29/2011
language:
pages:31