1 / 17

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.

pelham
Download Presentation

Optimizing Web Pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Optimizing Web Pages Sandra Leingruber 10/23/2007

  2. Agenda • What does webpage optimization mean? • Why is it important? • How can you optimize your webpage? • The Webpage Analyzer • Questions?

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

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

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

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

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

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

  9. 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 table-layout to a "fixed" table layout, you are fixing the column widths (and optionally the column heights) for the entire table.

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

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

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

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

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

  15. 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/

  16. Questions??

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

More Related