Velocity 2014: Responsive & Fast (iterating live)

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

Responsive & Fast:Iterating Live

@ColinBendell

“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 ResolutionFrom testing ~500 live RWD sites

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

Over-Downloading: Bytes Per Pixel Served

Average RWD Bytes Served Per PixelFrom 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

You’re talking 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

• 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://ec2-54-190-59-81.us-west-2.compute.amazonaws.com/magento/

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

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 weightTim Kadlec:

Solution: Responsive Images

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

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/9df78eab33525d08d6e5fb8d27136e95/2/8/2880411400_2_1_1.jpg" alt="Linen Blazer" title="Linen Blazer" />

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>

<picture><source media="(min-width: 801px)"

srcset=“/magento/media/catalog/product/cache/1/image/600x/040ec09b1e35df139433887a97daa66f/2/8/2880411400_2_1_1.jpg"/>

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

Magento Updated (v1)<picture>

<source media="(min-width: 801px)"

srcset=“/magento/media/catalog/product/cache/1/image/600x/040ec09b1e35df139433887a97daa66f/2/8/2880411400_2_1_1.jpg"/>

<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

Start Render: 6.4sDoc Complete: 18.9sFully Loaded: 28s

Start Render: 7.7sDoc Complete: 15.9Fully 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

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

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

Demo 2: Conditional Load CSS Hidden Images

• Demo

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

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

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

Demo 2b: On Demand (lazyload) Images

• Demo

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

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

4. Solution: Split CSS by Media Query<link rel="stylesheet" type="text/css" href=”/magento/skin/frontend/rwd/default/css/styles.css” />

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

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

Start Render: 9.2sDoc Complete: 12.7sFully 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><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>

Inline Critical CSS: Results

WPT Results

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 SPOFRegular Day (Desktop)

Twitter Down (Desktop)

Regular Day (Mobile)

Twitter Down (Mobile)

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:

Conditional Load JS: Results

WPT Results

No Hidden SPoF!

RESSREsponsive + 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

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

RESS can reduce DOM complexity

Before After

RESS: Results

WPT Results

Start Render: 6.8sDoc Complete: 10.1sFully Loaded: 17 s

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)

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

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

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

12.1+4+23+

Solution: Auto Image Selection

Jpg2000

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

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)

Bonus: Adjust Based on Network Conditions

Quality: 100%Size: 101KB

Excellent

Average

Throughput: HighSize: 85KB (Q: 90)

Throughput: MedSize: 35KB (Q: 40)

Throughput: LowSize: 13KB (Q: 20)

May be Grainy,

Stays Fast!

Final Results

Final Results (Bonus)

Final Results

Final run

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

Thank-You@ColinBendell

Velocity 2014: Responsive & Fast (iterating live)

Technology

Transcript of Velocity 2014: Responsive & Fast (iterating live)

eproc.punjab.gov.pk · 20 Service Manual with soft copy. *Technical Eligibility of Product 22 Decision of TAC Eligible Respons ive Responsive Responsive Responsive Responsive Responsive

The Construction of Rational Iterating Functions

Continuous evolution - iterating to a continuous delivery platform

The Agency Mercurial: Iterating on an Old Model

Testing, Iterating and Validating Your Business Model Canvas

Venture Design II Iterating to Success

iterating detox

Time-Optimal Control by Iterating Forward and Backward in Time

Responsive Design - Magento · Responsive Design . 16-fold growth in responsive ecommerce . Responsive Design is a won debate •3 types of audience •Tried and tested base responsive

Iterating an Innovation Model: Challenges and Opportunities in Adapting Accelerator Practices in Evolving Ecosystems (Presentation)

Velocity EU: Give Responsive Design a Mobile Performance Boost

Iterating the weighted average cost of capital (2) linked in

Agile 2015 Prototyping - Iterating Your Way to Glory

Velocity Law...Velocity Law

Relationship of Club Handle Twist Velocity · Angular Velocity Clubhead Linear Velocity Clubhead Swing Plane Velocity Clubhead Closing Velocity Clubhead Velocity at Impact Attack

Iterating over a Tree Structure Binary Search Trees 1Binary Search Trees Data Structures & File Management Iterating over a Tree Structure Iterating over linear structures (lists,

Iterating-grace Digitized Small

content Authoring For Responsive Design - MadCap …assets.madcapsoftware.com/webinar/Presentation... · Content Authoring for Responsive Design . ... • Responsive Design ... RESPONSIVE

MODULE 2: CULTURALLY RESPONSIVE PEDAGOGY AND PRACTICE Academy 2: Culturally Responsive ... · · 2009-07-03Academy 2: Culturally Responsive Classrooms ... Culturally Responsive

Responsive eLearning Design and Developmentsifytechnologies.com/.../2017/06/Responsive-Design-and-Development... · Responsive eLearning Design and Development ... Enter Responsive