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

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



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

<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

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



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



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:

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



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)


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



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

10+

12.1+ 4+ 23+

6+ 6+



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




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