edge 2014: responsive & fast: iterating live on modern rwd sites

Responsive & Fast: Iterating Live @ColinBendell

Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection.

“Going Responsive” was long overdue

Alas, we can’t just destroy and rebuild

Hai Mom

Chrome on Cable

•  Doc Complete: 5.2s •  Fully Loaded: 8.93s •  Total Bytes: 2,951 KB •  Display Cost: 2.09B/pixel

Chrome on 3G hotspot

•  Doc Complete: 17.57s •  Fully Loaded: 24.34s

MotoG on 3G hotspot

•  Doc Complete: 18.88s •  Fully Loaded: 27.96s •  Total Bytes: 2,752 KB •  Display Cost: 11.9B/pixel

State of Responsive Sites

Average RWD Page Size, by Resolution From testing ~500 live RWD sites

Source: http://goo.gl/0C0tLD

Over-Downloading: Bytes Per Pixel Served

Average RWD Bytes Served Per Pixel From testing ~500 live RWD sites

Source: http://goo.gl/0C0tLD

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

Wait! That’s Adaptive, not Responsive! (I don’t care)

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

What this Talk is not

•  Mobile Performance •  UI / UX Performance •  Subsystem Performance (DOM, WebGL, GPU …) •  How to setup a WPT

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

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

Initial run

[WPT Initial Run]

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

Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Images

How Does Our Test Compare with WPT?

Test: No Images!

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" />

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

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)

Responsive Images over 471 Websites

Why do we need Responsive Images?

72% less image weight Tim Kadlec:

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>

Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. <picture>

(drama not included)

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>

Demo 1: Responsive Images with <picture>

•  Demo

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" />

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>

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>

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

Responsive Images: Results

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

Hidden Images Still Downloaded

Solution: (Client-Side) Conditional Loading

If Then

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>

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);" />

Conditional Load CSS Hidden Images

•  Demo

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

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!

Problem: Images Below the Fold Not Shown

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" />

On Demand (lazyload) Images

•  Demo

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

Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. CSS / JS / DOM

Problem: Unnecessary CSS Loaded

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) {

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]-‐-‐>

Magento RWD Styles.css Breakdown

Reality: Most RWD sites aren’t mobile first

Problem: Media queries don’t prevent CSS downloads

Resolution: 320x480

“Wrong” CSS loaded

“Right” CSS loaded

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)" />

On Demand CSS: Results

WPT Results

On Demand CSS Start Render: 9.2s Doc Complete: 12.7s Fully Loaded: 20.4s

Render Blocking CSS

Inline above-‐the-‐fold CSS to speed the page render.

Ilya Grigorik

Critical Path CSS

Non Priority CSS

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

*, ::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>

Inline Critical CSS: Results

WPT Results

Critical CSS Start Render: 7.2s Doc Complete: 13.4s Fully Loaded: 20.9s

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

Problem: Hidden JavaScript (just like Photos)

Width Num JS Reqs Num JS Bytes

320px 11 133 KB 1600px 10 125 KB

Problem: Hidden SPOF Regular Day (Desktop)

Twitter Down (Desktop)

Regular Day (Mobile)

Twitter Down (Mobile)

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:

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

No Hidden SPoF!

RESS REsponsive + Server Side

Problem: Hidden DOM impacts download

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

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; ?>

REsponsive Server Side

•  Demo

RESS can reduce DOM complexity

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

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

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; ?>

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)

Is Bucketing by ‘Characteristic’ Enough?

What about? •  HTML 5 vs 4? •  Device Model? •  Browser Family? •  GPS support? •  Pixel Density? •  Etc…

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>

Instead of 3 Sources, 1 Source with ∞ Permutations

Edge Origin

is_mobile is_tablet

(other)

<ESI> decorated

Images (Redux)

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

12.1+ 4+ 23+

Solution: Auto Image Selection

Jpg2000

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

Bonus: Image Converter

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)

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!

Final Results

Final Results (Bonus)

WebP Start Render: 6.4s Doc Complete: 9.4s Fully Loaded: 16.2s

Akamaized Start Render: 1.4s Doc Complete: 3.2s Fully Loaded: 10s

Final Results

Original RWD Optimized +Akamaized

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

Free Copy bit.ly/rf-free

Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Thank-You

@ColinBendell

edge 2014: responsive & fast: iterating live on modern rwd sites

Technology

understanding responsive web design (rwd) & environment...

iterating detox

responsive web design (rwd) vs adaptive web design (awd)

best value in government websites -...

evaluate and prepare your rise site for the responsive...

iterating in a startup emory university

the construction of rational iterating functions

launch with confidence responsive web design what else is...

rwd: responsive web design. terms media queries svg...

sass breakpoints + responsive images + panels = rwd utopia

responsive (web) design (rwd) - mobile...

barbados tourism encyclopedia responsive web …€¦ ·...

iterating plone

velocity eu 2014: responsive & fast (iterating live)

responsive web design - diva portal631041/fulltext01.pdf ·...

future-proof responsive web design #rwd

responsive web design...

responsive web design (rwd) best practices...

responsive web design (rwd) with sass+compass

iterating - innovation practice