Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LDN Web Perf - RWD and Fast, iterating "live"

LDN Web Perf - RWD and Fast, iterating "live"

A live run through of a Magento eCommerce RWD site that performed badly on mobile. in the session we looked at quick ways we can improve the performance.

97e38d2c6636968957c178ae61d86184?s=128

Michael Gooding

March 03, 2015
Tweet

Transcript

  1. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Responsive & Fast: Iterating Live Michael Gooding & Ellen van Keulen
  2. ©2015 AKAMAI | FASTER FORWARDTM Why is responsive design so

    popular?  Gives users a good experience and makes sites easy(er) to use on mobile
  3. ©2015 AKAMAI | FASTER FORWARDTM Why is responsive design so

    popular?  Removes expensive redirects www.espn.com 2 redirects, 2.5 seconds lost (23% of page load time) Each Redirect requires at least 1 round-trip
  4. ©2015 AKAMAI | FASTER FORWARDTM Why is responsive design so

    popular?  It’s a single code base to manage Edge Mobile Origin Desktop Origin
  5. ©2015 AKAMAI | FASTER FORWARDTM Why is responsive design so

    popular?  Solves the issue of single URL’s e.g. Social media sharing
  6. ©2015 AKAMAI | FASTER FORWARDTM Why is responsive design so

    popular?  Allows for subtle differences between LOTS of devices Akamai sees 7,000+ devices each day
  7. ©2015 AKAMAI | FASTER FORWARDTM Why is responsive design so

    popular?  It is more future proof than any other current solutions
  8. ©2015 AKAMAI | FASTER FORWARDTM Why is responsive design so

    popular?  Google Tells us to do it  https://developers.google.com/webmasters/smartphone-sites/details
  9. ©2015 AKAMAI | FASTER FORWARDTM But how does it perform?

    …especially on mobile
  10. ©2015 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
  11. ©2015 AKAMAI | FASTER FORWARDTM Introducing our Guinea Pig! •

    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
  12. ©2015 AKAMAI | FASTER FORWARDTM What this Talk is not

    • Mobile Performance • UI / UX Performance • How to setup a WPT
  13. ©2015 AKAMAI | FASTER FORWARDTM Chrome on Cable • Doc

    Complete: 5.2s • Fully Loaded: 8.93s • Total Bytes: 2,951 KB • Display Cost: 2.09B/pixel
  14. ©2015 AKAMAI | FASTER FORWARDTM Chrome on 3G hotspot •

    Doc Complete: 17.57s • Fully Loaded: 24.34s
  15. ©2015 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
  16. ©2015 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
  17. ©2015 AKAMAI | FASTER FORWARDTM 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! (I don’t care)
  18. ©2015 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
  19. ©2015 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
  20. ©2015 AKAMAI | FASTER FORWARDTM Initial run [WPT Initial Run]

  21. ©2015 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
  22. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Images
  23. ©2015 AKAMAI | FASTER FORWARDTM How Does Our Test Compare

    with HTTP Archive?
  24. ©2015 AKAMAI | FASTER FORWARDTM Test: No Images!

  25. ©2015 AKAMAI | FASTER FORWARDTM 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. 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/9df78eab33525d 08d6e5fb8d27136e95/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/040ec09b 1e35df139433887a97daa66f/m/s/msj012t_2.jpg" data-zoom- image="http://magentor.example.com/magento/media/catalog/product/cache/1/image/1200x/040ec0 9b1e35df139433887a97daa66f/m/s/msj012t_2.jpg" /> <img id="image-1" class="gallery-image"
  26. ©2015 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
  27. ©2015 AKAMAI | FASTER FORWARDTM Strategies to Reduce Image Cost

    • No Images! • Use SVG • Use CSS • Change formats • Increase compression • Use different sized image for different viewport (Responsive Images) • (impractical) • (impractical) • (impractical; unexpected results) • (interesting, more later) • (a different talk)
  28. ©2015 AKAMAI | FASTER FORWARDTM Responsive Images over 471 Websites

    Why do we need Responsive Images? 72% less image weight Tim Kadlec:
  29. ©2015 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>
  30. ©2015 AKAMAI | FASTER FORWARDTM Responsive image options http://responsiveimages.org/ <img

    src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A rad wolf" /> Srcset Attribute Client Hints <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture> Picture Element
  31. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. <picture>
  32. ©2015 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>
  33. ©2015 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>
  34. ©2015 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>
  35. ©2015 AKAMAI | FASTER FORWARDTM Demo 1: Responsive Images with

    <picture> • Demo
  36. ©2015 AKAMAI | FASTER FORWARDTM 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. Magento Original <div class="product-image-gallery"> <img id="image-main" class="gallery-image visible" src="/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e 95/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/040ec09b1e35df139433887a97daa66f /m/s/msj012t_2.jpg" data-zoom- image=“/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df13943388 7a97daa66f/m/s/msj012t_2.jpg”/> <img id="image-1" class="gallery-image"
  37. ©2015 AKAMAI | FASTER FORWARDTM 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. 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]-->
  38. ©2015 AKAMAI | FASTER FORWARDTM 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. 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/040ec09b1e35df139433887a97daa66f/2/8/288 0411400_2_1_1.jpg"/> <source media="(min-width: 641px)" srcset=“/magento/media/catalog/product/cache/1/image/500x/040ec09b1e35df139433887a97daa66f/2/8/288 0411400_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/040ec09b1e35df139433887a97daa66f/2/8/288041 1400_2_1_1.jpg" alt="Linen Blazer" title="Linen Blazer" data-zoom- image=“/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887a97daa66f/2/8/288 0411400_2_1_1.jpg" /> </picture>
  39. ©2015 AKAMAI | FASTER FORWARDTM 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. 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
  40. ©2015 AKAMAI | FASTER FORWARDTM 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. Responsive Images: Results
  41. ©2015 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
  42. ©2015 AKAMAI | FASTER FORWARDTM Hidden Images Still Downloaded

  43. ©2015 AKAMAI | FASTER FORWARDTM 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. Solution: (Client-Side) Conditional Loading If Then
  44. ©2015 AKAMAI | FASTER FORWARDTM 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. 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>
  45. ©2015 AKAMAI | FASTER FORWARDTM 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. 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"> <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);" />
  46. ©2015 AKAMAI | FASTER FORWARDTM Conditional Load CSS Hidden Images

    • Demo
  47. ©2015 AKAMAI | FASTER FORWARDTM 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. 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
  48. ©2015 AKAMAI | FASTER FORWARDTM Conditional Load Images: Notes &

    Caveats • “onLoad” only fires if the 1x1.gif exists and loaded • Make sure you don’t have broken JavaScript or no images are shown • Resizing viewport or orientation changes require special attention and additional logic • Yet more JavaScript!
  49. ©2015 AKAMAI | FASTER FORWARDTM Problem: Images Below the Fold

    Not Shown
  50. ©2015 AKAMAI | FASTER FORWARDTM 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. 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/9df78eab33525d08d6e5fb 8d27136e95/a/b/abl0008.jpg" alt="Luggage Set" />
  51. ©2015 AKAMAI | FASTER FORWARDTM On Demand (lazyload) Images •

    Demo
  52. ©2015 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 careful – use solutions such as Picturefill 2 and lazyloading
  53. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection.
  54. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. CSS / JS / DOM
  55. ©2015 AKAMAI | FASTER FORWARDTM 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. Problem: Unnecessary CSS Loaded !=
  56. ©2015 AKAMAI | FASTER FORWARDTM 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. 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) { @media only screen and (max-width: 479px) { @media only screen and (max-width: 499px) { @media only screen and (max-width: 520px) { @media only screen and (max-width: 530px) { @media only screen and (max-width: 535px) { @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) {
  57. ©2015 AKAMAI | FASTER FORWARDTM 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. 4a. 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]-->
  58. ©2015 AKAMAI | FASTER FORWARDTM 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. Magento RWD Styles.css Breakdown Reality: Most RWD sites aren’t mobile first
  59. ©2015 AKAMAI | FASTER FORWARDTM Problem: Media queries don’t prevent

    CSS downloads
  60. ©2015 AKAMAI | FASTER FORWARDTM 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. 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); } } </script>
  61. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection.
  62. ©2015 AKAMAI | FASTER FORWARDTM 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. 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
  63. ©2015 AKAMAI | FASTER FORWARDTM Render Blocking CSS Inline above-the-fold

    CSS to speed the page render. Ilya Grigorik Critical Path CSS Non Priority CSS
  64. ©2015 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
  65. ©2015 AKAMAI | FASTER FORWARDTM Critical CSS • Demo

  66. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. <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, 2 body, button, input, select, table, textarea { font-family: 'Helvetica Neue', Verdan .wrapper { min-width: 320px; min-height: 100%; margin: 0px auto; background: rgb(255 .header-language-background { padding: 10px; text-transform: uppercase; background-c .header-language-background, .header-language-background a { color: rgb(230, 230, 23 .header-language-container, .page-header { font-family: Raleway, 'Helvetica Neue', V .header-language-background .header-language-container { max-width: 1200px; margin-l ... </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>
  67. ©2015 AKAMAI | FASTER FORWARDTM 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. 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
  68. ©2015 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
  69. ©2015 AKAMAI | FASTER FORWARDTM Problem: Hidden JavaScript (just like

    Photos) Width Num JS Reqs Num JS Bytes 320px 11 133 KB 1600px 10 125 KB
  70. ©2015 AKAMAI | FASTER FORWARDTM Problem: Hidden SPOF Regular Day

    (Desktop) Twitter Down (Desktop) Regular Day (Mobile) Twitter Down (Mobile)
  71. ©2015 AKAMAI | FASTER FORWARDTM Solution: Conditional Loading JS (&

    CSS) “… 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 type="text/javascript" data-src=”/magento/skin/frontend/rwd/default/js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js" data-mq="screen and (min-width:771px)" /> <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); } } </script>
  72. ©2015 AKAMAI | FASTER FORWARDTM JavaScript to Load JavaScript •

    Demo
  73. ©2015 AKAMAI | FASTER FORWARDTM 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. 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
  74. ©2015 AKAMAI | FASTER FORWARDTM 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. No Hidden SPoF!
  75. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. RESS REsponsive + Server Side
  76. ©2015 AKAMAI | FASTER FORWARDTM 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. Problem: Hidden DOM impacts download
  77. ©2015 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
  78. ©2015 AKAMAI | FASTER FORWARDTM 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. 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; ?>
  79. ©2015 AKAMAI | FASTER FORWARDTM REsponsive Server Side • Demo

  80. ©2015 AKAMAI | FASTER FORWARDTM 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. RESS can reduce DOM complexity
  81. ©2015 AKAMAI | FASTER FORWARDTM 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. 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
  82. ©2015 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)
  83. ©2015 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
  84. ©2015 AKAMAI | FASTER FORWARDTM 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. 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; ?>
  85. ©2015 AKAMAI | FASTER FORWARDTM OTHER TABLET Is Bucketing by

    ‘Characteristic’ Enough? What about? • HTML 5 vs 4? • Device Model? • Browser Family? • GPS support? • Pixel Density? • Etc… MOBILE
  86. ©2015 AKAMAI | FASTER FORWARDTM 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. 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>
  87. ©2015 AKAMAI | FASTER FORWARDTM 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. Instead of 3 Sources, 1 Source with ∞ Permutations Edge Origin is_mobile is_tablet (other) <ESI> decorated
  88. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Images (Redux)
  89. ©2015 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+ 12.1+ 4+ 23+ 6+ 6+
  90. ©2015 AKAMAI | FASTER FORWARDTM 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. Solution: Auto Image Selection WebP JXR Jpg2000 Jpg Jpg
  91. ©2015 AKAMAI | FASTER FORWARDTM 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. Adaptive Format: Results for Chrome & WebP 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
  92. ©2015 AKAMAI | FASTER FORWARDTM 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. Bonus: Image Transcoder
  93. ©2015 AKAMAI | FASTER FORWARDTM 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)
  94. ©2015 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!
  95. ©2015 AKAMAI | FASTER FORWARDTM 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. Final Results
  96. ©2015 AKAMAI | FASTER FORWARDTM 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. Final Results (Bonus “unnamed” CDN)
  97. ©2015 AKAMAI | FASTER FORWARDTM 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. Final Results
  98. ©2015 AKAMAI | FASTER FORWARDTM 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. Final run
  99. ©2015 AKAMAI | FASTER FORWARDTM

  100. ©2015 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
  101. ©2015 AKAMAI | FASTER FORWARDTM 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. Free Copy bit.ly/rf-free
  102. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Thank-You @Michael_G_81