1 / 76

High Performance Web Pages Stoyan Stefanov Yahoo! Exceptional Performance

High Performance Web Pages Stoyan Stefanov Yahoo! Exceptional Performance http://developer.yahoo.com/performance PHP Quebec, March 13, 2008. The sluggish Web. We’re getting used to the web as a tool for our day-to-day tasks We all want a nice user experience

idana
Download Presentation

High Performance Web Pages Stoyan Stefanov Yahoo! Exceptional Performance

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. High Performance Web Pages Stoyan Stefanov Yahoo! Exceptional Performance http://developer.yahoo.com/performance PHP Quebec, March 13, 2008

  2. The sluggish Web • We’re getting used to the web as a tool for our day-to-day tasks • We all want a nice user experience • We won’t tolerate slow pages (we have options) • 500 ms slower = 20% drop in traffic (Google) • 100 ms slower = 1% drop in sales (Amazon)

  3. This talk • How to improve page performance • Focus on the front-end • 14 best practices for faster pages • … and 20 more!

  4. Exceptional Performance at Yahoo! • Quantify and improve the performance of all Yahoo! products worldwide • Center of expertise • Build tools, analyze data • Gather, research, and evangelize best practices - internally and externally

  5. The Importance of Front-End Performance Back-end=5% Front-end=95% Even here, front-end=88%

  6. Focus on the front-end • 80-90% of the time • Easier than the back-end • Proven to work

  7. List of 14 best practices (updated) • Make Fewer HTTP Requests • Use a Content Delivery Network • Add Expires header (or Cache-control) • Gzip Components • Put CSS at the Top • Move Scripts to the Bottom (inline too) • Avoid CSS Expressions • Make JavaScript and CSS External • Reduce DNS Lookups • Minify JavaScript and CSS (inline too) • Avoid Redirects • Remove Duplicate Scripts • Configure ETags • Make AJAX Cacheable content server server server css javascript css css javascript content css javascript content javascript server content http://developer.yahoo.com/performance/rules.html

  8. YSlow • Yahoo!’s performance lint tool • Extension to the Firebug extension to Firefox • Checks for compliance with the best practices • Grades (offends) http://developer.yahoo.com/yslow/

  9. The Life of Page 2.0 event handlers, components, XHRs fetching components backend user interaction, XHRs request page settles HTML sent request onload R.I.P. marriage? graduation birth conception fetus child teen adult User perceived “onload” happens somewhere here

  10. After YSlow "A"? server • Flush the buffer early • Use GET for AJAX requests • Post-load components • Preload components • Reduce the number of DOM elements • Split components across domains • Minimize the number of iframes • No 404s • Reduce cookie size • Use cookie-free domains for components • Minimize DOM access • Develop smart event handlers • Choose <link> over @import • Avoid filters • Optimize images • Optimize CSS sprites • Don't scale images in HTML • Make favicon.ico small and cacheable • Keep components under 25K • Pack components into a multipart document server content content content content content content cookie cookie javascript javascript css css images images images images mobile mobile

  11. Part IReview of 14 best practices (updated)

  12. Make Fewer HTTP Requests • Less components = fast page • HTTP Request overhead • Combine scripts, combine stylesheets, combine images into CSS sprites

  13. CSS Sprites One request instead of ten! background-position: -0px -0px; background-position: -20px -0px; background-position: -40px -0px; background-position: -60px -0px; background-position: -80px -0px; background-position: -100px -0px; background-position: -120px -0px; background-position: -140px -0px; background-position: -160px -0px; background-position: -180px -0px; Tools: http://www.csssprites.com http://spritegen.website-performance.org/

  14. Use a Content Delivery Network • For static components • Content closer to your users • Akamai, Amazon S3

  15. Add Expires header (or Cache-control) • For static components • “Never expire” policy, far future Expires header • Once a component is served, the browser never asks for it again • When you need to change a component, rename it • Apache example: ExpiresActive On ExpiresDefault "modification plus 10 years" • For dynamic components • Use Cache-control • Help the browser send If-Modified-Since • Writeup on YUI blog/YDN coming up, stay tuned

  16. Gzip Components • You send zipped content over the wire, the browser unpacks it • Modern browsers understand compressed content • Search engine spiders do too • Request header Accept-Encoding: gzip,deflate • Response header Content-Encoding: gzip • All text components should be sent gzipped: html (php), js, css, xml, txt…

  17. Put CSS at the Top • Firefox and IE will not render anything before the last piece of CSS arrives over the wire • Even CSS that is not needed such as @media print • Place the stylesheets as early as possible in the document <head> <title>My page</title> <link href=“styles.css” …/> </head> <body> <!-- content -->

  18. Move Scripts to the Bottom (inline too) • Scripts block downloads • The browser’s logic: since this script can do location.href or document.write at any time, why download possibly useless components • Move scripts to the bottom to remove the download block • Inline scripts too <!-- content --> <script src=“script.js” …/> </body> </html>

  19. Avoid CSS Expressions • CSS expression: #content { position: absolute; left: expression(document.body.offsetWidth+‘px’); } • IE-only way to have JavaScript in CSS • They tend to get executed more often than you planned, think onmousemove often • Smart expressions overwrite themselves

  20. Make JavaScript and CSS External • Helps with caching, “never expire” policy • Share with other pages • But this is two more HTTP requests • Homepages might consider inlining • yahoo.com

  21. Reduce DNS Lookups • Browser needs to map domain name to an IP address • DNS lookups take time • 2-4 domains per page

  22. Minify JavaScript and CSS (inline too) • Minify, but still gzip • JSMin (written in JavaScript, but has a PHP port) • YUI compressor – minifies CSS too • Inline styles and scripts should also be minified

  23. Minify: before /** * The dom module provides helper methods for * manipulating Dom elements. * @module dom * */ (function() { var Y = YAHOO.util, // internal shorthand getStyle, // for load time browser branching setStyle, // ditto propertyCache = {}, // for faster hyphen converts reClassNameCache = {}, // cache regexes for className document = window.document; // cache for faster lookups YAHOO.env._id_counter = YAHOO.env._id_counter || 0;

  24. Minify: after (function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.env._id_counter||0;

  25. Avoid Redirects • A wasted HTTP request • Causes a restart

  26. Remove Duplicate Scripts • Duh! • IE might decide to download them again

  27. Configure ETags • ETags are meant to help with caching • A component served from server A has a different ETag than the same component served from B • Configure ETags not to include inode • … or just remove them and implement “never expire” policy Apache default FileETag INode MTime Size Change to FileETag None

  28. Make AJAX Cacheable • Content returned from XMLHttpRequests is like any other component • Should be gzipped • Could be cached • Cache-control: max-age=?

  29. Part IIAfter YSlow “A”:20 more best practices

  30. Part IItag: servertag: contenttag: cookietag:javascripttag:csstag:imagestag:mobile

  31. Flush the buffer early • Let the browser start fetching components while your backend is busy • PHP has the function flush() • Best for busy backends / light frontends ... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content --> • Case Study: Yahoo! Search

  32. Use GET for AJAX requests • GET is for retrieving data • POST is a two-step process (send headers, send data) • GET request is one TCP packet (unless you have a lot of cookies) • Max URL length 2K (because of IE) • POST without actually posting data is like GET • Yahoo! Mail Research

  33. Part IItag: servertag: contenttag: cookietag:javascripttag:csstag:imagestag:mobile

  34. Post-load components • Ask yourself: what's absolutely required in order to render the page initially? • The rest can wait (drag and drop, animations, hidden content, images below the fold) • JavaScript is ideal candidate for splitting • YUI Image Loader • YUI Get Utility

  35. Post-load components • Case study: yahoo.com • onload.js and onload.css • Progressive enhancement

  36. Preload components Preload • Items you'll need in the future • Unconditional preload (google.com loads a sprite onload) • Conditional preload (search.yahoo.com after you type in the input box) • Anticipated preload – preload in advance before launching a redesign

  37. Preload components (contd.) • Unconditional preload example

  38. Preload components (contd.) • Conditional preload example – search.yahoo.com • When you start typing the page can safely assume you’ll hit the search results page • Time to preload

  39. Reduce the number of DOM elements • World's fastest page? about:blank! • A complex page means more bytes to download • It also means slower DOM access in JavaScript • It also may mean using semantically incorrect markup (like nested tables or abusing <div>s) • Use semantic markup • Use YUI's reset.css, fonts.css, grids.css • Easy to test, just type in Firebug’s console: document.getElementsByTagName('*').length • yahoo.com is a busy page and still under 700 elements (HTML tags)

  40. Split components across domains • Maximize parallel downloads • But not more than 2-4 domains, because of the DNS lookup penalty • www.example.org – HTML content • static.example.org – Static components • Future: IE8 will allow 6 requests per domain

  41. Split components (contd.) 2 components in parallel 8 components in parallel

  42. Minimize the number of iframes • <iframe> pros: • Can help with slow third-party content like badges and ads • Security sandbox • You can download scripts in parallel • <iframe> cons: • They have a cost even if blank • They block page onload • Non-semantic

  43. No 404s • 404 Not Found • Useless downloads • Some sites have helpful 404s “Did you mean X?”… • … which uses server resources (DB, etc) • When an external JavaScript is a 404, the browser will still try to parse it and find something usable in it

  44. No 404s (contd.) The second component is a 404 JavaScript and it blocks the rest of the page

  45. Part IItag: servertag: contenttag: cookietag:javascripttag:csstag:imagestag:mobile

  46. Reduce cookie size • Eliminate unnecessary cookies • Keep cookie sizes as low as possible to minimize the impact on the user response time • Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected • Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time

  47. Cookie-free hosting for components • Option 1: Separate subdomain (static.example.org) • Option 2: A new TLD (e.g. yimg.com, ytimg.com, images-amazon.com) • Proxies might refuse to cache • www.www-yes.org vs www-no.org? • no-www leaves you no choice but to write cookies to *.example.org

  48. Part IItag: servertag: contenttag: cookietag:javascripttag:csstag:imagestag:mobile

More Related