Edge 2014: Responsive & Fast: Iterating Live on Modern RWD Sites
-
Upload
akamai-technologies -
Category
Technology
-
view
460 -
download
1
description
Transcript of Edge 2014: Responsive & Fast: Iterating Live on Modern RWD Sites
Responsive & Fast: Iterating Live @ColinBendell
©2014 AKAMAI | FASTER FORWARDTM
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
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
Hai Mom
©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
©2014 AKAMAI | FASTER FORWARDTM
Chrome on 3G hotspot
• Doc Complete: 17.57s • Fully Loaded: 24.34s
©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
©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
©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
©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
©2014 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)
©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
©2014 AKAMAI | FASTER FORWARDTM
What this Talk is not
• Mobile Performance • UI / UX Performance • Subsystem Performance (DOM, WebGL, GPU …) • How to setup a WPT
©2014 AKAMAI | FASTER FORWARDTM
Our Test Environment
• Magento CE 1.9 • Sample Data 1.9 • Theme: rwd • Plugins: AddShoppers,
YotPo, Recommender
• http://www-rwd.edge-rwd.com/ • http://magento.example.com/
Source: Builtwith
©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
©2014 AKAMAI | FASTER FORWARDTM
Initial run
[WPT Initial Run]
©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
©2014 AKAMAI | FASTER FORWARDTM
Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Images
©2014 AKAMAI | FASTER FORWARDTM
How Does Our Test Compare with WPT?
©2014 AKAMAI | FASTER FORWARDTM
Test: No Images!
©2014 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/9df78eab33525d08d6e5fb8d27136e95/2/8/2880411400_2_1_1.jpg" alt="Linen Blazer" title="Linen Blazer" /> <img id="image-‐0" class="gallery-‐image" src="http://magentor.example.com/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887a97daa66f/m/s/msj012t_2.jpg" data-‐zoom-‐image="http://magentor.example.com/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887a97daa66f/m/s/msj012t_2.jpg" /> <img id="image-‐1" class="gallery-‐image" src="http://magentor.example.com/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887a97daa66f/m/s/msj012a_2.jpg" data-‐zoom-‐image="http://magentorwd.edgesuite.net/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887a97daa66f/m/s/msj012a_2.jpg" />
©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
©2014 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)
©2014 AKAMAI | FASTER FORWARDTM
Responsive Images over 471 Websites
Why do we need Responsive Images?
72% less image weight Tim Kadlec:
©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>
©2014 AKAMAI | FASTER FORWARDTM
Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection.
©2014 AKAMAI | FASTER FORWARDTM
Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. <picture>
(drama not included)
©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>
©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>
©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>
©2014 AKAMAI | FASTER FORWARDTM
Demo 1: Responsive Images with <picture>
• Demo
©2014 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/.../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" />
©2014 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 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>
©2014 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/2880411400_2_1_1.jpg"/> <source media="(min-‐width: 641px)" srcset=“/magento/media/catalog/product/
cache/1/image/500x/040ec09b1e35df139433887a97daa66f/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/
040ec09b1e35df139433887a97daa66f/2/8/2880411400_2_1_1.jpg" alt="Linen Blazer" title="Linen Blazer"
data-‐zoom-‐image=“/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887a97daa66f/2/8/2880411400_2_1_1.jpg" /> </picture>
©2014 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 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
©2014 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
©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
©2014 AKAMAI | FASTER FORWARDTM
Hidden Images Still Downloaded
©2014 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
©2014 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 alt="Roller Suitcase"
src="/magento/media/catalog/product/cache/1/small_image/280x/9df78eab33525d08d6e5fb8d27136e95/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>
©2014 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"><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/9df78eab33525d08d6e5fb8d27136e95/a/b/abl005a_1.jpg"
src="/magento/media/catalog/product/1x1.gif" onload="loadRealUpSell(this);" />
©2014 AKAMAI | FASTER FORWARDTM
Conditional Load CSS Hidden Images
• Demo
©2014 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
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
©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!
©2014 AKAMAI | FASTER FORWARDTM
Problem: Images Below the Fold Not Shown
©2014 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/9df78eab33525d08d6e5fb8d27136e95/a/b/abl0008.jpg" alt="Luggage Set" />
©2014 AKAMAI | FASTER FORWARDTM
On Demand (lazyload) Images
• Demo
©2014 AKAMAI | FASTER FORWARDTM
On Demand Images: Caveats & Notes
• OnDemand can be automated with 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
©2014 AKAMAI | FASTER FORWARDTM
Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection.
©2014 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
©2014 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
!=
©2014 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-‐pixel-‐ratio: 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) { @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 (max-‐width: 1000px) { @media only screen and (max-‐width: 1199px) { @media only screen and (max-‐width: 1279px) { @media only screen and (min-‐width: 1126px) {
©2014 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.
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]-‐-‐>
©2014 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
©2014 AKAMAI | FASTER FORWARDTM
Problem: Media queries don’t prevent CSS downloads
Resolution: 320x480
“Wrong” CSS loaded
“Right” CSS loaded
©2014 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>
©2014 AKAMAI | FASTER FORWARDTM
Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection.
©2014 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
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
©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
©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
©2014 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, 255); } body, button, input, select, table, textarea { font-‐family: 'Helvetica Neue', Verdana, Arial, sans-‐serif; color: rgb(99, 99, 99); font-‐size: 14px; line-‐height: 1.5; } .wrapper { min-‐width: 320px; min-‐height: 100%; margin: 0px auto; background: rgb(255, 255, 255); } .header-‐language-‐background { padding: 10px; text-‐transform: uppercase; background-‐color: rgb(51, 153, 204); display: none; } .header-‐language-‐background, .header-‐language-‐background a { color: rgb(230, 230, 230); } .header-‐language-‐container, .page-‐header { font-‐family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-‐serif; } .header-‐language-‐background .header-‐language-‐container { max-‐width: 1200px; margin-‐left: auto; margin-‐right: auto; }
... </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>
©2014 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
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
©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
©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
©2014 AKAMAI | FASTER FORWARDTM
Problem: Hidden SPOF Regular Day (Desktop)
Twitter Down (Desktop)
Regular Day (Mobile)
Twitter Down (Mobile)
©2014 AKAMAI | FASTER FORWARDTM
Solution: Conditional Loading JS (& CSS)
“… condiFonal 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>
©2014 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
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
©2014 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!
©2014 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
©2014 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
©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
©2014 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; ?>
©2014 AKAMAI | FASTER FORWARDTM
REsponsive Server Side
• Demo
©2014 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
©2014 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
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
©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
©2014 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 $_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; ?>
©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 Akamai to utilize the same RESS logic
• (Otherwise you will have cache collisions)
©2014 AKAMAI | FASTER FORWARDTM
O
THER
T
AB
LET
Is Bucketing by ‘Characteristic’ Enough?
What about? • HTML 5 vs 4? • Device Model? • Browser Family? • GPS support? • Pixel Density? • Etc…
MO
BIL
E
©2014 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) & $(BRAND_NAME == 'Chrome')"> <link href="tablet.css" type="text/css" /> <script src="/utils/tablet.js" type="text/javascript"></script> </esi:when> </esi:choose>
©2014 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
©2014 AKAMAI | FASTER FORWARDTM
Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection.
Images (Redux)
©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 OpenJPEG
10+
12.1+ 4+ 23+
6+ 6+
©2014 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
©2014 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
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
©2014 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 Converter
©2014 AKAMAI | FASTER FORWARDTM
Bonus: Image Converter for Resize & Compression
• Deliver a browser specific version of a requested image
• Reduce the “noise” in the <picture> tag
• Provides backward compatibility for all browsers
• Ensures all images apply best practices (remove EXIF, progressive, etc)
©2014 AKAMAI | FASTER FORWARDTM
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!
©2014 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
©2014 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)
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
©2014 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
Original RWD Optimized +Akamaized
©2014 AKAMAI | FASTER FORWARDTM
©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 Akamai for maximum offload
6. Adaptive Images to Browser and Network conditions
©2014 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
©2014 AKAMAI | FASTER FORWARDTM
Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Thank-You
@ColinBendell