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.

Michael Gooding

March 03, 2015
Tweet

More Decks by Michael Gooding

Other Decks in Technology

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 Over-Downloading: Bytes Per Pixel Served

    Average RWD Bytes Served Per Pixel From testing ~500 live RWD sites Source: http://goo.gl/0C0tLD
  10. ©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
  11. ©2015 AKAMAI | FASTER FORWARDTM What this Talk is not

    • Mobile Performance • UI / UX Performance • How to setup a WPT
  12. ©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
  13. ©2015 AKAMAI | FASTER FORWARDTM Chrome on 3G hotspot •

    Doc Complete: 17.57s • Fully Loaded: 24.34s
  14. ©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
  15. ©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
  16. ©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)
  17. ©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
  18. ©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
  19. ©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
  20. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Images
  21. ©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"
  22. ©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
  23. ©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)
  24. ©2015 AKAMAI | FASTER FORWARDTM Responsive Images over 471 Websites

    Why do we need Responsive Images? 72% less image weight Tim Kadlec:
  25. ©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>
  26. ©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
  27. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. <picture>
  28. ©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>
  29. ©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>
  30. ©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>
  31. ©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"
  32. ©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]-->
  33. ©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>
  34. ©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
  35. ©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
  36. ©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
  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. Solution: (Client-Side) Conditional Loading If Then
  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 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>
  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. 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);" />
  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. 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
  41. ©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!
  42. ©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" />
  43. ©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
  44. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection.
  45. ©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
  46. ©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 !=
  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. 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) {
  48. ©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]-->
  49. ©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
  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. 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>
  51. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection.
  52. ©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
  53. ©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
  54. ©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
  55. ©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>
  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. 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
  57. ©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
  58. ©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
  59. ©2015 AKAMAI | FASTER FORWARDTM Problem: Hidden SPOF Regular Day

    (Desktop) Twitter Down (Desktop) Regular Day (Mobile) Twitter Down (Mobile)
  60. ©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>
  61. ©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
  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. No Hidden SPoF!
  63. ©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
  64. ©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
  65. ©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
  66. ©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; ?>
  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. RESS can reduce DOM complexity
  68. ©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
  69. ©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)
  70. ©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
  71. ©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; ?>
  72. ©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
  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. 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>
  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. Instead of 3 Sources, 1 Source with ∞ Permutations Edge Origin is_mobile is_tablet (other) <ESI> decorated
  75. ©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)
  76. ©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+
  77. ©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
  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. 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
  79. ©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
  80. ©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)
  81. ©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!
  82. ©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
  83. ©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)
  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. Final Results
  85. ©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
  86. ©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
  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. Free Copy bit.ly/rf-free
  88. ©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