edge 2014: responsive & fast: iterating live on modern rwd sites
DESCRIPTION
Responsive & Fast: Iterating Live on Modern RWD Sites by Colin Bendell, Web Technology Evangelist, Akamai Technologies Not all RWD sites are made equal – they come in all shapes and sizes. It is easy to demo Responsive on simple and beautiful sites and overlook performance. However, the reality is that the average real-world RWD site is slower and heavier than their mobile counterparts. In many situations, the daunting task of performance optimization is pushed out by business requirements and timelines. Improving the performance for RWD sites doesn't have to be difficult or time consuming! This workshop will show how we can take a Responsive site and by making key changes can 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. Akamai Edge is the premier event for Internet innovators, tech professionals and online business pioneers who together are forging a Faster Forward World. At Edge, the architects, experts and implementers of the most innovative global online businesses gather face-to-face for an invaluable three days of sharing, learning and together pushing the limits of the Faster Forward World. Learn more at: http://www.akamai.com/edgeTRANSCRIPT
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