Transcript Document
Web Performance Best Practices Fast Sites for a Global Audience San Mateo Meetup, December 5, 2013 ©2013 AKAMAI | FASTER FORWARDTM Welcome! Introduction • Who We Are • Why Performance Matters Web Performance Best Practices • Measured vs Perceived Performance • Well-known Best Practices • Using a CDN – Practical Considerations Some Real-World Use Cases ©2013 AKAMAI | FASTER FORWARDTM Who We Are Javier Garza David Bartosh Enterprise Architect [email protected] Enterprise Architect [email protected] ©2013 AKAMAI | FASTER FORWARDTM Why Web Site Performance Matters Gomez • For e-commerce, conversion rate increases 74% when page load time decreases from 8 to 2 seconds.* Computer and Equation Research • 71% of mobile web users expect website performance on their mobile phones to be equal to, or better than, what they experience on their desktops -- up from 58% in 2009.* Google • Is incorporating page performance data in its ranking.** * Source http://newsletter.sli-systems.com/2012/04 ** Source http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html ©2013 AKAMAI | FASTER FORWARDTM But Web Site Complexity is Always Increasing Our applications are complex, and growing… Source: Ilya Grigorik ©2013 AKAMAI | FASTER FORWARDTM Measured vs. Perceived Performance ©2013 AKAMAI | FASTER FORWARDTM Quick Review of Browser Behaviors The One Rule: Anything that introduces uncertainty into how the page should be rendered will block rendering until it's resolved. Javascript CSS Long load times ©2013 AKAMAI | FASTER FORWARDTM Measured Performance: Definition Performance is typically measured by the elapsed time between the “navigationStart” event (after the browser has unloaded the current document) and the start of the "onload" event (“loadEventStart”) for the new page, after all resources (HTML, images, CSS, JavaScript) have been downloaded. Source: W3C ©2013 AKAMAI | FASTER FORWARDTM Measured Performance: Standard Optimizations • Use compression, consolidate and minimize (minify) text files (CSS, HTML, JavaScript) • Use sprites for small images • Only include resources the page actually requires • Minimize header payloads, for example, by using different domains for static objects to avoid unnecessary client cookies ©2013 AKAMAI | FASTER FORWARDTM Measured Performance: Standard Optimizations • Use resource inlining and domain sharding (use shards with caution on mobile-centric or responsive sites) • Maintain persistent connections (HTTP keep-alive) • Now make it global… Leverage a Content Distribution Network (CDN) for static object caching close to users, for route optimization, and for additional content acceleration techniques (object/page prefetching, advanced failover, etc.) ©2013 AKAMAI | FASTER FORWARDTM Perceived Performance: What is it? • No browser-independent, agreed upon metric as of yet. • Loosely defined as either when all elements in viewing area have been painted or when user sees enough information to interact with the site. • WebPageTest.org uses the % of viewport paint completion as a metric. • There is usually a strong correlation between “measured” and “perceived” performance. • If care is not given to perceived performance, user experience can be negatively impacted, even if real performance metrics are positive. ©2013 AKAMAI | FASTER FORWARDTM Perceived Performance: Standard Optimizations • Maximize downstream Time-to-Live (TTL) – browser cache can’t be purged, so make static object filenames unique (fingerprinting) and use an “infinite” TTL. • Make JavaScript asynchronous, remove from HTML <head>, and avoid DOM modification via script wherever possible. • Reduce the number of domains used (especially third party domains). • Optimize images by reducing quality and using progressive rendering, and use “lazy-loading” for content below the fold. • Continually evaluate cookie collection/size and usage. ©2013 AKAMAI | FASTER FORWARDTM When Measured and Perceived Meet… 3.044s 7.066s Waterfall without Front-End Optimizations Waterfall with Front-End Optimizations 56.9% Faster ©2013 AKAMAI | FASTER FORWARDTM When Measured and Perceived Meet… ©2013 AKAMAI | FASTER FORWARDTM Well-Known Best Practices (Thank you, Steve Souders!) ©2013 AKAMAI | FASTER FORWARDTM Well-known Best Practices • Optimizing caching — keeping your application's data and logic off the network altogether End End User User #1 #1 Browser Browser Cache Cache Cache-Control: private, no-store ISP #1 Proxy Origin Origin Server Server CDN Server ISP #2 Proxy End End User User #2 #2 Browser Browser Cache Cache Cache-Control: public Expires: Fri, 06 Dec 2013 00:00:00 GMT Cache-Control: public, max-age=31536000 Last-Modified: Tue, 05 Nov 2013 23:33:50 GMT Cache-Control: public Expires: Fri, 06 Dec 2014 00:00:00 GMT /style-Bb752799d39de9dc7c186802ea1eaf84.css /logo-E8f51d6221bcc66b381c3b72619bce70.jpg /notify-40d68a1163b9870406ba588709f1507f.js As listed on: https://developers.google.com/speed/docs/best-practices/rules_intro ©2013 AKAMAI | FASTER FORWARDTM Akamai FEO automation can create fingerprinted filenames automatically for your static content, both in browser cache and HTML5 local storage. Well-known Best Practices • Minimizing round-trip times — reducing the number of serial request-response cycles Number of Domains static4.domain.com static1.domain.com static7.domain.com static8.domain.com static3.domain.com static6.domain.com static4.domain.com static2.domain.com Order of Styles and Scripts** Akamai “System Scripts” take content inlined into the initial HTML request and writes individual objects to HTML5 Local Storage, and on subsequent requests, the returned HTML will refer to the files in Local Storage (not inlined any more). Number of Requests (Combining Images, CSS + JS)* Prefer Asynchronous Resources*** * http://www.yourinspirationweb.com/en/how-to-increase-the-performance-of-a-website-with-css-sprites/ ** https://developers.google.com/speed/docs/best-practices/rules_intro *** https://www.daycounts.com/shop/plugins/javascript-async-defer-detail ©2013 AKAMAI | FASTER FORWARDTM Well-known Best Practices • Minimizing request overhead — reducing upload size My Windows Live ID Cookie: Cookie: wlp=A|9a0z-t:a*+1g6CQ._:h*lrY/CQ.Color_Blue; MUID=3FBEECBBE1D462AD1F5CE989E2D46209; skyjsTabId=1; skyjsTabActive=1; s_vsn_skyperendezvous-ol=4603398481849; wla42=; mbox=PC#1385500405328-646453.19_29#1387247853|check#true#1386038313|session#1386038252124-984802#1386040113; wlidperf=throughput=1&latency=3182&FR=L&ST=1386038256477; PPLState=1; MSPAuth=2F0Y29nBUFxm7S9ASH3z2lLAth15kHwIwL1KyC4yK046ahVQwZDYQbJBeV!cg2qbSxQdTe1EE4GRfagxkWSBMpyngFmo3HpzZPuBJupcgtw3pDPzBL74CDo!rKNwBAc69C; MSPProf=2P3tLXVLvD5PVHLGWbCJkyyz2zUlu3ArRRE!IATPEx6Lj0r*Rlk1M4nbsRK4nBWLj!OxvgmcXA1dSlpaqdNSl0owO4pf82cyoyvPFXHdPOKTj3qlPTloZ!o2AqTrgbXHXSGBpQpbXC4Ly8AB2qpig8NjC1pLhoia5 ozL0AOBCf2SwTgL6lZsBuXw8dw!0svabs; MH=MSFT; NAP=V=1.9&E=e82&C=huQrfRMnexbMCcpHS0BySjtbjvEyN1GuaLdH0Kh6Cee6lRbLiO-vFw&W=1; ANON=A=3E85CA0A4818AE1ED161F41CFFFFFFFF&E=edc&W=1; WLSSC=EgBoAQMAAAAEgAAAC4AAzvFu5rZSyzMqMXKWSXmyWGn9ZCGR5falZIwVi2xH/Q3xVyRFyEP4y6WtH4FG+z3B2UdZO2RMq3VXs/RBt30W2lRO4tReO8U9/WrpMc1jiFsZ+BvN049A8A5MNrS5ZwI/Nolei8 lac+0fVOXApuAj0ZThAzo/lkHi3bCqo+QiDVDXAGAA1wCnGwEAhF0vTPBDnVLwQ51SECcAAAoQoAAwFQBkYmFydG9zaEBob3RtYWlsLmNvbQBQAAAUZGJhcnRvc2hAaG90bWFpbC5jb20AAAAwVVMABTk4MTI 2AACMAQQJAgAAY6lNQBAUQwAFRGF2aWQAB0JhcnRvc2gEXwABVwAAAAAAAAAAAADo3uAljZVmMQAA8EOdUvC4r1IAAAAAAAAAAAAAAAANADIzLjc5LjIzMS4xNAAFAAAAAAAAAAAAAAAAAAEAAAEAA AEAAAEAAAAAAAAAAAAA; KVC=17.1.7118.6000; mt=01_92dabd989a36d9368a0e72467d6753cdca3acb4d8a9cd64efdfc8115d43f7526|fc178b0adc439c31; xid=9d3b00b0-d585-45f1-b738fa8c9a3439ee&kN00L&BLU171-W139&387; xidseq=1; mkt=en-US; upcb=0; crms=0TT; E=P:Os7JxOe90Ig=:8GE3Qx3nk8d4RNR/cT7kfHiXHC4ln+WgWmOeOAU75ho=:F; wls=A|9a0z-t:a*n:h*m; wlv=A|9a0zd:s*c8EjCw.2+1+0+3; KSC=hAkdcx8gQ3v4FwX6sdiZqXaUNKgJo7mN5SzCdNslc9U01J2136YD84NZemf0hnZMowvivG8wg5XM4yygTsbXu4NT5Wz2CryD5le3rIWOqSum2aXAlr3UstPHjSSOExRnEb2RhgbW2oo7rRBoLQyTZtFoaBIDBv83 1JobVdAziWTcD5uuPdiBcOOaQ7sV5Qu/Hbex+Z0KadcseA68mEch2F8pB7vztpR52JRcFeK7CiWygf2BnwjDhTdlBJ75mz9l7lc5gE6NN1KtvuVP9TfjotlutGJVn/OrLuJA8wjbI98lYim7TdIexDc1g+mY69CZ5WjTfa0Mf3Z2 QgtTAduFPryW9k1ai2ri63JM4asV/Rc=; UIC=qskPgrnnjKiZI9+FNXn56C/PNAyeb+XFUVpDJqywbBdsvGNV9m+luxr4vBh+mVPldxZWEx5Mzze5g7lG7xwtk9u1TuJf1FvGbt1p9G6eE4bwj/SbxGefa1vBF00NYdKf; HIC=8d956631e8dee025|0|35|blu171|1761|blu171 2KB Keep that all on the server, and know me by an identifier cookie: 0.2KB Cookie: MSPProf=2P3tLXVLvD5PVHLGWbCJkyyz2zUlu3ArRRE!IATPEx6Lj0r*Rlk1M4nbsRK4nBWLj!OxvgmcXA1dSlpaqdNSl0owO4pf82cyoyvPFXHdPOKTj3qlPTloZ!o2AqTrgbXHXSGBpQpbXC4Ly8AB2qpig8NjC1pLhoia5ozL0AOBCf2SwTgL6lZsBuXw8dw!0svabs And use cookie-less domains for static content: 0.0KB As listed on: https://developers.google.com/speed/docs/best-practices/rules_intro ©2013 AKAMAI | FASTER FORWARDTM Akamai FEO automation automatically creates cookie-less shards for optimized resources using different domains; the number of shards is configurable. Well-known Best Practices • Minimizing payload size — reducing the size of responses, downloads, and cached pages 437B 1 // is.js // (c) 2001 Douglas Crockford // 2001 June 3 // is var is={ie:navigator.appName=='Microsoft Internet Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigat or.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||pa rseFloat(navigator.appVersion),win:navigator.platform=='Win32'} is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0){is.ie=is.ns=false;is. opera=true;} if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;}} 1004B // The -is- object is used to identify the browser. Every browser edition // identifies itself, but there is no standard way of doing it, and some of // the identification is deceptive. This is because the authors of web // browsers are liars. For example, Microsoft's IE browsers claim to be // Mozilla 4. Netscape 6 claims to be version 5. var is = { ie: Explorer', java: ns: ua: version: 2 3 navigator.appName == 'Microsoft Internet navigator.javaEnabled(), navigator.appName == 'Netscape', navigator.userAgent.toLowerCase(), parseFloat(navigator.appVersion.substr(21)) || parseFloat(navigator.appVersion), navigator.platform == 'Win32' win: } is.mac = is.ua.indexOf('mac') >= 0; if (is.ua.indexOf('opera') >= 0) { is.ie = is.ns = false; is.opera = true; } if (is.ua.indexOf('gecko') >= 0) { is.ie = is.ns = false; is.gecko = true; } 494B 235B Example minified script: http://www.crockford.com/javascript/jsmin.html As listed on: https://developers.google.com/speed/docs/best-practices/rules_intro ©2013 AKAMAI | FASTER FORWARDTM Minification is part of Akamai FEO’s most basic CSS and JS optimizations, which also include automated versioning, fingerprinted filenames and sharding. Well-known Best Practices • Optimizing browser rendering — improving the browser's layout of a page. First, some details on CSS selectors. Avoid a universal key selector body * {...} = BAD Use class selectors instead of descendant selectors ul li {color: blue;} = BAD .unordered-list-item {color: blue;} = BETTER Remove redundant qualifiers ul#top_blue_nav {...} = BAD Important Note! We won’t fix bad CSS… This one’s on your developers! #top_blue_nav {...} = BETTER Avoid using descendant selectors, especially those that specify redundant ancestors body ul li a {...} = BAD (all elements are descendants of the body tag) Avoid the :hover pseudo-selector for non-link elements for IE clients h3:hover {...} = BAD (for MSIE clients) As listed on: https://developers.google.com/speed/docs/best-practices/rules_intro ©2013 AKAMAI | FASTER FORWARDTM Well-known Best Practices • Optimizing browser rendering – cont’d • Avoid CSS Expressions (deprecated), put CSS in the document head, using the <link> and <style> tags, and don't use @import. • Specify image dimensions in the <img> (and/or <table> and <td>) element or block-level parent, and use dimensions that match those of the actual images (e.g. - don’t scale via the front-end). • Specify a character set in the HTTP response headers of your HTML documents; the preferred method is to return a “Content-Type” header with proper “charset,” or use an HTML “meta” tag, and if you use both, make sure they match! As listed on: https://developers.google.com/speed/docs/best-practices/rules_intro ©2013 AKAMAI | FASTER FORWARDTM Akamai FEO tools will automatically convert @import references into <link> elements. Akamai has multiple products that compress, resize and deliver according to device and network characteristics automatically. FEO with “Responsive Image Loading” will create images best suited for mobile devices. Well-known Best Practices • Optimizing for mobile — tuning a site for the characteristics of mobile networks and mobile devices • Defer parsing of JavaScript or use “async” (per earlier examples) • Make landing page redirects cacheable. • What Google says: use a 302 redirect with a cache lifetime of one day, including a “Vary: User-Agent” header as well as a “CacheControl: private” header. • What Akamai says (if Akamai is your CDN partner): use a 301 redirect without any “Vary” header but where Akamai’s custom “User-Agent” token (or any Edge Device Characterization feature the origin uses to serve the redirect) is included in the cache key; Akamai will cache the response as if it were a 200, specific to the type of device receiving the redirect. Akamai FEO automation intelligently detects As listed on: https://developers.google.com/speed/docs/best-practices/rules_intro ©2013 AKAMAI | FASTER FORWARDTM script behaviors that modify the page, and those script resources will not be deferred/async’d. Using a CDN – Practical Considerations ©2013 AKAMAI | FASTER FORWARDTM Using a CDN – What you need to know • Why should I use a CDN? • Page load times, operating costs (bandwidth, infrastructure), SEO ranking, and conversion metrics are all going to improve… • How do I integrate my site? • If your site is static your job is easy. Typically some configuration choices, testing, and a DNS CNAME change. • If your site is dynamic, consider using different domain(s) for static content (another best practice). Most CDNs can improve performance and enhanced availability for dynamic content as well. Also uses a DNS CNAME entry for on-boarding, but more extensive testing is recommended. ©2013 AKAMAI | FASTER FORWARDTM Using a CDN – What you need to know • Consider things that really help your CDN partners during site design: • Use very high downstream TTLs for static content (or use fingerprinted filenames also with a very high TTL), compress text resources at the origin, and consider using cloud storage as well as cookie-less domains • Use “Cache-Control” and/or “Expires” to control CDN caching; use “EdgeControl” (Akamai-only) to override all other behaviors • Leverage HTML pages that are common across users; personalization (logged in state, shopping cart, product recommendations) can be done asynchronously via script • Publish a “Last-Modified” header for static content (conditional requests) ©2013 AKAMAI | FASTER FORWARDTM Using a CDN – What you need to know • Consider things that really help your CDN partners during site design: • Don’t send a “Vary” response header (unless you really do “Vary”) • Use your CDN partner for “content targeting” (localization, device characterization) instead of building out localized origin infrastructure • Interesting pre-fetching note: don’t use relative paths that reference ancestor directories (e.g. – “/../../styles.css”); at least Akamai servers won’t pre-fetch those ©2013 AKAMAI | FASTER FORWARDTM Case Study 1 Consolidating content for desktop & mobile ©2013 AKAMAI | FASTER FORWARDTM Case Study 1: Desktop/Mobile consolidation Challenge: • Customer wants to consolidate desktop (www.) and mobile (m.) into one Web site • Initial page load for mobile devices accessing the www site is slow because of the need of detect & redirect mobile devices at origin ©2013 AKAMAI | FASTER FORWARDTM Case Study 1: consolidating desktop and mobile sites. Existing infrastructure www.yoursite.com Server www.yoursite.com/index.html [desktop site] 3rd party Mobile detection engine 300ms 300ms m.yoursite.com Server yoursite.com/index.html or www.yoursite.com/index.html ©2013 AKAMAI | FASTER FORWARDTM Case Study 1: consolidating desktop and mobile sites Solution 1: • Move Mobile detection and redirect engine closer to end users to avoid extra long round trip (Edge MDR) • Performance improvement ~150% ©2013 AKAMAI | FASTER FORWARDTM Case Study 1: consolidating desktop and mobile sites solution 1 www.yoursite.com Server www.yoursite.com/index.html [desktop site] 3rd party Mobile detection engine 50ms 100ms m.yoursite.com Server Edge server detects mobile device and pulls content from mobile origin server but delivers under www hostname yoursite.com/index.html or www.yoursite.com/index.html ©2013 AKAMAI | FASTER FORWARDTM Case Study 1: consolidating desktop and mobile sites Solution 2: • Perform Mobile detection at the Edge but instead of redirecting end user to mobile site, instruct Edge server to pull mobile content from mobile origin site (if not in the cache) and serve to mobile users • Performance improvement ~200% (~300% if content is served from the edge cache) ©2013 AKAMAI | FASTER FORWARDTM Case Study 1: consolidating desktop and mobile sites solution 2 (content not cached) www.yoursite.com Server www.yoursite.com/index.html [desktop version cache-key] 3rd party Mobile detection engine Edge server detects desktop browser and pulls content from www origin server 50ms 100ms m.yoursite.com Server Edge server detects mobile device and pulls content from mobile origin server but delivers under www hostname www.yoursite.com/index.html [mobile version cache-key] ©2013 AKAMAI | FASTER FORWARDTM Case Study 1: consolidating desktop and mobile sites solution 2 (content cached) www.yoursite.com Server www.yoursite.com/index.html [desktop version cache-key] 3rd party Mobile detection engine Edge server detects desktop browser and pulls content from www origin server 100ms m.yoursite.com Server Edge server detects mobile device and pulls content from mobile origin server but delivers under www hostname www.yoursite.com/index.html [mobile version cache-key] ©2013 AKAMAI | FASTER FORWARDTM Case Study 1: consolidating desktop and mobile sites Solution 3: Single origin server serves different content for mobile or Desktop users depending on a request parameter • Leverage Akamai’s Edge Device Characterization* (DC) to detect the device type at the Edge and include the device type (i.e. by adding a header) on the request for content to the origin • Performance improvement ~200% (~300% if content is served from the edge cache) *DC is built into Edge server’s core system to perform mobile detection within a few microseconds. It is so fast that Akamai service performance has allowed to be activated network-wide ©2013 AKAMAI | FASTER FORWARD TM Case Study 1: consolidating desktop and mobile sites solution 3 (single origin) www.yoursite.com Server www.yoursite.com/index.html [desktop version cache-key] 3rd party Mobile detection engine Edge server adds device characteristics to request and origin renders desktop version, cached separately Edge server adds device characteristics to request and origin renders mobile version, cached separately www.yoursite.com/index.html [mobile version cache-key] ©2013 AKAMAI | FASTER FORWARDTM Case Study 2 Offline Origin Server ©2013 AKAMAI | FASTER FORWARDTM Case Study 2: Offline origin server Challenge: • Origin infrastructure cannot handle certain traffic peaks in spite of good cache ratio • Upgrading origin components (Load Balancer, application server and DB) will take several months and will costs a lot of money • Content relatively static (less than 5% of the content updates more than once a day) ©2013 AKAMAI | FASTER FORWARDTM Case Study 2: Offline origin server Solution: • Serve 100% of traffic out of NetStorage until origin server is upgraded • A “cron” job scrubs locally the DB, finds out files changed since last snapshot (LMT), zips and uploads them to NetStorage where they will be extracted using the CMS SSH shell unzip utility. • Solution was meant as a temporary workaround until the origin infrastructure was updated, but worked so well the customer use it for 7 years, accounting for several million dollars in infrastructure savings. ©2013 AKAMAI | FASTER FORWARDTM Case Study 2: Offline origin server Origin Server 1 Origin Crawl A cron job creates a complete content archive End user 4 NetStorage Origin Content is Uploaded and Expanded Content is Served and Cached 2 Allows for direct updates to files in place ©2013 AKAMAI | FASTER FORWARDTM 3 End User Requests a Resource Case Study 3 Designing CDN-Friendly Sites ©2013 AKAMAI | FASTER FORWARDTM Case Study 3: Designing CDN Friendly Sites Challenge: • Customer MyCRMSite.com was evaluating new Content Management Systems for their marketing site. • Part of their criteria was choosing a CMS that is “CDNfriendly.” • Too many features to consider that might have an impact on CDN integration. ©2013 AKAMAI | FASTER FORWARDTM Case Study 3: Designing CDN Friendly Sites Solution: • Final choice came down to the CMS that offered: • A fingerprinted filename, which allowed for an “infinite” downstream TTL (up to one year) • Supported configurable domain shards (allowing optimizing for desktop and mobile) • Offered the ability to pin each object to a single shard domain (avoiding duplicate objects in all cache tiers). Additional capabilities might be good selling points for a CMS. However, if you are leveraging Akamai FEO automation you don’t have to consider these types of optimizations during development. ©2013 AKAMAI | FASTER FORWARDTM Q&A ©2013 AKAMAI | FASTER FORWARDTM QR codes Follow us on Twitter Feedback survey http://goo.gl/i2AI64 ©2013 AKAMAI | FASTER FORWARDTM