Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Velocity 2014: Responsive & Fast (iterating live)

1,148 views

Published on

This Velocity workshop will show how we can take a Responsive site and by making key changes improve the performance for different screens resolutions, network conditions and devices. We will take a “naïve” RWD site, transform it, and make it fast using commonly available tools and techniques before your very eyes.

Published in: Technology
  • Be the first to comment

Velocity 2014: Responsive & Fast (iterating live)

  1. 1. Responsive & Fast: Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM Iterating Live @ColinBendell
  2. 2. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. “Going Responsive” was long overdue ©2014 AKAMAI | FASTER FORWARDTM
  3. 3. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Alas, we can’t just destroy and rebuild ©2014 AKAMAI | FASTER FORWARDTM Hai Mom
  4. 4. ©2014 AKAMAI | FASTER FORWARDTM Chrome on Cable • Doc Complete: 5.2s • Fully Loaded: 8.93s • Total Bytes: 2,951 KB • Display Cost: 2.09B/pixel
  5. 5. ©2014 AKAMAI | FASTER FORWARDTM Chrome on 3G hotspot • Doc Complete: 17.57s • Fully Loaded: 24.34s
  6. 6. ©2014 AKAMAI | FASTER FORWARDTM MotoG on 3G hotspot • Doc Complete: 18.88s • Fully Loaded: 27.96s • Total Bytes: 2,752 KB • Display Cost: 11.9B/pixel
  7. 7. ©2014 AKAMAI | FASTER FORWARDTM State of Responsive Sites Average RWD Page Size, by Resolution From testing ~500 live RWD sites Source: http://goo.gl/0C0tLD
  8. 8. ©2014 AKAMAI | FASTER FORWARDTM Over-Downloading: Bytes Per Pixel Served Average RWD Bytes Served Per Pixel From testing ~500 live RWD sites Source: http://goo.gl/0C0tLD
  9. 9. ©2014 AKAMAI | FASTER FORWARDTM Strategies for Responsive & Fast Sites 1. Responsive Images 2. Hidden & Below-the-Fold Images 3. Unused CSS & JS 4. Hidden SPOF 5. RESS 6. Adaptive Images
  10. 10. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. You’re talking Adaptive, not Responsive!! ©2014 AKAMAI | FASTER FORWARDTM (I don’t care)
  11. 11. ©2014 AKAMAI | FASTER FORWARDTM Spectrum of Responsive Sites • Client Side Rendering • CSS @media • Fluid Grids / Flex Images • Device decides which content to use • Server Side • Device / Situation Detection • Server decides the appropriate content for the user
  12. 12. ©2014 AKAMAI | FASTER FORWARDTM What this Talk is not • Mobile Performance • UI / UX Performance • Subsystem Performance (DOM, WebGL, GPU …) • How to setup a WPT
  13. 13. ©2014 AKAMAI | FASTER FORWARDTM Our Test Environment • Magento CE 1.9 • Sample Data 1.9 • Theme: rwd • Plugins: AddShoppers, YotPo, Recommender • http://ec2-54-190-59-81.us-west- 2.compute.amazonaws.com/magento/ • http://magento.example.com/ Source: Builtwith
  14. 14. ©2014 AKAMAI | FASTER FORWARDTM Testing • WebPageTest.org • Devices: Desktop, Moto G [opensignal.org] • Moto E, Nexus 7 on initial test • Network Conditions: Cable, 3G [State of the Internet] • Browsers: Chrome [akamai.io] • IE 9, Firefox, Chrome on initial test • Ignore multi-geo testing • Assume adding oceans makes it worse
  15. 15. ©2014 AKAMAI | FASTER FORWARDTM Initial run [WPT Initial Run]
  16. 16. ©2014 AKAMAI | FASTER FORWARDTM Exercise in Stating the Obvious • Network Conditions (bandwidth, latency) impact performance • Mobile is slower than Desktop • Lots of Images • Lots of JS • Cost of Painting on mobile • Cost of JS on mobile
  17. 17. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak Imademgand, moebile devsices and data collection. ©2014 AKAMAI | FASTER FORWARDTM
  18. 18. ©2014 AKAMAI | FASTER FORWARDTM How Does Our Test Compare with WPT?
  19. 19. ©2014 AKAMAI | FASTER FORWARDTM Test: No Images!
  20. 20. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Original and very large images! <div class="product-image-gallery"> <img id="image-main" class="gallery-image visible" src="http://magentor.example.com/magento/media/catalog/product/cache/1/image/ 9df78eab33525d08d6e5fb8d27136e95/2/8/2880411400_2_1_1.jpg" alt="Linen Blazer" title="Linen Blazer" /> <img id="image-0" class="gallery-image" src="http://magentor.example.com/magento/media/catalog/product/cache/1/image/ 1200x/040ec09b1e35df139433887a97daa66f/m/s/msj012t_2.jpg" data-zoom-image=" http://magentor.example.com/magento/media/catalog/product/cache/1/ima
  21. 21. ©2014 AKAMAI | FASTER FORWARDTM Problem: Same Image, Different Size http://c.s-microsoft.com/en-us/CMSImages/SpringPromo_LastFrameBG_1600x540_EN_US.jpg?version=f77413db-c3db-675e-1ff8-faa31c3d5c30
  22. 22. ©2014 AKAMAI | FASTER FORWARDTM Strategies to Reduce Image Cost • No Images! (impractical) • Use SVG (impractical) • Use CSS (impractical; unexpected results) • Change formats (interesting, more later) • Increase compression (a different talk) • Use different sized image for different viewport (Responsive Images)
  23. 23. ©2014 AKAMAI | FASTER FORWARDTM Responsive Images over 471 Websites Why do we need Responsive Images? 72% less image weight Tim Kadlec:
  24. 24. ©2014 AKAMAI | FASTER FORWARDTM Solution: Responsive Images <div style="width: 240px"> <div class="delayed-image-load" data-src="http://example.com/imgr-{width}.png" ></div> </div> <script> new Imager({ availableWidths: [200, 260, 320, 600], widthInterpolator: function(width) { return width + 'x' + (width/2); } }); </script>
  25. 25. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM
  26. 26. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. <picture> ©2014 AKAMAI | FASTER FORWARDTM (drama not included)
  27. 27. ©2014 AKAMAI | FASTER FORWARDTM Anatomy of <picture> <picture> <source media="(min-width: 1280px)" srcset="large-1.jpg, large-2.jpg 2x" /> <source media="(min-width: 770px)" srcset="med-1.jpg, med-2.jpg 2x" /> <source type="image/webp" srcset="dogs-1.webp, dogs-2.webp 2x"> <source type="image/vnd.ms-photo" srcset="dogs-1.jxr, dogs-2.jxr 2x"> <source type="image/jp2" srcset="dogs-1.jp2, dogs-2.jp2 2x"> <img src="small-1.jpg" srcset="small-2.jpg 2x" sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" alt="The president giving an award." /> </picture>
  28. 28. ©2014 AKAMAI | FASTER FORWARDTM Anatomy of <picture> <picture> <source media="(min-width: 1280px)" srcset="large-1.jpg, large-2.jpg 2x" /> <source media="(min-width: 770px)" srcset="med-1.jpg, med-2.jpg 2x" /> <source type="image/webp" srcset="dogs-1.webp, dogs-2.webp 2x"> <source type="image/vnd.ms-photo" srcset="dogs-1.jxr, dogs-2.jxr 2x"> <source type="image/jp2" srcset="dogs-1.jp2, dogs-2.jp2 2x"> <img src="small-1.jpg" srcset="small-2.jpg 2x" sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" alt="The president giving an award." /> </picture>
  29. 29. ©2014 AKAMAI | FASTER FORWARDTM Anatomy of <picture> <picture> <source media="(min-width: 1280px)" srcset="large-1.jpg, large-2.jpg 2x" /> <source media="(min-width: 770px)" srcset="med-1.jpg, med-2.jpg 2x" /> <source type="image/webp" srcset="dogs-1.webp, dogs-2.webp 2x"> <source type="image/vnd.ms-photo" srcset="dogs-1.jxr, dogs-2.jxr 2x"> <source type="image/jp2" srcset="dogs-1.jp2, dogs-2.jp2 2x"> <img src="small-1.jpg" srcset="small-2.jpg 2x" sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" alt="The president giving an award." /> </picture>
  30. 30. ©2014 AKAMAI | FASTER FORWARDTM Demo 1: Responsive Images with <picture> • Demo
  31. 31. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Magento Original <div class="product-image-gallery"> <img id="image-main" class="gallery-image visible" src="/magento/media/catalog/product/cache/1/image/9df78eab33525d08 d6e5fb8d27136e95/2/8/2880411400_2_1_1.jpg" alt="Linen Blazer" title="Linen Blazer" /> <img id="image-0" class="gallery-image" src=“/media/catalog/product/cache/1/image/1200x/040ec09b1e35df1394 33887a97daa66f/m/s/msj012t_2.jpg" data-zoom-image=“/ magento/media/catalog/product/cache/1/image/1200x/040ec09b
  32. 32. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Magento Updated (v1) <script type="text/javascript" src="/magento/js/picturefill/picturefill-2.1.min.js"> </script> <script type="text/javascript"> // Picture element HTML5 shiv document.createElement( "picture" ); </script> ... <div class="product-image product-image-zoom"> <div class="product-image-gallery"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(min-width: 801px)" srcset=“/magento/media/catalog/product/cache/1/image/600x/040ec09b1e35df139433887a97daa66 f/2/8/2880411400_2_1_1.jpg"/> <source media="(min-width: 641px)" srcset=“/magento/media/catalog/product/cache/1/image/500x/040ec09b1e35df139433887a97daa66 f/2/8/2880411400_2_1_1.jpg"> <!--[if IE 9]></video><![endif]--> <img id="image-main"
  33. 33. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Magento Updated (v1) <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(min-width: 801px)" srcset=“/magento/media/catalog/product/cache/1/image/600x/040ec09b1e35df139433887 a97daa66f/2/8/2880411400_2_1_1.jpg"/> <source media="(min-width: 641px)" srcset=“/magento/media/catalog/product/cache/1/image/500x/040ec09b1e35df139433887 a97daa66f/2/8/2880411400_2_1_1.jpg"> <!--[if IE 9]></video><![endif]--> <img id="image-main" class="gallery-image visible" src="/magento/media/catalog/product/cache/1/image/400x/040ec09b1e35df139433887a97 daa66f/2/8/2880411400_2_1_1.jpg" alt="Linen Blazer" title="Linen Blazer" data-zoom-image=“/ magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887 a97daa66f/2/8/2880411400_2_1_1.jpg" />
  34. 34. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Responsive Images: Results WPT Results Start Render: 6.4s Doc Complete: 18.9s Fully Loaded: 28s Start Render: 7.7s Doc Complete: 15.9 Fully Loaded: 22.7s
  35. 35. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Responsive Images: Results
  36. 36. ©2014 AKAMAI | FASTER FORWARDTM Responsive Images: Notes & Caveats • Use <Picture> polyfill (eg: Scott Jehl’s PictureFill) • Polyfill manipulates the <img src> in the DOM; Supported Browsers do not • JS Libraries that depend on <img> may not work with <picture> (see ImageZoom) • Future of <picture> is still uncertain – Only Chrome 38 (Desktop) is committed
  37. 37. ©2014 AKAMAI | FASTER FORWARDTM Hidden Images Still Downloaded
  38. 38. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Solution: (Client-Side) Conditional Loading If Then
  39. 39. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Magento Original <div class="box-collateral box-up-sell"> <h2>You may also be interested in the following product(s)</h2> <ul class="products-grid products-grid--max-6-col" id="upsell-product-table"> <li> <a href="/magento/isla-crossbody-handbag.html" title="Isla Crossbody Handbag" class="product-image"> <img src="/magento/media/catalog/product/cache/1/small_image/280x/9df78eab33525d08d6e5fb8 d27136e95/a/b/abl000_4.jpg" alt="Isla Crossbody Handbag" /> </a> <h3 class="product-name"><a href="/magento/isla-crossbody-handbag.html" title="Isla Crossbody Handbag">Isla Crossbody Handbag</a></h3>
  40. 40. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Magento Updated v2 <script> function loadRealUpSell(img) { if (!img) return; if (img.offsetParent != null) { img.onload = null; img.src = img.getAttribute("data-src"); } } </script> <div class="box-collateral box-up-sell"> <h2>You may also be interested in the following product(s)</h2> <ul class="products-grid products-grid--max-6-col" id="upsell-product-table"> <a href="/magento/roller-suitcase.html" title="Roller Suitcase" class="product-image"> <img data-src="/ magento/media/catalog/product/cache/1/small_image/280x/9df78eab33525d08d 6e5fb8d27136e95/a/b/abl005a_1.jpg" alt="Roller Suitcase" src="/magento/media/catalog/product/1x1.gif" onload="loadRealUpSell(this);" />
  41. 41. Demo 2: Conditional Load CSS Hidden Images ©2014 AKAMAI | FASTER FORWARDTM • Demo
  42. 42. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Conditional Load Images: Results WPT Results Start Render: 7.7s Doc Complete: 15.9 Fully Loaded: 22.7s Start Render: 7.5s Doc Complete: 14s Fully Loaded: 21.4s
  43. 43. ©2014 AKAMAI | FASTER FORWARDTM Conditional Load Images: Notes & Caveats • “onload” only fires if the 1x1.gif exists and loaded • Resizing viewport or orientation changes require special attention and additional logic • Yet more Javascript!
  44. 44. ©2014 AKAMAI | FASTER FORWARDTM Problem: Images Below the Fold Not Shown
  45. 45. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Magento Updated v3 <script type="text/javascript" src="/magento/skin/frontend/rwd/default/js/lib/jquery.unveil- 1.3.min.js"></script> ... <script> jQuery(function() { jQuery("img.lazy").unveil(); }); </script> ... <img id="product-collection-image-439” class="lazy" src="/magento/media/catalog/product/1x1.jpg" data-src="/ magento/media/catalog/product/cache/1/small_image/420x/9df7 8eab33525d08d6e5fb8d27136e95/a/b/abl0008.jpg" alt="Luggage Set" />
  46. 46. ©2014 AKAMAI | FASTER FORWARDTM Demo 2b: On Demand (lazyload) Images • Demo
  47. 47. ©2014 AKAMAI | FASTER FORWARDTM On Demand Images: Caveats & Notes • Many automated solutions offer lazyload • Eg: Google PageSpeed, Akamai FEO • Existing lazyload solutions may need to be updated may not interact with final <picture> supported browsers • Picture Polyfill + Lazyload scripts need to be carefully Use solutions such as Picturefill 2 and lazyloading
  48. 48. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM
  49. 49. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak CSS / JdSemand, m ob/ile d evicDes and daOta collectioMn. ©2014 AKAMAI | FASTER FORWARDTM
  50. 50. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Problem: Unnecessary CSS Loaded !=
  51. 51. grep "@media" styles.css | sort | uniq @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 4 / 2), (min-device- 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { @media only screen and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 0) { @media only screen and (max-width: 1000px) { @media only screen and (max-width: 1199px) { @media only screen and (max-width: 1279px) { @media only screen and (max-width: 320px) { @media only screen and (max-width: 420px) { @media only screen and (max-width: 450px) { Avoid data theft and downtime by extending the @media only screen and (max-width: 479px) { security perimeter outside the data-center and @media only screen and (max-width: 499px) { @media only screen and (max-width: 520px) { protect from increasing frequency, scale and @media only screen and (max-width: 530px) { @media only screen and (max-width: 535px) { sophistication of web attacks. @media only screen and (max-width: 599px) { @media only screen and (max-width: 600px) { @media only screen and (max-width: 620px) { @media only screen and (max-width: 670px) { @media only screen and (max-width: 699px) { @media only screen and (max-width: 770px) { @media only screen and (max-width: 799px) { @media only screen and (max-width: 850px) { @media only screen and (max-width: 870px) and (min-width: 771px) { @media only screen and (max-width: 979px) { @media only screen and (min-width: 1126px) { ©2014 AKAMAI | FASTER FORWARDTM
  52. 52. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM 4. Solution: Split CSS by Media Query <!--[if (gte IE 9) | (IEMobile)]><!--> <link rel="stylesheet" type="text/css" href=”/magento/skin/frontend/rwd/default/css/styles.css” /> <!--<![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link rel="stylesheet" type="text/css" href=”/magento/skin/frontend/rwd/default/css/styles_base.css" media="all" /> <link rel="stylesheet" type="text/css" href=”/magento/skin/frontend/rwd/default/css/styles_mobile.css" media="screen and (max-width:770px)" /> <link rel="stylesheet" type="text/css" href=”/magento/skin/frontend/rwd/default/css/styles_desktop.css” media="screen and (min-width:771px)" /> <!--<![endif]-->
  53. 53. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Magento RWD Styles.css Breakdown Reality: Most RWD sites aren’t mobile first
  54. 54. Problem: Media queries don’t prevent CSS downloads Resolution: 320x480 ©2014 AKAMAI | FASTER FORWARDTM “Right” CSS loaded “Wrong” CSS loaded
  55. 55. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM 4b. Solution: More Javascript! <link rel="stylesheet" type="text/css" data-src=“/magento/skin/frontend/rwd/default/css/styles_mobile.css" data-mq="screen and (max-width:770px)" /> <link rel="stylesheet" type="text/css" data-src=“/magento/skin/frontend/rwd/default/css/styles_desktop.css” data-mq="screen and (min-width:771px)" /> <script> var styles= document.getElementsByTagName("link"); for(var i=0;i<styles.length; i++) { // Test if the Media Query matches var mq = styles[i].getAttribute("data-mq"); if (mq && window.matchMedia(mq).matches) { // If so, append the new (link) element. var l = document.createElement("link"); l.rel = 'stylesheet'; l.type = 'text/css'; l.href = scripts[i].getAttribute("data-src"); document.getElementsByTagName('head')[0].appendChild(l); } }
  56. 56. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM
  57. 57. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM On Demand CSS: Results WPT Results Start Render: 7.5s Doc Complete: 14s Fully Loaded: 21.4s Start Render: 9.2s Doc Complete: 12.7s Fully Loaded: 20.4s
  58. 58. ©2014 AKAMAI | FASTER FORWARDTM Render Blocking CSS Inline above-the-fold CSS to speed the page render. Ilya Grigorik Critical Path CSS Non Priority CSS
  59. 59. ©2014 AKAMAI | FASTER FORWARDTM Without the CSSOM, First Paint is Blocked Resources to calculate Critical Path CSS: • Chrome Bookmarklet by Paul Kinlan • Grunt task, NPM or online tool by Jonas Ohlsson
  60. 60. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM <head> <style type="text/css"> *, ::before, ::after { box-sizing: border-box; margin: 0px; padding: 0px; } html { font-family: sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html, body, img, fieldset, abbr, acronym { border: 0px; } html, body { height: 100%; } body { margin: 0px; color: rgb(0, 0, 0); line-height: 1; background: rgb(255, 255, 255); body, button, input, select, table, textarea { font-family: 'Helvetica Neue', Verdana, .wrapper { min-width: 320px; min-height: 100%; margin: 0px auto; background: rgb(255, .header-language-background { padding: 10px; text-transform: uppercase; background-color: .header-language-background, .header-language-background a { color: rgb(230, 230, 230); .header-language-container, .page-header { font-family: Raleway, 'Helvetica Neue', Verdana, .header-language-background .header-language-container { max-width: 1200px; margin-left: ... </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Linen Blazer</title> ... <link rel="stylesheet" type="text/css" href="/magento/skin/frontend/rwd/default/css/styles-min.css" media="all"/> </body> </html>
  61. 61. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Inline Critical CSS: Results WPT Results Start Render: 7.5s Doc Complete: 14s Fully Loaded: 21.4s Start Render: 7.2s Doc Complete: 13.4s Fully Loaded: 20.9s
  62. 62. ©2014 AKAMAI | FASTER FORWARDTM CSS Notes and Caveats • Splitting CSS by Media Query has marginal net-benefits • The Browser will still load CSS with Media Queries • Use Conditionally loaded CSS for mobile first designs • Focus on critical CSS instead
  63. 63. ©2014 AKAMAI | FASTER FORWARDTM Problem: Hidden JavaScript (just like Photos) Width Num JS Reqs Num JS Bytes 320px 11 133 KB 1600px 10 125 KB
  64. 64. ©2014 AKAMAI | FASTER FORWARDTM Problem: Hidden SPOF Regular Day (Desktop) Twitter Down (Desktop) Regular Day (Mobile) Twitter Down (Mobile)
  65. 65. data-src=”/magento/skin/frontend/rwd/default/js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js" data-mq="screen and (min-width:771px)" /> ©2014 AKAMAI | FASTER FORWARDTM Solution: Conditional Loading JS (& CSS) <script type="text/javascript" <script> var scripts = document.getElementsByTagName("script"); for(var i=0;i<scripts.length; i++) { // Test if the Media Query matches var mq = scripts[i].getAttribute("data-mq"); if (mq && window.matchMedia(mq).matches) { // If so, append the new (script) element. var s = document.createElement("script"); s.src = scripts[i].getAttribute("data-src"); document.body.appendChild(s); } “… conditional loading can be used to ensure that small screen users don’t download a whole bunch of stuff they can’t use …” Brad Frost: } </script>
  66. 66. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Conditional Load JS: Results WPT Results Start Render: 7.2s Doc Complete: 13.4s Fully Loaded: 20.9s Start Render: 6.8s Doc Complete: 10.5s Fully Loaded: 17.5s
  67. 67. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM No Hidden SPoF!
  68. 68. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. RESS REsponsive + Server Side ©2014 AKAMAI | FASTER FORWARDTM
  69. 69. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Problem: Hidden DOM impacts download
  70. 70. ©2014 AKAMAI | FASTER FORWARDTM Solution: REsponsive + Server Side (RESS) • Server conditionally assembles (remove / add) design response • Does not replace Front-End Responsive design • Tune for families of devices • User-Agent Regex • Device Characteristic Databases • Client Hints (Header, Cookie) • Other Cookie Mobile Content Removed Desktop Content Removed
  71. 71. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Magento RESS <?php //90% UA match $_mobile_agents = '!(tablet|pad|mobile|phone|symbian|android|ipod|ios|blackberry|webos)!i'; $_is_mobile = false; if (preg_match($_mobile_agents, $_SERVER['HTTP_USER_AGENT'])) { $_is_mobile = true; } ?> <?php if(!$_is_mobile):?> <?php echo $this->getChildHtml('related_products') ?> <?php endif; ?> <?php if(!$_is_mobile):?> <?php echo $this->getChildHtml('upsell_products') ?> <?php endif; ?>
  72. 72. ©2014 AKAMAI | FASTER FORWARDTM Demo
  73. 73. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM RESS can reduce DOM complexity Before After
  74. 74. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM RESS: Results WPT Results Start Render: 6.8s Doc Complete: 10.5s Fully Loaded: 17.5s Start Render: 6.8s Doc Complete: 10.1s Fully Loaded: 17 s
  75. 75. ©2014 AKAMAI | FASTER FORWARDTM RESS Notes & Caveats • Vary: User-Agent to avoid SEO Cloaking • Cache-Control: Private to avoid cache collision by Proxy • Pre-instruct your CDN to utilize the same RESS logic • (Otherwise your CDN will not cache or have cache collisions)
  76. 76. ©2014 AKAMAI | FASTER FORWARDTM Solution: RESS with CDN ● Identify Common Devices ○ Or common properties of devices ● Optimize for those devices ○ RWD, even if not 100% Client Side ● Example: Akamai EDC & Property Manager ○ Device Properties sent as header ○ Origin returns correct content ○ Cache key includes mobile property
  77. 77. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM RESS & CDN (Magento Code) <?php $_is_mobile = false; if (preg_match('!is_mobile=true!i',$_SERVER['X-Akamai-Device-Characteristics'])) { $_is_mobile = true; } ?> <?php if(!$_is_mobile):?> <?php echo $this->getChildHtml('related_products') ?> <?php endif; ?> <?php if(!$_is_mobile):?> <?php echo $this->getChildHtml('upsell_products') ?> <?php endif; ?>
  78. 78. ©2014 AKAMAI | FASTER FORWARDTM Is Bucketing by ‘Characteristic’ Enough? TABLET OTHER What about? • HTML 5 vs 4? • Device Model? • Browser Family? • GPS support? • Pixel Density? • Etc… MOBILE
  79. 79. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Solution: ESI Conditional Loading <esi:choose> <esi:when test="$(IS_TABLET) &amp; $(BRAND_NAME == 'Chrome')"> <link href="tablet.css" type="text/css" /> <script src="/utils/tablet.js" type="text/javascript"></script> </esi:when> </esi:choose>
  80. 80. Instead of 3 Sources, 1 Source with ∞ Permutations Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from <ESI> increasing decorated frequency, scale and sophistication of web attacks. Edge Origin ©2014 AKAMAI | FASTER FORWARDTM is_mobile is_tablet (other)
  81. 81. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM Images (Redux)
  82. 82. 23+ 4+ 12.1+ ©2014 AKAMAI | FASTER FORWARDTM Could we use the same design for images? Format Size vs JPEG Proggressive Transparency Support Hardware Decoding Encoder Browser Support JPEG N/A N/A No No jpegtran Everybody WebP -35% -35% Yes No cwebp JPEG XR -30% N/A In Spec, not Browsers Maybe jxrlib JPEG 2000 -30% N/A In Spec, not Browsers Maybe OpenJP EG 10+ 6+ 6+
  83. 83. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Solution: Auto Image Selection WebP JXR Jpg2000 Jpg Jpg
  84. 84. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Adaptive Format: Results WPT Results Start Render: 6.8s Doc Complete: 10.1s Fully Loaded: 17 s Start Render: 6.4s Doc Complete: 9.4s Fully Loaded: 16.2 s
  85. 85. Bonus: Image Transcoder for Resize & Compression • Deliver a browser specific version of a requested image • Reduce the “noise” in the <picture> tag • Provides backward compatibility for all browsers • Ensures all images apply best practices (remove EXIF, progressive, etc) ©2014 AKAMAI | FASTER FORWARDTM
  86. 86. ©2014 AKAMAI | FASTER FORWARDTM Bonus: Adjust Based on Network Conditions Quality: 100% Size: 101KB Average Throughput: High Size: 85KB (Q: 90) Throughput: Med Size: 35KB (Q: 40) Throughput: Low Size: 13KB (Q: 20) May be Grainy, But Stays Fast!
  87. 87. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Final Results
  88. 88. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Final Results (Bonus)
  89. 89. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Final Results
  90. 90. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Final run
  91. 91. ©2014 AKAMAI | FASTER FORWARDTM
  92. 92. ©2014 AKAMAI | FASTER FORWARDTM Final Recommendations 1. Use a responsive image solution (like <picture />) 2. Prevent downloading hidden & below the fold images 3. Inline critical css 4. Use conditional loading for CSS & JS (to avoid hidden SPOF issues) 5. Implement RESS to reduce DOM complexity • Integrate with your CDN for maximum offload 6. Adaptive Images to Browser and Network conditions
  93. 93. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM
  94. 94. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Thank-You @ColinBendell ©2014 AKAMAI | FASTER FORWARDTM

×