1 / 45

Web Performance Best Practices

Web Performance Best Practices. Fast Sites for a Global Audience San Mateo Meetup , December 5, 2013. Welcome!. Introduction Who We Are Why Performance Matters Web Performance Best Practices Measured vs Perceived Performance Well-known Best Practices

seoras
Download Presentation

Web Performance Best Practices

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. Web Performance Best Practices Fast Sites for a Global Audience San Mateo Meetup, December 5, 2013

  2. 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

  3. Who We Are

  4. 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

  5. But Web Site Complexity is Always Increasing Our applications are complex, and growing… Source: Ilya Grigorik

  6. Measured vs. Perceived Performance

  7. 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

  8. 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

  9. 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

  10. 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.)

  11. 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.

  12. 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.

  13. When Measured and Perceived Meet… 3.044s 7.066s Waterfall without Front-End Optimizations Waterfall with Front-End Optimizations 56.9% Faster

  14. When Measured and Perceived Meet…

  15. Well-Known Best Practices • (Thank you, Steve Souders!)

  16. Well-known Best Practices • Optimizing caching — keeping your application's data and logic off the network altogether Akamai FEO automation can create fingerprinted filenames automatically for your static content, both in browser cache and HTML5 local storage. /style-Bb752799d39de9dc7c186802ea1eaf84.css /logo-E8f51d6221bcc66b381c3b72619bce70.jpg /notify-40d68a1163b9870406ba588709f1507f.js As listed on: https://developers.google.com/speed/docs/best-practices/rules_intro

  17. Well-known Best Practices • Minimizing round-trip times — reducing the number of serial request-response cycles Order of Styles and Scripts** Number of Domains 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

  18. 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!o2AqTrgbXHXSGBpQpbXC4Ly8AB2qpig8NjC1pLhoia5ozL0AOBCf2SwTgL6lZsBuXw8dw!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/Nolei8lac+0fVOXApuAj0ZThAzo/lkHi3bCqo+QiDVDXAGAA1wCnGwEAhF0vTPBDnVLwQ51SECcAAAoQoAAwFQBkYmFydG9zaEBob3RtYWlsLmNvbQBQAAAUZGJhcnRvc2hAaG90bWFpbC5jb20AAAAwVVMABTk4MTI2AACMAQQJAgAAY6lNQBAUQwAFRGF2aWQAB0JhcnRvc2gEXwABVwAAAAAAAAAAAADo3uAljZVmMQAA8EOdUvC4r1IAAAAAAAAAAAAAAAANADIzLjc5LjIzMS4xNAAFAAAAAAAAAAAAAAAAAAEAAAEAAAEAAAEAAAAAAAAAAAAA; KVC=17.1.7118.6000; mt=01_92dabd989a36d9368a0e72467d6753cdca3acb4d8a9cd64efdfc8115d43f7526|fc178b0adc439c31; xid=9d3b00b0-d585-45f1-b738-fa8c9a3439ee&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|9a0z-d:s*c8EjCw.2+1+0+3; KSC=hAkdcx8gQ3v4FwX6sdiZqXaUNKgJo7mN5SzCdNslc9U01J2136YD84NZemf0hnZMowvivG8wg5XM4yygTsbXu4NT5Wz2CryD5le3rIWOqSum2aXAlr3UstPHjSSOExRnEb2RhgbW2oo7rRBoLQyTZtFoaBIDBv831JobVdAziWTcD5uuPdiBcOOaQ7sV5Qu/Hbex+Z0KadcseA68mEch2F8pB7vztpR52JRcFeK7CiWygf2BnwjDhTdlBJ75mz9l7lc5gE6NN1KtvuVP9TfjotlutGJVn/OrLuJA8wjbI98lYim7TdIexDc1g+mY69CZ5WjTfa0Mf3Z2QgtTAduFPryW9k1ai2ri63JM4asV/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 Akamai FEO automation automatically creates cookie-less shards for optimized resources using different domains; the number of shards is configurable. And use cookie-less domains for static content: 0.0KB As listed on: https://developers.google.com/speed/docs/best-practices/rules_intro

  19. Well-known Best Practices • Minimizing payload size — reducing the size of responses, downloads, and cached pages 437B 1 2 // is.js // (c) 2001 Douglas Crockford // 2001 June 3 // is // 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: navigator.appName == 'Microsoft Internet Explorer', java: navigator.javaEnabled(), ns: navigator.appName == 'Netscape', ua: navigator.userAgent.toLowerCase(), version: parseFloat(navigator.appVersion.substr(21)) || parseFloat(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; } var is={ie:navigator.appName=='Microsoft Internet Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(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 3 Minification is part of Akamai FEO’s most basic CSS and JS optimizations, which also include automated versioning, fingerprinted filenames and sharding. 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

  20. 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 Important Note! We won’t fix bad CSS… This one’s on your developers! ul#top_blue_nav {...}= BAD #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

  21. 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! 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. As listed on: https://developers.google.com/speed/docs/best-practices/rules_intro

  22. 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 “Cache-Control: 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 script behaviors that modify the page, and those script resources will not be deferred/async’d. As listed on: https://developers.google.com/speed/docs/best-practices/rules_intro

  23. Using a CDN – Practical Considerations

  24. 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 staticyour 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.

  25. 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 “Edge-Control” (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)

  26. 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

  27. Case Study 1 Consolidating content for desktop & mobile

  28. 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

  29. Case Study 1: consolidating desktop and mobile sites. Existing infrastructure www.yoursite.com/index.html [desktop site] www.yoursite.com Server 3rd party Mobile detection engine 300ms Origin Redirect to m.yoursite.com/index.html 300ms m.yoursite.com Server yoursite.com/index.html or www.yoursite.com/index.html

  30. 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%

  31. Case Study 1: consolidating desktop and mobile sites solution 1 www.yoursite.com/index.html [desktop site] www.yoursite.com Server 3rd party Mobile detection engine 50ms Edge Redirect to m.yoursite.com/index.html 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

  32. 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)

  33. Case Study 1: consolidating desktop and mobile sites solution 2 (content not cached) www.yoursite.com/index.html [desktop version cache-key] www.yoursite.com Server Edge server detects desktop browser and pulls content from www origin server 3rd party Mobile detection engine 50ms 100ms Edge server detects mobile device and pulls content from mobile origin server but delivers under www hostname m.yoursite.com Server • www.yoursite.com/index.html[mobile version cache-key]

  34. Case Study 1: consolidating desktop and mobile sites solution 2 (content cached) www.yoursite.com/index.html [desktop version cache-key] www.yoursite.com Server Edge server detects desktop browser and pulls content from www origin server 3rd party Mobile detection engine 100ms Edge server detects mobile device and pulls content from mobile origin server but delivers under www hostname m.yoursite.com Server • www.yoursite.com/index.html[mobile version cache-key]

  35. 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

  36. 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]

  37. Case Study 2 Offline Origin Server

  38. 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)

  39. 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.

  40. Case Study 2: Offline origin server Origin Server 1 Origin Crawl A cronjob creates a complete content archive End user Content is Served and Cached End User Requests a Resource 4 3 NetStorage Origin Content is Uploaded and Expanded Allows for direct updates to files in place 2

  41. Case Study 3 Designing CDN-Friendly Sites

  42. 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 “CDN-friendly.” • Too many features to consider that might have an impact on CDN integration.

  43. 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.

  44. Q&A

  45. QR codes Feedback survey http://goo.gl/i2AI64 Follow us on Twitter

More Related