velocity 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

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

• 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

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

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

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


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

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>


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

http://ec2-54-190-59-81.us-west-2.compute.amazonaws.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/9df78eab33525d08d6e5fb8d27136e95/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/040ec09b1e35df139433887a97daa66f/m/s/msj012t_2.jpg" data-zoom-image=“/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887a97daa66f/m/s/msj012t_2.jpg”/> <img id="image-1" class="gallery-image" src="/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887a97daa66f/m/s/msj012a_2.jpg" data-zoom-image="/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887a97daa66f/m/s/msj012a_2.jpg" />

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>

...

<div class="product-image product-image-zoom"> <div class="product-image-gallery">

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

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



Responsive Images: Results

WPT Results

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

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

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

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


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

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


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

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



On Demand CSS: Results

WPT Results


Start Render: 9.2sDoc Complete: 12.7sFully Loaded: 20.4s

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



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

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

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



Conditional Load JS: Results

WPT Results



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



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


Demo



RESS can reduce DOM complexity

Before After



RESS: Results

WPT Results


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

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


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


OT

HE

R

TA

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

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/

http://www.openjpeg.org/



Solution: Auto Image Selection

WebP

JXR

Jpg2000

Jpg

Jpg



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

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


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

Poor

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)



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

akamai faster forwardtmanatomy

akamai faster forwardtmchrome

akamai faster forwardtmmotog

akamai faster forwardtmhow

akamai faster forwardtmwhat

akamai faster forwardtmtesting

akamai faster forwardtmdemo

akamai faster forwardtmover