![Inline Imagesdata: URL schemedata:[<mediatype>][;base64],<data><IMG ALT=”Red Star”SRC="data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWWlvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBiatt2H1KBLQRFIJAIKywRgmhwAIlEEADs=">not supported in IEavoid increasing size of HTML pages:put inline images in cached stylesheetshttp://tools.ietf.org/html/rfc2397](https://image.slidesharecdn.com/highperformancewebsites-110709022054-phpapp02/85/High-Performance-Websites-53-320.jpg)
![Event Handlerstie behavior to (fewer) specific eventswindow.onresize = setMinWidth;function setMinWidth() {varaElements = document.getElementsByTagName("p"); for ( vari = 0; i < aElements.length; i++ ) {aElements[i].runtimeStyle.width = ( document.body.clientWidth<600 ? "600px" : "auto" ); }}](https://image.slidesharecdn.com/highperformancewebsites-110709022054-phpapp02/85/High-Performance-Websites-69-320.jpg)
![Script Insertion Functions<?phpfunction insertScript($jsfile) { if ( alreadyInserted($jsfile) ) { return; } pushInserted($jsfile); if ( hasDependencies($jsfile) ) { $dependencies = getDependencies($jsfile); for ( $i = 0; $i < count($dependencies); $i++ ) { insertScript($dependencies[$i]); } } echo '<script type="text/javascript" src="' . getVersion($jsfile) . '"></script>";}?>](https://image.slidesharecdn.com/highperformancewebsites-110709022054-phpapp02/85/High-Performance-Websites-83-320.jpg)
![AJAX Example: Yahoo! Mail Betaaddress 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: gzipaddress book changes infrequentlycache it; add last-modified-time in URL](https://image.slidesharecdn.com/highperformancewebsites-110709022054-phpapp02/85/High-Performance-Websites-87-320.jpg)
High Performance Websites
- 1. High Performance Web Sites14 rules for faster-loading pagesParham FazelHooman NorooziniaTosan Tech Talk2011/06
- 2. Introduction
- 3. Exceptional Performancestarted in 2004quantify and improve the performance of all Yahoo! products worldwidecenter of expertisebuild tools, analyze datagather, research, and evangelize best practices
- 4. Scopeperformance breaks into two categoriesresponse timeefficiencycurrent focus is response timeof web products
- 5. Rough Cuts: nowHardcopy: Summer 2007http://www.oreilly.com/catalog/9780596514211/
- 6. Steve Soudersemployer:GoogleHead Performance Engineerblog:http://stevesouders.com/blog/Steve works at Google on web performance and open source initiatives. He previously served as Chief Performance Yahoo!.
- 7. Steve is the author of High Performance Web Sites and Even Faster Web Sites. He is the creator of YSlow, one of the top 25 of 2 billion Firefox add-ons. He's created many other performance tools and services including the HTTP Archive, Cuzillion, Jdrop, ControlJS, and Browserscope. He serves as co-chair of Velocity, the web performance and operations conference from O'Reilly, and is co-founder of the Firebug Working Group. He taught CS193H: High Performance Web Sites at Stanford University.
- 8. The Importance of Front-End Performance
- 9. percentage of time spent on the front-endBack-end vs. Front-end
- 10. The Performance Golden Rule80-90% of the end-user response time is spent on the front-end. Start there.Greater potential for improvement
- 11. Simpler
- 12. Proven to workSchedulePerformance Researchbreak14 RulesbreakCase StudiesLive Analysis
- 14. perceived response timeslowcrawlboringsnailstagnantunexceptionalyawnunresponsiveimpatientdelaymoderateblahsubduedragapatheticprolongslackloadsluggishsleepylateunexcitingreducedlagcomplex heavyunmemorableobscurewhy waitperformance speed enjoyable urgentinstantaccelerateperceptionsnapachievement betterimproveaction pleasantpacequickpromoteswiftcoolmaximumdriveprompt advance fast hurryrushsatisfyingfeelexceptionalbriskrapid excitingwhat is the end user’s experience?
- 15. User PerceptionUsability and perception are important for performance.The user’s perception is more relevant than actual unload-to-onload response time.Definition of "user onload" is undefined or varies from one web page to the next.
- 17. 80/20 Performance RuleVilfredo Pareto: 80% of consequences come from 20% of causesFocus on the 20% that affects 80% of the end-user response time.Start at the front-end.
- 18. 231user re-requests www.yahoo.comuser requests www.yahoo.comuser requests other web pagesEmpty vs. Full Cache
- 19. 231user re-requests www.yahoo.comuser requests www.yahoo.comuser requests other web pagesEmpty vs. Full Cachewith an empty cache
- 20. 231user re-requests www.yahoo.comuser requests www.yahoo.comuser requests other web pagesEmpty vs. Full Cache
- 21. Empty vs. Full Cache21user requests www.yahoo.comuser requests other web pages3user re-requests www.yahoo.comExpires headerwith a full cache
- 22. Empty vs. Full Cache empty cache 2.4 seconds full cache 0.9 seconds83% fewer bytes90% fewer HTTP requests
- 23. How much does this benefit our users?It depends on how many users have components in cache.What percentage of users view a page with an empty cache*? * “Empty cache” means the browser has to request the componentsinstead of pulling them from the browser disk cache.What percentage of page viewsare done with an empty cache*?http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
- 24. }1 pxAdd a new image to your page<img src="image/blank.gif" height="1" width="1"/>with the following response headers:Expires: Thu, 15 Apr 2004 20:00:00 GMTLast-Modified: Wed, 28 Sep 2006 23:49:57 GMTBrowser Cache Experiment
- 25. Browser Cache ExperimentRequests from the browser will have one of these response status codes:200 – The browser does not have the image in its cache.304 – The browser has the image in its cache, but needs to verify the last modified date.
- 26. Browser Cache Experiment}1 px
- 27. Surprising Resultsusers withempty cachepage views withempty cache40-60% ~20%
- 28. Experiment TakeawaysKeep in mind the empty cache user experience. It might be more prevalent than you think!Use different techniques to optimize full versus empty cache experience.
- 30. 1user requests www.yahoo.comHTTP Quick ReviewHTTP response header sent by the web server:HTTP/1.1 200 OKContent-Type: text/html; charset=utf-8Set-Cookie: C=abcdefghijklmnopqrstuvwxyz; domain=.yahoo.com
- 31. 1user requests www.yahoo.comHTTP Quick Review2user requests finance.yahoo.comHTTP request header sent by the browser:GET / HTTP/1.1Host: finance.yahoo.comUser-Agent: Mozilla/4.0 (compatible; MSIE 6.0; …Cookie: C=abcdefghijklmnopqrstuvwxyz;
- 32. 31user requests autos.yahoo.comuser requests www.yahoo.comHTTP Quick ReviewHTTP request header sent by the browser:GET / HTTP/1.1Host: autos.yahoo.comUser-Agent: Mozilla/4.0 (compatible; MSIE 6.0; …Cookie: C=abcdefghijklmnopqrstuvwxyz;
- 33. 41user requests mail.yahoo.comuser requests www.yahoo.comHTTP Quick ReviewHTTP request header sent by the browser:GET / HTTP/1.1Host: mail.yahoo.comUser-Agent: Mozilla/4.0 (compatible; MSIE 6.0; …Cookie: C=abcdefghijklmnopqrstuvwxyz;
- 34. 51user requests tech.yahoo.comuser requests www.yahoo.comHTTP Quick ReviewHTTP request header sent by the browser:GET / HTTP/1.1Host: tech.yahoo.comUser-Agent: Mozilla/4.0 (compatible; MSIE 6.0; …Cookie: C=abcdefghijklmnopqrstuvwxyz;
- 35. Impact of Cookies on Response Timedialup users80 ms delaykeep sizes low
- 37. Analysis of Cookie Sizes across the Web
- 38. Experiment Takeawayseliminate unnecessary cookieskeep cookie sizes lowset cookies at appropriate domain levelset Expires date appropriatelyearlier date or none removes cookie sooner
- 40. Parallel DownloadsGIFGIFGIFGIFGIFGIFTwo componentsin parallelper hostnameHTTP/1.1
- 41. Parallel DownloadsTwo in parallelFour in parallelEight in parallel
- 42. Maximizing Parallel Downloadsresponse time (seconds)aliases
- 43. Maximizing Parallel Downloadsresponse time (seconds)aliases
- 44. Maximizing Parallel Downloadsresponse time (seconds)aliases
- 45. Maximizing Parallel Downloadsresponse time (seconds)rule of thumb: use at least two but no more than four aliases
- 46. Experiment Takeawaysconsider the effects of CPU thrashingDNS lookup times vary across ISPs and geographic locationsdomain names may not be cached
- 47. SummaryWhat the 80/20 Rule Tells Us about Reducing HTTP Requestshttp://yuiblog.com/blog/2007/04/11/performance-research-part-4/Browser Cache Usage – Exposed!http://yuiblog.com/blog/2007/01/04/performance-research-part-2/When the Cookie Crumbleshttp://yuiblog.com/blog/2007/01/04/performance-research-part-2/Maximizing Parallel Downloads in the Carpool Lanehttp://yuiblog.com/blog/2007/04/11/performance-research-part-4/
- 48. 14 Rules
- 49. 14 RulesMake fewer HTTP requestsUse a CDNAdd an Expires headerGzip componentsPut CSS at the topMove JS to the bottomAvoid CSS expressionsMake JS and CSS externalReduce DNS lookupsMinify JSAvoid redirectsRemove duplicate scriptsTurn off ETagsMake AJAX cacheable and small
- 50. Rule 1: Make fewer HTTP requestsimage mapsCSS spritesinline imagescombined scripts, combined stylesheets
- 51. Image mapsserver-side<a href="navbar.cgi"><img ismap src="imagemap.gif"></a>-> http://.../navbar.cgi?127,13client-side – preferred<img usemap="#map1" border=0 src="/images/imagemap.gif"><map name="map1"> <area shape="rect" coords="0,0,31,31" href="home.html" title="Home"> …</map>drawbacks:must be contiguousdefining area coordinates – tedious, errorshttp://www.w3.org/TR/html401/struct/objects.html#h-13.6
- 52. CSS Sprites – Preferred<span style=" background-image: url('sprites.gif'); background-position: -260px -90px;"></span>size of combined image is lessnot supported in Opera 6http://alistapart.com/articles/sprites
- 53. Inline Imagesdata: URL schemedata:[<mediatype>][;base64],<data><IMG ALT=”Red Star”SRC="data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWWlvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBiatt2H1KBLQRFIJAIKywRgmhwAIlEEADs=">not supported in IEavoid increasing size of HTML pages:put inline images in cached stylesheetshttp://tools.ietf.org/html/rfc2397
- 54. Combined Scripts, Combined Stylesheets
- 55. Combined Scripts,Combined Stylesheetscombining six scripts into one eliminates five HTTP requestschallenges: develop as separate modulesnumber of possible combinations vs. loading more than neededmaximize browser cacheone solution:dynamically combine and cache
- 56. Rule 2: Use a CDNdistribute your static content before distributing your dynamic content
- 57. Rule 3: Add an Expires header not just for images
- 58. Rule 4: Gzip components you can affect users' download times90%+ of browsers support compression
- 59. Gzip compresses moreGzip supported in more browsersGzip vs. Deflate
- 60. Gzip: not just for HTMLgzip scripts, stylesheets, XML, JSON (not images, PDF)
- 61. Gzip Configuration Apache 2.x: mod_deflateAddOutputFilterByType DEFLATE text/html text/css application/x-javascriptHTTP requestAccept-Encoding: gzip, deflateHTTP responseContent-Encoding: gzipVary: Accept-Encodingneeded for proxies
- 62. Gzip Edge Cases <1% of browsers have problems with gzipIE 5.5: http://support.microsoft.com/default.aspx?scid=kb;en-us;Q313712IE 6.0: http://support.microsoft.com/default.aspx?scid=kb;en-us;Q31249Netscape 3.x, 4.x http://www.schroepl.net/projekte/mod_gzip/browser.htmconsider adding Cache-Control: Privateremove ETags (Rule 13)hard to diagnose; problem getting smaller
- 63. Rule 5: Put CSS at the top stylesheets block rendering in IEhttp://stevesouders.com/examples/css-bottom.phpsolution: put stylesheets in HEAD (per spec)avoids Flash of Unstyled Contentuse LINK (not @import)
- 65. Rule 6: Move scripts to the bottom scripts block parallel downloads across all hostnamesscripts block rendering of everything below them in the pageIE and FFhttp://stevesouders.com/examples/js-middle.php
- 66. Rule 6: Move scripts to the bottom script defer attribute is not a solutionblocks rendering and downloads in FFslight blocking in IEsolution: move them as low in the page as possible
- 67. Rule 7: Avoid CSS expressions used to set CSS properties dynamically in IEwidth: expression( document.body.clientWidth < 600 ? “600px” : “auto” );problem: expressions execute many timesmouse move, key press, resize, scroll, etc.http://stevesouders.com/examples/expression-counter.php
- 68. One-Time Expressionsexpression overwrites itself<style>P { background-color: expression(altBgcolor(this));}</style><script>function altBgcolor(elem) { elem.style.backgroundColor = (new Date()).getHours()%2 ? "#F08A00" : "#B8D4FF";}</script>
- 69. Event Handlerstie behavior to (fewer) specific eventswindow.onresize = setMinWidth;function setMinWidth() {varaElements = document.getElementsByTagName("p"); for ( vari = 0; i < aElements.length; i++ ) {aElements[i].runtimeStyle.width = ( document.body.clientWidth<600 ? "600px" : "auto" ); }}
- 70. Rule 8: Make JS and CSS external inline: HTML document is biggerexternal: more HTTP requests, but cachedvariablespage views per user (per session)empty vs. full cache statscomponent re-useexternal is typically betterhome pages may be an exception
- 71. Post-Onload Downloadinline in front pagedownload external files after onloadwindow.onload = downloadComponents;function downloadComponents() { var elem = document.createElement("script"); elem.src = "http://.../file1.js"; document.body.appendChild(elem); ...}speeds up secondary pages
- 72. Dynamic Inliningstart with post-onload downloadset cookie after components downloadedserver-side: if cookie, use externalelse, do inline with post-onload downloadcookie expiration date is keyspeeds up all pages
- 73. Rule 9: Reduce DNS lookups typically 20-120 msblock parallel downloadsOS and browser both have DNS caches
- 74. TTL (Time To Live)TTL – how long record can be cachedbrowser settings override TTL
- 75. Browser DNS CacheIEDnsCacheTimeout: 30 minutesKeepAliveTimeout: 1 minuteServerInfoTimeout: 2 minutesFirefoxnetwork.dnsCacheExpiration: 1 minutenetwork.dnsCacheEntries: 20network.http.keep-alive.timeout: 5 minutesFasterfox: 1 hour, 512 entries, 30 seconds
- 76. Reducing DNS Lookupsfewer hostnames – 2-4keep-alive
- 77. Rule 10: Minify JavaScriptminify inline scripts, too
- 78. Minify vs. Obfuscateminify – it's saferhttp://crockford.com/javascript/jsminhttp://dojotoolkit.org/docs/shrinksafe
- 79. Rule 11: Avoid redirects3xx status codes – mostly 301 and 302HTTP/1.1 301 Moved PermanentlyLocation: http://stevesouders.com/newuriadd Expires headers to cache redirectsworst form of blockinghttp://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
- 80. Redirects
- 81. Avoid Redirectsmissing trailing slashhttp://astrology.yahoo.com/astrologyuse Alias or DirectorySlashmod_rewriteCNAMEslog referer – track internal linksoutbound links – harderbeacons – beware of race conditionXHR – bail at readyState 2
- 82. Rule 12: Remove duplicate scriptshurts performanceextra HTTP requests (IE only)extra executionsatypical?2 of 10 top sites contain duplicate scriptsteam size, # of scripts
- 83. Script Insertion Functions<?phpfunction insertScript($jsfile) { if ( alreadyInserted($jsfile) ) { return; } pushInserted($jsfile); if ( hasDependencies($jsfile) ) { $dependencies = getDependencies($jsfile); for ( $i = 0; $i < count($dependencies); $i++ ) { insertScript($dependencies[$i]); } } echo '<script type="text/javascript" src="' . getVersion($jsfile) . '"></script>";}?>
- 84. Rule 13: Turn off ETagsunique identifier returned in responseETag: "c8897e-aee-4165acf0"Last-Modified: Thu, 07 Oct 2004 20:54:08 GMTused in conditional GET requestsIf-None-Match: "c8897e-aee-4165acf0"If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMTif ETag doesn't match, can't send 304
- 85. The Problem with ETagsETag for a single entity is always different across serversETag formatApache: inode-size-timestampIIS: Filetimestamp:ChangeNumberSites with >1 server return too few 304s(n-1)/nRemove themApache: FileETag noneIIS: http://support.microsoft.com/kb/922703/
- 86. Rule 14: Make AJAX cacheable and smallXHR, JSON, iframe, dynamic scripts can still be cached, minified, and gzippeda personalized response should still be cacheable by that person
- 87. AJAX Example: Yahoo! Mail Betaaddress 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: gzipaddress book changes infrequentlycache it; add last-modified-time in URL
- 88. Live Analysis
- 89. IBM Page Detailerpacket snifferWindows onlyIE, FF, any .exec:\windows\wd_WS2s.iniExecutable=(NETSCAPE.EXE),(NETSCP6.EXE),(firefox.exe)free trial, $300 licensehttp://alphaworks.ibm.com/tech/pagedetailer
- 91. Fasterfoxmeasures load time of pagesalters config settings for faster loadingFirefox extensionfreehttp://fasterfox.mozdev.org/
- 92. LiveHTTPHeadersview HTTP headersFirefox extensionfreehttp://livehttpheaders.mozdev.org/
- 93. Firebugweb development evolvedinspect and edit HTMLtweak and visualize CSSdebug and profile JavaScriptmonitor network activity (caveat)Firefox extensionfreehttp://getfirebug.com/
- 95. YSlowperformance lint toolgrades web pages for each ruleFirefox extensionYahoo! internal tool
- 97. Conclusion
- 98. Takeawaysfocus on the front-endharvest the low-hanging fruityou do control user response timesLOFNO – be an advocate for your users
- 99. Linksbook: http://www.oreilly.com/catalog/9780596514211/examples: http://stevesouders.com/examples/image maps: http://www.w3.org/TR/html401/struct/objects.html#h-13.6CSS sprites: http://alistapart.com/articles/spritesinline images: http://tools.ietf.org/html/rfc2397jsmin: http://crockford.com/javascript/jsmindojo compressor: http://dojotoolkit.org/docs/shrinksafeHTTP status codes: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.htmlIBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailerFasterfox: http://fasterfox.mozdev.org/LiveHTTPHeaders: http://livehttpheaders.mozdev.org/Firebug: http://getfirebug.com/YUIBlog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/http://yuiblog.com/blog/2007/01/04/performance-research-part-2/http://yuiblog.com/blog/2007/03/01/performance-research-part-3/http://yuiblog.com/blog/2007/04/11/performance-research-part-4/YDN: http://developer.yahoo.net/blog/archives/2007/03/high_performanc.htmlhttp://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html