Transcript Optimizing Web Pages

Optimizing Web Pages
Sandra Leingruber
10/23/2007
Agenda





What does webpage optimization mean?
Why is it important?
How can you optimize your webpage?
The Webpage Analyzer
Questions?
Webpage Optimization = Web Speed



Webpage optimization refers to the art of transforming
the content on your page into a smaller, more
streamlined form to achieve faster download times.
Why is this important?
Users have short attention spans. Research has shown
that users will wait at most 8 to 10 seconds for your
page to display.
Every byte counts! The idea is to minimize file size to
maximize page display speed.
Balance in Web Design


Tradeoff between bandwidth and beauty: The skilled web
designer walks a fine line between appearance and
functionality, and can craft pages that appear well but
also display quickly.
Knowing your audience: If the site caters to everyone,
the size should not exceed 50kb. If the site is targeted at
high end users, the page size can bloat accordingly.
GOOGLE
What’s happening when a webpage is loading?



Your web browser sends out HTTP ‘GET’ requests for
different files (images, JavaScript, html files etc.) to
servers.
The server sends back the requested files in small
pieces called packets.
Bottom line: Be aware of the number of non-html items
on your page, as multiple requests at a time can
increase download times considerably.
How to Optimize Web Pages

Web page optimization requires not only optimizing
(decreasing the file size) of HTML files but also of all
other content – images, multimedia content (audio,
video, Flash) etc.



HTML optimization
Graphics optimization
Optimizing multimedia content
HTML Optimization



WYSIWYG editors such as FrontPage and
DreamWeaver pollute the HTML page with a lot of extra
and unwanted tags.
<FONT> and <P> tags – instead use CSS style sheets
Remove or reduce comments


For editing purposes designers often use comments indicating
where updated information should be placed
Minimize the size of the HEAD section

Keep metatags under 200 characters, use no commas (just
spaces)
HTML tables = trouble


Simplify complex tables
Break your tables up into separate tables


Instead of one large table, have a simple fast-loading table at the
top and subsequent tables underneath
Browsers render tables sequentially, giving the user something
to look at quickly first, while the rest of your page loads.
HTML tables = trouble

Fast table rendering

With browsers that support CSS2 tables can get a big speed
boost with the new table-layout property. When you set the tablelayout to a "fixed" table layout, you are fixing the column widths
(and optionally the column heights) for the entire table.
HTML tables = trouble

Minimize attributes


Use CSS to style your cells, or use one
TR ALIGN=CENTER|RIGHT instead of many
TD ALIGN=CENTER|RIGHTs
Use CELLPADDING or CELLSPACING for spacing around
tables rather than a lot of TDs
Graphics Optimization




Minimize the number and size of images in your page
(each one takes a HTTP request)
Combine adjacent graphics to minimize HTTP requests
Maximize reuse to take advantage of caching
Use the height and width tags inside the IMG tag to
determine how much space to allocate for an image.
Graphics Optimization


Resolution for web graphics should not be more than
72dpi
Color depth determines the number of colors present in
the image. The higher the number of colors, the larger
the image size.
Graphics Optimization

JPEG is a highly advanced image format that does a
great job in preserving the quality of an image but also
has a larger file size.


Provide a link to the image which can then be displayed in a new
browser window
Display a thumbnail or smaller version of the image which can
be made clickable + larger image can load in a new browser
window
Optimizing Multimedia Content



Audio: use midi files or small .wav files
Video: since video files can be quite large, it’s best to
provide a link to the file
Flash: to keep Flash files at a minimum size use fewer
fonts, reuse symbols, compress the included sounds etc.
The Webpage Analyzer

A free tool you can use to test the download speed of
your website. It analyzes your site and offers advice on
how to improve the page load time.
http://www.websiteoptimization.com/services/analyze/
Questions??
References





King, Andrew. (n.d.). Extreme HTML Optimization. Retrieved October 28,
2007, from
http://www.webreference.com/authoring/languages/html/optimize/
King, A. (2003). Speed up your site: web site optimization. Berkeley: New
Riders.
Morville, P. & Rosenfeld, L. (2006). Information Architecture for the World
Wide Web. Sebastopol, CA: O’Reilly.
Stimulus Education. (n.d.). Optimizing Webpages. Retrieved October 28,
2007, from http://www.stimulus.com/education/optimizing.html
Web Developers Notes. (n.d.). Optimizing web pages or decreasing web
page file sizes. Retrieved October 28, 2007, from
http://www.webdevelopersnotes.com/design/optimizing_web_pages.php3