The mobile-web-at-a-snails-pace

45
The mobile web: At a snail‘s pace @marcelkalveram marcelkalveram.com

description

This is a presentation I gave at the Frontenders event in Valencia on September 12th. It reveals the most common performance traits of the mobile web and discusses 7 techniques that enable developers to improve the page load and rendering time of their web sites.

Transcript of The mobile-web-at-a-snails-pace

Page 1: The mobile-web-at-a-snails-pace

The mobile web:At a snail‘s pace

@marcelkalveram

marcelkalveram.com

Page 2: The mobile-web-at-a-snails-pace

3 Performance Traits

Network Download Rendering

Page 3: The mobile-web-at-a-snails-pace

The latency problem

SYN

ACK

ACK����������� ������������������  +����������� ������������������  SYN

GET

ACK����������� ������������������  +����������� ������������������  Data

„RTT is the length of time it takes for a signal to be sent plus the length of time it takes for an acknowledgment of that signal to be received“ (Source: Wikipedia)

Page 4: The mobile-web-at-a-snails-pace

0.32s 3.2s

16����������� ������������������  requests

Page 5: The mobile-web-at-a-snails-pace

... a performance bottleneck

0

1000

2000

3000

4000

1Mbps 5Mbps 10Mbps

Page load time vs. increasing bandwidth

Page load time (ms)

Source: www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck

Page 6: The mobile-web-at-a-snails-pace

3 Performance Traits

Network Download Rendering

Page 7: The mobile-web-at-a-snails-pace

The web is getting heavier

550

740

930

1.120

1.310

1.500M

AY 20

11

MAY

2012

MAY

2013

Average download size of a website

kilobytes

Source: httparchive.org/trends.php

Page 8: The mobile-web-at-a-snails-pace

0.61s 3.2s

Page 9: The mobile-web-at-a-snails-pace

3 Performance Traits

Network Download Rendering

Page 10: The mobile-web-at-a-snails-pace

A speed benchmark

vs.

iPhone����������� ������������������  52012

Intel����������� ������������������  Celeron����������� ������������������  4402006

Source: browser.primatelabs.com/processor-benchmarks

Page 11: The mobile-web-at-a-snails-pace

Rendering����������� ������������������  is����������� ������������������  very����������� ������������������  expensive����������� ������������������  in����������� ������������������  terms����������� ������������������  of����������� ������������������  performance,����������� ������������������  and����������� ������������������  is����������� ������������������  one����������� ������������������  of����������� ������������������  the����������� ������������������  main����������� ������������������  causes����������� ������������������  of����������� ������������������  slow����������� ������������������  DOM����������� ������������������  scripts,����������� ������������������  especially����������� ������������������  on����������� ������������������  devices����������� ������������������  with����������� ������������������  low����������� ������������������  processing����������� ������������������  power,����������� ������������������  such����������� ������������������  as����������� ������������������  phones.

Page 12: The mobile-web-at-a-snails-pace

3 Performance Traits

Network Download Rendering

Page 13: The mobile-web-at-a-snails-pace

A common request

25%����������� ������������������  of����������� ������������������  the����������� ������������������  Users����������� ������������������  abandon����������� ������������������  

the����������� ������������������  page

4����������� ������������������  secSource: blog.kissmetrics.com/loading-time

2013����������� ������������������  averagefor����������� ������������������  mobile

7.5����������� ������������������  sec

Page 15: The mobile-web-at-a-snails-pace

1Avoid redirects

Page 16: The mobile-web-at-a-snails-pace

window.location.href����������� ������������������  =m.interesting-website.com

www.interesting-website.com

Hi!����������� ������������������  Do����������� ������������������  you����������� ������������������  want����������� ������������������  to����������� ������������������  download����������� ������������������  our����������� ������������������  app?

...

Image source: www.ragecollection.com/guide

Page 17: The mobile-web-at-a-snails-pace

2Reduce requests

Page 18: The mobile-web-at-a-snails-pace

}42

Average����������� ������������������  number����������� ������������������  of����������� ������������������  resources����������� ������������������  per����������� ������������������  page.

Modern����������� ������������������  browserscan����������� ������������������  download����������� ������������������  

4����������� ������������������  files����������� ������������������  in����������� ������������������  parallel

Concatenate assets

Source: developers.google.com/speed/articles/web-metrics

Page 19: The mobile-web-at-a-snails-pace

Combine CSS with preprocessorscompass --watch sass/style.scss:css/style.css

Inline JavaScript and CSS files smaller than 4kb<script> ... </script> and <style> ... </style>

Use sprite images with similar color paletteswearekiss.com/spritepad, spritecow.com

General rules

Page 20: The mobile-web-at-a-snails-pace

3Optimize images

Page 21: The mobile-web-at-a-snails-pace

Images62 % Other

10 %

Flash6 %

JS16 %

CSS3 %

Html4 %

Oh����������� ������������������  god����������� ������������������  JPG...

Source: www.lukew.com/ff/entry.asp?1684

Page 22: The mobile-web-at-a-snails-pace

Choose wisely...

Page 24: The mobile-web-at-a-snails-pace

4Shrink page weight

Page 26: The mobile-web-at-a-snails-pace

microjs.com

Page 27: The mobile-web-at-a-snails-pace

5Use Caching

Page 28: The mobile-web-at-a-snails-pace

Caching

Expires

<IfModule mod_expires.c>

ExpiresActive on ExpiresByType text/html „access plus 5 minutes“ ExpiresByType image/jpg „access plus 6 months“ ExpiresByType image/gif „access plus 6 months“ ExpiresByType image/png „access plus 6 months“ ExpiresByType image/jpg „access plus 6 months“ ExpiresByType text/css „access plus 6 months“ ExpiresByType text/javascript „access plus 6 months“ ExpiresByType text/x-javascript „access plus 6 months“ ExpiresByType text/x-icon „access plus 1 year“

</IfModule>

Source: The Smashing Mobile Book - Optimizing For Mobile (Page 192)

up����������� ������������������  to����������� ������������������  90%����������� ������������������  faster����������� ������������������  page����������� ������������������  load����������� ������������������  time

Page 29: The mobile-web-at-a-snails-pace

localStorage cache

key-value storedownload code

Asset loaded?

YESNO

Page 30: The mobile-web-at-a-snails-pace

Example<script id=“jQuery“></script>

var jQfile;

if (‘jqFile’ in window.localStorage) { jqFile = window.localStorage.getItem(‘jqFile’);}

else { jqFile = getJQFile(); window.localStorage.setItem(‘jqFile’, jqFile);}

document.getElementById(‘jQuery’).text = jqFile;

Source: The Smashing Mobile Book - Optimizing For Mobile (Page 201)

Page 31: The mobile-web-at-a-snails-pace

uncached200kB

cached30kb

Microsoft has reduced its footprint from 200kB on the first file request to 30kB for subsequent requests by using localStorage.

Page 32: The mobile-web-at-a-snails-pace

6Improve startup time

Page 33: The mobile-web-at-a-snails-pace

Browser����������� ������������������  waits����������� ������������������  for����������� ������������������  JavaScript����������� ������������������  to����������� ������������������  be����������� ������������������  parsed

Page 34: The mobile-web-at-a-snails-pace

Correct CSS/JS order<html>

<head>

// CSS goes here<link rel=“stylehseet“ href=“iCanLoadFirst.css” />

</head>

<body>

...

<img src=”iCanDownloadBeforeTheJavaScript.jpg” />

...

<script src=”require.js”></script>

</body>

Doesn‘t����������� ������������������  block

Page 35: The mobile-web-at-a-snails-pace

7Avoid reflows

Page 36: The mobile-web-at-a-snails-pace

Applying styles

var el = document.getElementById(‘foo’);

el.style.color = ’#fff’;el.style.backgroundColor = ’#000’;el.style.borderColor = ’#fe0’;

var el = document.getElementById(‘foo’);

el.className = ‘bar’;

Bad Good3����������� ������������������  reflows 1����������� ������������������  reflow

Page 37: The mobile-web-at-a-snails-pace

Dynamic addition

Bad Good

var ul = document.getElementsByTagName("ul")[0];

var elems = [ document.createElement("li"), document.createElement("li"), document.createElement("li"), ... ];

var ul = document.getElementsByTagName("ul")[0];

ul.appendChild( fragment.cloneNode() );

var elems = [ document.createElement("li"), document.createElement("li"), document.createElement("li"), ... ];

for ( var e = 0; e < elems.length; e++ ) { ul.appendChild( elems[e].cloneNode() );}

var fragment = document.createDocumentFragment();

n����������� ������������������  reflows 1����������� ������������������  reflow

for ( var e = 0; e < elems.length; e++ ) { fragment.appendChild( elems[e] );}

Page 38: The mobile-web-at-a-snails-pace

Recap

Page 39: The mobile-web-at-a-snails-pace

3 Performance Traits

Network Download Rendering

Page 40: The mobile-web-at-a-snails-pace

The next time you feelthat your site is going at

a snail‘s pace...

Page 41: The mobile-web-at-a-snails-pace
Page 42: The mobile-web-at-a-snails-pace

Reduce requests

Avoid reflows

Optimize images

Avoid redirects

Shrink page weight

Improve startup timeUse caching

Page 43: The mobile-web-at-a-snails-pace

If you can‘t remember...

Page 44: The mobile-web-at-a-snails-pace

KEEP CALM

AND

SNAILS-PACE.COM

Page 45: The mobile-web-at-a-snails-pace

Thanks foryour attention!

Ask����������� ������������������  a����������� ������������������  question

...or����������� ������������������  have����������� ������������������  a����������� ������������������  beer!