Optimizing Web PagesAgendaWebpage Optimization = Web SpeedBalance in Web DesignWhat’s happening when a webpage is loading?How to Optimize Web PagesHTML OptimizationHTML tables = troubleSlide 9Slide 10Graphics OptimizationSlide 12Slide 13Optimizing Multimedia ContentThe Webpage AnalyzerSlide 16ReferencesOptimizing Web PagesSandra Leingruber10/23/2007AgendaWhat does webpage optimization mean?Why is it important?How can you optimize your webpage?The Webpage AnalyzerQuestions?Webpage Optimization = Web SpeedWebpage 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 DesignTradeoff 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.GOOGLEWhat’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 PagesWeb 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 optimizationGraphics optimizationOptimizing multimedia contentHTML OptimizationWYSIWYG 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 sheetsRemove or reduce commentsFor editing purposes designers often use comments indicating where updated information should be placedMinimize the size of the HEAD sectionKeep metatags under 200 characters, use no commas (just spaces)HTML tables = troubleSimplify complex tablesBreak your tables up into separate tablesInstead of one large table, have a simple fast-loading table at the top and subsequent tables underneathBrowsers render tables sequentially, giving the user something to look at quickly first, while the rest of your page loads.HTML tables = troubleFast table renderingWith 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.HTML tables = troubleMinimize attributesUse CSS to style your cells, or use one TR ALIGN=CENTER|RIGHT instead of many TD ALIGN=CENTER|RIGHTsUse CELLPADDING or CELLSPACING for spacing around tables rather than a lot of TDsGraphics OptimizationMinimize the number and size of images in your page (each one takes a HTTP request)Combine adjacent graphics to minimize HTTP requestsMaximize reuse to take advantage of cachingUse the height and width tags inside the IMG tag to determine how much space to allocate for an image.Graphics OptimizationResolution for web graphics should not be more than 72dpiColor depth determines the number of colors present in the image. The higher the number of colors, the larger the image size.Graphics OptimizationJPEG 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 windowDisplay a thumbnail or smaller version of the image which can be made clickable + larger image can load in a new browser windowOptimizing Multimedia ContentAudio: use midi files or small .wav filesVideo: since video files can be quite large, it’s best to provide a link to the fileFlash: to keep Flash files at a minimum size use fewer fonts, reuse symbols, compress the included sounds etc.The Webpage AnalyzerA 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??ReferencesKing, 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
View Full Document
Unlocking...