velocity eu 2014: responsive & fast (iterating live)
DESCRIPTION
This workshop will show how we can take a Responsive site and by making key changes improve the performance for different screens resolutions, network conditions and devices. We will take a “naïve” RWD site, transform it, and make it fast using commonly available tools and techniques before your very eyes.TRANSCRIPT
©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.
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://nocdn.edge-rwd.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-
©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/.../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 shivdocument.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
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.
Using SrcSet Correctly…
<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"
srcset="/magento/media/catalog/product/cache/1/image/400x/040ec09b1e35df139433887a97daa66f/2/8/2880411400_2_1_1.jpg 400w,
/magento/media/catalog/product/cache/1/image/500x/040ec09b1e35df139433887a97daa66f/2/8/2880411400_2_1_1.jpg 500w,
/magento/media/catalog/product/cache/1/image/600x/040ec09b1e35df139433887a97daa66f/2/8/2880411400_2_1_1.jpg 600w"
alt="Linen Blazer"title="Linen Blazer"data-zoom-
image=“/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887
©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 ResultsOriginal
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 CrossbodyHandbag">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
• 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-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 matchesvar 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.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: .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.header-language-background .header-language-container { max-width: 1200px; margin-left: auto; margin
...</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)
“… 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 matchesvar 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 your CDN to utilize the same RESS logic
• (Otherwise your CDN will not cache or have cache collisions)
©2014 AKAMAI | FASTER FORWARDTM
OT
HE
RTA
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 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
BrowsersMaybe jxrlib
JPEG
2000-30% N/A
In 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
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 Transcoder
©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
Average
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)
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 your CDN 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