©2014 AKAMAI | FASTER FORWARD TM Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Responsive & Fast: Iterating Live @ColinBendell
Dec 09, 2014
©2014 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
@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 ResolutionFrom 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 PixelFrom 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.
You’re talking 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://ec2-54-190-59-81.us-west-2.compute.amazonaws.com/magento/
• 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 weightTim 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/9df78eab33525d08d6e5fb8d27136e95/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/040ec09b1e35df139433887a97daa66f/m/s/msj012t_2.jpg”/> <img id="image-1" class="gallery-image" src="/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887a97daa66f/m/s/msj012a_2.jpg" data-zoom-image="/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887a97daa66f/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><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/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="http://ec2-54-190-59-81.us-west-2.compute.amazonaws.com/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="http://ec2-54-190-59-81.us-west-2.compute.amazonaws.com/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.
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
Start Render: 6.4sDoc Complete: 18.9sFully Loaded: 28s
Start Render: 7.7sDoc Complete: 15.9Fully 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
©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 src="/magento/media/catalog/product/cache/1/small_image/280x/9df78eab33525d08d6e5fb8d27136e95/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>
©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) {
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/9df78eab33525d08d6e5fb8d27136e95/a/b/abl005a_1.jpg" alt="Roller Suitcase" src="/magento/media/catalog/product/1x1.gif" onload="loadRealUpSell(this);" />
©2014 AKAMAI | FASTER FORWARDTM
Demo 2: 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
Start Render: 7.7sDoc Complete: 15.9Fully Loaded: 22.7s
Start Render: 7.5sDoc Complete: 14sFully Loaded: 21.4s
©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
Demo 2b: On Demand (lazyload) Images
• Demo
©2014 AKAMAI | FASTER FORWARDTM
On Demand Images: Caveats & Notes
• Many automated solutions offer lazyload• Eg: Google PageSpeed, Akamai FEO
• Existing lazyload solutions may need to be updated may not interact with final <picture> supported browsers• Picture Polyfill + Lazyload scripts need to be carefully Use
solutions such as Picturefill 2 and lazyloading
©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: 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) {
©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
Start Render: 7.5sDoc Complete: 14sFully Loaded: 21.4s
Start Render: 9.2sDoc Complete: 12.7sFully Loaded: 20.4s
©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><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>
©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
Start Render: 7.5sDoc Complete: 14sFully Loaded: 21.4s
Start Render: 7.2sDoc Complete: 13.4sFully Loaded: 20.9s
©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 SPOFRegular Day (Desktop)
Twitter Down (Desktop)
Regular Day (Mobile)
Twitter Down (Mobile)
©2014 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>
©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
Start Render: 7.2sDoc Complete: 13.4sFully Loaded: 20.9s
Start Render: 6.8sDoc Complete: 10.5sFully Loaded: 17.5s
©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.
RESSREsponsive + 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
MobileContent 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
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
Before After
©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
Start Render: 6.8sDoc Complete: 10.5sFully Loaded: 17.5s
Start Render: 6.8sDoc Complete: 10.1sFully Loaded: 17 s
©2014 AKAMAI | FASTER FORWARDTM
RESS Notes & Caveats
• Vary: User-Agent to avoid SEO Cloaking• Cache-Control: Private to avoid cache collision by Proxy• Pre-instruct your CDN to utilize the same RESS logic
• (Otherwise your CDN will not cache or have cache collisions)
©2014 AKAMAI | FASTER FORWARDTM
Solution: RESS with CDN
● Identify Common Devices○ Or common properties of devices
● Optimize for those devices○ RWD, even if not 100% Client Side
● Example: Akamai EDC & Property Manager
○ Device Properties sent as header
○ Origin returns correct content
○ Cache key includes mobile property
©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$_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; ?>
©2014 AKAMAI | FASTER FORWARDTM
OT
HE
R
TA
BL
ET
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 vsJPEG
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/AIn Spec, not
BrowsersMaybe jxrlib
JPEG 2000
-30% N/AIn Spec, not
BrowsersMaybe OpenJP
EG
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
Start Render: 6.8sDoc Complete: 10.1sFully Loaded: 17 s
Start Render: 6.4sDoc Complete: 9.4sFully Loaded: 16.2 s
©2014 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)
©2014 AKAMAI | FASTER FORWARDTM
Bonus: Adjust Based on Network Conditions
Quality: 100%Size: 101KB
Excellent
Average
Poor
Throughput: HighSize: 85KB (Q: 90)
Throughput: MedSize: 35KB (Q: 40)
Throughput: LowSize: 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)
©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 run
©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 your CDN for maximum offload
6. Adaptive Images to Browser and Network conditions
©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.
Thank-You@ColinBendell