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 EU 2014: Responsive & Fast (Iterating Live)

793 views

Published on

This 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

  • Be the first to like this

Velocity EU 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. Wait! That’s 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://nocdn.edge-rwd.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/cac he/1/image/9df78eab33525d08d6e5fb8d27136e95/2/8/2880411400_2_1_1.j pg" alt="Linen Blazer" title="Linen Blazer" /> <img id="image-0" class="gallery-image" src="http://magentor.example.com/magento/media/catalog/product/cac he/1/image/1200x/040ec09b1e35df139433887a97daa66f/m/s/msj012t_2.jp g"
  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/.../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/.../m/s/msj012t_2.jpg" data-zoom-image="/magento/media/catalog/product/cache/1/image/1200x/.../m/s/ msj012t_2.jpg"/> <img id="image-1" class="gallery-image" src="/magento/media/catalog/product/cache/1/image/1200x/.../m/s/msj012a_2.jpg" data-zoom-image="/magento/media/catalog/product/cache/1/image/1200x/.../m/s/ msj012a_2.jpg" />
  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 type="text/javascript"> // Picture element HTML5 shiv document.createElement( "picture" ); </script> ... <div class="product-image-gallery"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(min-width: 801px)" srcset=“2880411400_2_1_1.jpg?resize=600:*"/> <source media="(min-width: 641px)" srcset=“2880411400_2_1_1.jpg?resize=500:*"> <!--[if IE 9]></video><![endif]--> <img id="image-main" class="gallery-image visible" src="2880411400_2_1_1.jpg?resize=400:*" alt="Linen Blazer" title="Linen Blazer" data-zoom-image="2880411400_2_1_1.jpg?resize=1200:*" /> </picture>
  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. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM
  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 Using SrcSet Correctly… <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" srcset="/magento/media/catalog/product/cache/1/image/400x/040ec09b1e35df139433887 a97daa66f/2/8/2880411400_2_1_1.jpg 400w, /magento/media/catalog/product/cache/1/image/500x/040ec09b1e35df139433887 a97daa66f/2/8/2880411400_2_1_1.jpg 500w, /magento/media/catalog/product/cache/1/image/600x/040ec09b1e35df139433887 a97daa66f/2/8/2880411400_2_1_1.jpg 600w" alt="Linen Blazer" title="Linen Blazer" data-zoom-image=“/
  36. 36. 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 Original Start Render: 6.4s Doc Complete: 18.9s Fully Loaded: 28s w/ Picture Start Render: 7.7s Doc Complete: 15.9 Fully Loaded: 22.7s
  37. 37. 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
  38. 38. ©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 //Chrome38 Released 7-Oct
  39. 39. ©2014 AKAMAI | FASTER FORWARDTM Hidden Images Still Downloaded
  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 Solution: (Client-Side) Conditional Loading If Then
  41. 41. 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 alt="Roller Suitcase" src="/magento/media/catalog/product/cache/1/small_image/280x/9df78eab33525d08 d6e5fb8d27136e95/a/b/abl005a_1.jpg" /> </a> <h3 class="product-name"> <a href="/magento/isla-crossbody-handbag.html" title="Isla Crossbody Handbag">Isla Crossbody Handbag</a></h3>
  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 Magento Updated v2 <script> function loadRealUpSell(img) { if (!img) return; if (img.offsetParent != null) { // Implies hidden 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"><li> <a href="/magento/isla-crossbody-handbag.html" title="Isla Crossbody Handbag" class="product-image"> <img alt="Roller Suitcase" data-src="/ magento/media/catalog/product/cache/1/small_image/280x/9df78eab33525d08d6e5fb8d 27136e95/a/b/abl005a_1.jpg" src="/magento/media/catalog/product/1x1.gif" onload="loadRealUpSell(this);" />
  43. 43. ©2014 AKAMAI | FASTER FORWARDTM Conditional Load CSS Hidden Images • Demo
  44. 44. 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 Conditional Load Start Render: 7.5s Doc Complete: 14s Fully Loaded: 21.4s Original Start Render: 6.4s Doc Complete: 18.9s Fully Loaded: 28s w/ Picture Start Render: 7.7s Doc Complete: 15.9 Fully Loaded: 22.7s
  45. 45. ©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!
  46. 46. ©2014 AKAMAI | FASTER FORWARDTM Problem: Images Below the Fold Not Shown
  47. 47. 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" />
  48. 48. ©2014 AKAMAI | FASTER FORWARDTM On Demand (lazyload) Images • Demo
  49. 49. ©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
  50. 50. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM
  51. 51. 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
  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 Problem: Unnecessary CSS Loaded !=
  53. 53. 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: 320px) { @media only screen and (max-width: 420px) { @media only screen and (max-width: 450px) { @media only screen and (max-width: 479px) { @media only screen and (max-width: 499px) { @media only screen and (max-width: 520px) { Avoid data theft and downtime by extending the @media only screen and (max-width: 530px) { security perimeter outside the data-center and @media only screen and (max-width: 535px) { @media only screen and (max-width: 599px) { protect from increasing frequency, scale and @media only screen and (max-width: 600px) { @media only screen and (max-width: 620px) { sophistication of web attacks. @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 (max-width: 1000px) { @media only screen and (max-width: 1199px) { @media only screen and (max-width: 1279px) { ©2014 AKAMAI | FASTER FORWARDTM @media only screen and (min-width: 1126px) {
  54. 54. 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]-->
  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 Magento RWD Styles.css Breakdown Reality: Most RWD sites aren’t mobile first
  56. 56. Problem: Media queries don’t prevent CSS downloads Resolution: 320x480 ©2014 AKAMAI | FASTER FORWARDTM “Right” CSS loaded “Wrong” CSS loaded
  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 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); } }
  58. 58. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM
  59. 59. 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 On Demand CSS Start Render: 9.2s Doc Complete: 12.7s Fully Loaded: 20.4s Conditional Load Start Render: 7.5s Doc Complete: 14s Fully Loaded: 21.4s Original Start Render: 6.4s Doc Complete: 18.9s Fully Loaded: 28s
  60. 60. ©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
  61. 61. ©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
  62. 62. 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> <title>Linen Blazer</title> </head> <body> ... <link rel="stylesheet" type="text/css" href="/magento/skin/frontend/rwd/default/css/styles-min.css" media="all"/> </body>
  63. 63. 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 Critical CSS Start Render: 7.2s Doc Complete: 13.4s Fully Loaded: 20.9s Conditional Load Start Render: 7.5s Doc Complete: 14s Fully Loaded: 21.4s Original Start Render: 6.4s Doc Complete: 18.9s Fully Loaded: 28s
  64. 64. ©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
  65. 65. ©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
  66. 66. ©2014 AKAMAI | FASTER FORWARDTM Problem: Hidden SPOF Regular Day (Desktop) Twitter Down (Desktop) Regular Day (Mobile) Twitter Down (Mobile)
  67. 67. data-src=”/magento/skin/frontend/rwd/default/js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.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>
  68. 68. 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 Conditional JS Start Render: 6.8s Doc Complete: 10.5s Fully Loaded: 17.5s Critical CSS Start Render: 7.2s Doc Complete: 13.4s Fully Loaded: 20.9s Original Start Render: 6.4s Doc Complete: 18.9s Fully Loaded: 28s
  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 No Hidden SPoF!
  70. 70. 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
  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 Problem: Hidden DOM impacts download
  72. 72. ©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
  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 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; ?>
  74. 74. ©2014 AKAMAI | FASTER FORWARDTM REsponsive Server Side • Demo
  75. 75. 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
  76. 76. 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 RESS Start Render: 6.8s Doc Complete: 10.1s Fully Loaded: 17s Conditional JS Start Render: 6.8s Doc Complete: 10.5s Fully Loaded: 17.5s Original Start Render: 6.4s Doc Complete: 18.9s Fully Loaded: 28s
  77. 77. ©2014 AKAMAI | FASTER FORWARDTM Solution: RESS with Akamai ● 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
  78. 78. 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 $_mobile_regex = '!is_mobile=true!i'; $_device_characteristics = $_SERVER['X-Akamai-Device-Characteristics']; $_is_mobile = false; if (preg_match($_mobile_regex, $_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; ?>
  79. 79. ©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)
  80. 80. ©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
  81. 81. 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>
  82. 82. 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)
  83. 83. 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)
  84. 84. 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+
  85. 85. 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
  86. 86. 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 WebP Start Render: 6.4s Doc Complete: 9.4s Fully Loaded: 16.2s RESS Start Render: 6.8s Doc Complete: 10.1s Fully Loaded: 17s Original Start Render: 6.4s Doc Complete: 18.9s Fully Loaded: 28s
  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 Bonus: Image Transcoder
  88. 88. Bonus: Image Transcoder for Resize & Compression • Deliver a browser specific version of a requested image ©2014 AKAMAI | FASTER FORWARDTM • Reduce the “noise” in the <picture> tag • Provides backward compatibility for all browsers • Ensures all images apply best practices (remove EXIF, progressive, etc)
  89. 89. ©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!
  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 Results
  91. 91. 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) WebP Start Render: 6.4s Doc Complete: 9.4s Fully Loaded: 16.2s Original Start Render: 6.4s Doc Complete: 18.9s Fully Loaded: 28s Akamaized Start Render: 1.4s Doc Complete: 3.2s Fully Loaded: 10s
  92. 92. 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 Original RWD Optimized +Akamaized
  93. 93. ©2014 AKAMAI | FASTER FORWARDTM
  94. 94. ©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
  95. 95. 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 Free Copy bit.ly/rf-free
  96. 96. 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

×