1 / 61

High Performance Web Sites 14 rules for faster pages

High Performance Web Sites 14 rules for faster pages. Steve Souders Chief Performance Yahoo! souders@yahoo-inc.com. Exceptional Performance. quantify and improve the performance of all Yahoo! products worldwide center of expertise build tools, analyze data

judd
Télécharger la présentation

High Performance Web Sites 14 rules for faster 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. High Performance Web Sites14 rules for faster pages Steve Souders Chief Performance Yahoo! souders@yahoo-inc.com

  2. Exceptional Performance • quantify and improve the performance of all Yahoo! products worldwide • center of expertise • build tools, analyze data • gather, research, and evangelize best practices

  3. Scope • performance breaks into two categories • response time • efficiency • current focus is response time • of web products • coming up next: mobile, backend

  4. The Importance of Frontend Performance Backend = 5% Frontend = 95% Even primed cache, frontend = 88%

  5. Time Spent on the Frontend

  6. The Performance Golden Rule • 80-90% of the end-user response time is spent on the frontend. Start there. • Greater potential for improvement • Simpler • Proven to work

  7. Agenda • Performance Research • 14 Rules (plus more) • Case Studies • Evangelism • Live Analysis

  8. Performance Research

  9. # users with at least one 200 response • total # unique users • Percentage of users with an empty cache? • Percentage of page views with an empty cache? • # of 200 responses • total # responses Browser Cache Experiment • Add an image to the page: • Expires: Thu, 15 Apr 2004 20:00:00 GMT • Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT

  10. users withempty cache page views withempty cache Browser Cache Expt Results 40-60% ~20%

  11. Experiment Takeaways • The empty cache user experience is more prevalent than you think! • Optimize for both primed cache and empty cache experience.

  12. dialup users 80 ms delay keep sizes low Impact of Cookies on Response Time

  13. Experiment Takeaways • eliminate unnecessary cookies • keep cookie sizes low • set cookies at appropriate domain level • set Expires date appropriately • earlier date or none removes cookie sooner

  14. Parallel Downloads • Two in parallel • Four in parallel • Eight in parallel

  15. Maximizing Parallel Downloads response time (seconds) aliases

  16. Maximizing Parallel Downloads response time (seconds) aliases rule of thumb: use at least two but no more than four aliases

  17. Experiment Takeaways • consider the effects of CPU thrashing • DNS lookup times vary across ISPs and geographic locations • domain names may not be cached

  18. 14 Rules

  19. 14 Rules • Make fewer HTTP requests • Use a CDN • Add an Expires header • Gzip components • Put stylesheets at the top • Move scripts to the bottom • Avoid CSS expressions • Make JS and CSS external • Reduce DNS lookups • Minify JS • Avoid redirects • Remove duplicate scripts • Configure ETags • Make AJAX cacheable

  20. Rule 1: Make fewer HTTP requests • CSS sprites • combined scripts, combined stylesheets • preloading • image maps • inline images

  21. CSS Sprites • size of combined image is less <span style=" background-image: url('sprites.gif'); background-position: -260px -90px;"> </span> http://alistapart.com/articles/sprites

  22. Combined Scripts, Combined Stylesheets

  23. Combined Scripts,Combined Stylesheets • combining six scripts into one eliminates five HTTP requests • challenges: • develop as separate modules • number of possible combinations vs. loading more than needed • maximize browser cache • one solution: • dynamically combine and cache

  24. Preloading • Download resources for the next page after the current page is done loading. • Examples: • http://www.google.com • http://search.yahoo.com

  25. Rule 2: Use a CDN • distribute your static content before distributing your dynamic content

  26. Rule 2: Use a CDN • Adding your CDN(s) to YSlow • Go to about:config • Right-click in the window and choose New and String to create a new string preference. • Enter extensions.firebug.yslow.cdnHostnames for the preference name. • For the string value, enter the hostname of your CDN, for example, mycdn.com. • Do not use quotes. If you have multiple CDN hostnames, separate them with commas.

  27. Rule 3: Add an Expires header • not just for images

  28. Rule 4: Gzip components • you can affect users' download times • 90%+ of browsers support compression

  29. Gzip: not just for HTML • gzip scripts, stylesheets, XML, JSON (not images, PDF)

  30. Rule 5: Put stylesheets at the top • stylesheets block rendering in IE • solution: put stylesheets in HEAD (per spec) • avoids Flash of Unstyled Content • use LINK (not @import)

  31. Rule 6: Move scripts to the bottom • scripts block parallel downloads across all hostnames • scripts block rendering of everything below them in the page • script defer attribute is not a solution • blocks rendering and downloads in FF • slight blocking in IE

  32. Rule 7: Avoid CSS expressions • used to set CSS properties dynamically in IE width: expression( document.body.clientWidth < 600 ? “600px” : “auto” ); • problem: expressions execute many times • mouse move, key press, resize, scroll, etc. • alternatives: • one-time expressions • event handlers

  33. Rule 8: Make JS and CSS external • inline: HTML document is bigger • external: more HTTP requests, but cached • variables • page views per user (per session) • empty vs. primed cache stats • component re-use • external is typically better • extra credit: post-onload download, dynamic inlining

  34. Post-Onload Download • inline in front page • download external files after onload window.onload = downloadComponents; function downloadComponents() { var elem = document.createElement("script"); elem.src = "http://.../file1.js"; document.body.appendChild(elem); ... } • speeds up secondary pages

  35. Dynamic Inlining • start with post-onload download • set cookie after components downloaded • server-side: • if cookie, use external • else, do inline with post-onload download • cookie expiration date is key • speeds up all pages

  36. Rule 9: Reduce DNS lookups • typically 20-120 ms • block parallel downloads • OS and browser both have DNS caches

  37. Adding DNS Lookups • Increasing parallel downloads is worth an extra DNS lookup.

  38. Rule 10: Minify JavaScript • minify inline scripts, too

  39. Rule 11: Avoid redirects • 3xx status codes – mostly 301 and 302 HTTP/1.1 301 Moved Permanently Location: http://stevesouders.com/newuri • add Expires headers to cache redirects • worst form of blocking

  40. Rule 12: Remove duplicate scripts • hurts performance • extra HTTP requests (IE only) • extra executions • atypical? • 2 of 10 top sites contain duplicate scripts • team size, # of scripts

  41. Rule 13: Configure ETags • unique identifier returned in response ETag: "c8897e-aee-4165acf0" Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT • used in conditional GET requests If-None-Match: "c8897e-aee-4165acf0" If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT • if ETag doesn't match, can't send 304 • ETag format • Apache: inode-size-timestamp • IIS: Filetimestamp:ChangeNumber • Use 'em or lose 'em • Apache: FileETag none • IIS: http://support.microsoft.com/kb/922703/

  42. Rule 14: Make AJAX cacheable • XHR, JSON, iframe, dynamic scripts can still be cached (and minified, and gzipped) • a personalized response should still be cacheable for that person

  43. AJAX Example: Yahoo! Mail Beta • address book XML request → GET /yab/[...]&r=0.5289571053069156 HTTP/1.1 Host: us.xxx.mail.yahoo.com ← HTTP/1.1 200 OK Date: Thu, 12 Apr 2007 19:39:09 GMT Cache-Control: private,max-age=0 Last-Modified: Sat, 31 Mar 2007 01:17:17 GMT Content-Type: text/xml; charset=utf-8 Content-Encoding: gzip • address book changes infrequently • cache it; add last-modified-time in URL

  44. Next Rules • Split static content across multiple domains • Reduce the size of cookies • Host static content on a different domain • Minify CSS • Avoid IFrames

  45. Case Studies

  46. 40-50% Case Study: • move JS to onload • remove bottom tabs • avoid redirects • image sprites • host JS on CDN • combine JS files

  47. What about performance and Web 2.0 apps? • client-side CPU is more of an issue • user expectations are higher • these rules still apply, new rules will come out • start off on the right foot

  48. Case Study: Mail Classic Mail • User Workflow • mail.yahoo.com • view inbox folder • read messages (x3) • compose message • confirm send • total time: • Time • 2.40 s • 4.98 s • 6.39 s • 2.21 s • 2.10 s • 18.08 s • Time • 12.48 s • 1.52 s • 1.53 s • 0.34 s • 0s • 15.87 s • Delta • +420% • -70% • -76% • -85% • -100% • -12%

  49. Evangelism

  50. Evangelism • Book High Performance Web Sites • Conferences Yahoo! F2E Summit Web 2.0 Expo Rich Web Experience • Blogs YUI Blog:http://yuiblog.com/blog/category/performance YDN Blog:http://developer.yahoo.com/performance/ • Open Source YSlow OSCon Ajax Experience Blogher Future of Web Apps

More Related