Velocity EU 2014: Responsive & Fast (Iterating Live)

©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





“Going Responsive” was long overdue





Alas, we can’t just destroy and rebuild

Hai Mom

http://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.html


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




MotoG on 3G hotspot



• 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

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

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://nocdn.edge-rwd.com/magento/

• http://magento.example.com/

Source: Builtwith

https://trends.builtwith.com/shop


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

http://opensignal.com/reports/2014/android-fragmentation/

http://www.akamai.com/stateoftheinternet/

http://www.akamai.io


Initial run

[WPT Initial Run]

http://www.webpagetest.org/video/compare.php?tests=140909_N8_1295,140909_T9_1291,140909_2D_128G,140909_ZX_1299,140909_GZ_11YN,140909_94_11YH,140909_7T_11YF


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




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-


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

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:

http://timkadlec.com/2013/06/why-we-need-responsive-images/


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>




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

http://nocdn.akamai.com/magento/linen-blazer-580.html






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 shivdocument.createElement( "picture" );

</script>...<div class="product-image-gallery">

<picture><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:*"> <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><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">

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






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






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

http://www.webpagetest.org/video/compare.php?tests=140915_YV_1CQ,140909_94_11YH






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

https://github.com/scottjehl/picturefill


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

http://nocdn.akamai.com/magento/linen-blazer-580.html






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

http://www.webpagetest.org/video/compare.php?tests=140915_8G_1JW,140915_YV_1CQ


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

http://nocdn.akamai.com/magento/catalogsearch/result/?q=as


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

http://codepen.io/Chmood/pen/CHlGD




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

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

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






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

http://www.webpagetest.org/video/compare.php?tests=140915_KP_2HZ,140915_8G_1JW


Render Blocking CSS

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

Ilya Grigorik

Critical Path CSS

Non Priority CSS

https://www.google.ca/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CCIQFjAA&url=https://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present&ei=y_0UVMDFD8_5yQS8n4KYAQ&usg=AFQjCNHnLHrX4QfUz8Xd34sEL9ZSxtlE_Q&bvm=bv.75097201,d.aWw


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

https://gist.github.com/PaulKinlan/6284142

https://github.com/fatso83/grunt-penthouse

https://github.com/pocketjoso/penthouse

http://jonassebastianohlsson.com/criticalpathcssgenerator/





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






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

http://www.webpagetest.org/video/compare.php?tests=140909_N4_12W4,140909_94_11YH&thumbSize=200&ival=500&end=full


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)

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

http://bradfrostweb.com/blog/post/prioritizing-performance-in-responsive-design/






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

http://www.webpagetest.org/video/compare.php?tests=140915_TY_2XM,140915_BA_1WQ






No Hidden SPoF!




demand, mobile devices and data collection.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

http://ec2-54-190-59-81.us-west-2.compute.amazonaws.com/magento/linen-blazer-580.html






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

Original

Start Render: 6.4s

Doc Complete: 18.9s

Fully Loaded: 28s

http://www.webpagetest.org/video/compare.php?tests=140915_0S_31G,140915_TY_2XM


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 your CDN to utilize the same RESS logic

• (Otherwise your CDN will not cache or have cache collisions)


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






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

BrowsersMaybe jxrlib

JPEG

2000-30% N/A

In Spec, not

BrowsersMaybe

OpenJP

EG

10+

12.1+4+23+

6+ 6+

http://jpegclub.org/jpegtran/

https://developers.google.com/speed/webp/download

https://jxrlib.codeplex.com/

http://www.openjpeg.org/






Solution: Auto Image Selection

WebP

JXR

Jpg2000

Jpg

Jpg






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

http://www.webpagetest.org/video/compare.php?tests=140915_QP_372,140915_0S_31G






Bonus: Image Transcoder


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

Average

Throughput: HighSize: 85KB (Q: 90)

Throughput: MedSize: 35KB (Q: 40)

Throughput: LowSize: 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

Original

Start Render: 6.4s

Doc Complete: 18.9s

Fully Loaded: 28s

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 your CDN for maximum offload

6. Adaptive Images to Browser and Network conditions






Free Copy

bit.ly/rf-free

bit.ly/rf-free




demand, mobile devices and data collection.Thank-You

@ColinBendell

Velocity EU 2014: Responsive & Fast (Iterating Live)

Technology

Transcript of Velocity EU 2014: Responsive & Fast (Iterating Live)