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
©2014 AKAMAI | FASTER FORWARDTM

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

MotoG on 3G hotspot
• 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

demand, mobile devices Imagesan d data collection.

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/

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>

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
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
<img
id="image-‐main"
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"
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"
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
<picture>
<!-‐-‐[if
IE
9]><video
style="display:
none;"><![endif]-‐-‐>
<source
801px)"
srcset=“2880411400_2_1_1.jpg?resize=600:*"/>
<source
641px)"
srcset=“2880411400_2_1_1.jpg?resize=500:*">
<!-‐-‐[if
IE
9]></video><![endif]-‐-‐>
<img
id="image-‐main"
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
801px)"
srcset=“/magento/media/catalog/product/
cache/1/image/600x/040ec09b1e35df139433887a97daa66f/2/8/2880411400_2_1_1.jpg"/>
<source
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"
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
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
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
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

demand, mobile devices CSS / JS / Dand daOta collectioMn.

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-‐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
“Right” CSS loaded
“Wrong” 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
/>
<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
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

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,
.wrapper
{
min-‐width:
320px;
min-‐height:
100%;
margin:
0px
auto;
background:
rgb(255,
.header-‐language-‐background
{
padding:
10px;
text-‐transform:
uppercase;
background-‐color:
.header-‐language-‐background,
a
{
color:
rgb(230,
230,
230);
.header-‐language-‐container,
.page-‐header
{
font-‐family:
Raleway,
'Helvetica
Neue',
Verdana,
.header-‐language-‐container
{
max-‐width:
1200px;
margin-‐left:
...
</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

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
data-‐src=”/magento/skin/frontend/rwd/default/js/lib/elevatezoom/jquery.elevateZoom-‐3.0.8.min.data-‐mq="screen
and
/>
<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
Original
Start Render: 6.4s
Doc Complete: 18.9s
Fully Loaded: 28s

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
Mobile
Content
• Tune for families of devices
Removed
• User-Agent Regex
• Device Characteristic Databases
• Client Hints (Header, Cookie)
• Other Cookie
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
Original
Start Render: 6.4s
Doc Complete: 18.9s
Fully Loaded: 28s

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?
OTHER TABLET
What about?
• HTML 5 vs 4?
• Device Model?
• Browser Family?
• GPS support?
• Pixel Density?
• Etc…
MOBILE

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

demand, mobile devices and data collection. Images
(Redux)

23+ 4+ 12.1+
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 OpenJP
EG
10+
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
Original
Start Render: 6.4s
Doc Complete: 18.9s
Fully Loaded: 28s

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
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 Akamai for maximum offload
6. Adaptive Images to Browser and Network conditions

Free Copy
bit.ly/rf-free

demand, mobile devices and data collection. Thank-You @ColinBendell

Edge 2014: Responsive & Fast: Iterating Live on Modern RWD Sites

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

Mehr von Akamai Technologies

Mehr von Akamai Technologies (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Edge 2014: Responsive & Fast: Iterating Live on Modern RWD Sites