The mobile-web-at-a-snails-pace
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 5,141 views
Uploaded on

This is a presentation I gave at the Frontenders event in Valencia on September 12th. ...

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,141
On Slideshare
5,107
From Embeds
34
Number of Embeds
2

Actions

Shares
Downloads
6
Comments
0
Likes
4

Embeds 34

https://twitter.com 33
https://www.xing.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. The mobile web: At a snail‘s pace @marcelkalveram marcelkalveram.com
  • 2. 3 Performance Traits Network Download Rendering
  • 3. The latency problem SYN ACK ACK
  • 4.   +
  • 5.   SYN GET ACK
  • 6.   +
  • 7.   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)
  • 8. 0.32s 3.2s 16
  • 9.   requests
  • 10. ... 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
  • 11. 3 Performance Traits Network Download Rendering
  • 12. The web is getting heavier 550 740 930 1.120 1.310 1.500 MAY2011 MAY2012 MAY2013 Average download size of a website kilobytes Source: httparchive.org/trends.php
  • 13. 0.61s 3.2s
  • 14. 3 Performance Traits Network Download Rendering
  • 15. A speed benchmark vs. iPhone
  • 16.   5 2012 Intel
  • 17.   Celeron
  • 18.   440 2006 Source: browser.primatelabs.com/processor-benchmarks
  • 19. Rendering
  • 20.   is
  • 21.   very
  • 22.   expensive
  • 23.   in
  • 24.   terms
  • 25.   of
  • 26.    performance,
  • 27.   and
  • 28.   is
  • 29.   one
  • 30.   of
  • 31.   the
  • 32.   main
  • 33.   causes
  • 34.    of
  • 35.   slow
  • 36.   DOM
  • 37.   scripts,
  • 38.   especially
  • 39.   on
  • 40.   devices
  • 41.    with
  • 42.   low
  • 43.   processing
  • 44.   power,
  • 45.   such
  • 46.   as
  • 47.   phones.
  • 48. 3 Performance Traits Network Download Rendering
  • 49. A common request 25%
  • 50.   of
  • 51.   the
  • 52.    Users
  • 53.   abandon
  • 54.    the
  • 55.   page 4
  • 56.   sec Source: blog.kissmetrics.com/loading-time 2013
  • 57.   average for
  • 58.   mobile 7.5
  • 59.   sec
  • 60. 7 Performance Tips Image Source:dorrys.com/moving-snails-pace
  • 61. 1Avoid redirects
  • 62. window.location.href
  • 63.   = m.interesting-website.com www.interesting- website.com Hi!
  • 64.   Do
  • 65.   you
  • 66.   want
  • 67.   to
  • 68.    download
  • 69.   our
  • 70.   app? ... Image source: www.ragecollection.com/guide
  • 71. 2Reduce requests
  • 72. } 42 Average
  • 73.   number
  • 74.    of
  • 75.   resources
  • 76.    per
  • 77.   page. Modern
  • 78.   browsers can
  • 79.   download
  • 80.    4
  • 81.   files
  • 82.   in
  • 83.   parallel Concatenate assets Source: developers.google.com/speed/articles/web-metrics
  • 84. Combine CSS with preprocessors compass --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 palettes wearekiss.com/spritepad, spritecow.com General rules
  • 85. 3Optimize images
  • 86. Images 62 % Other 10 % Flash 6 % JS 16 % CSS 3 % Html 4 % Oh
  • 87.   god
  • 88.   JPG... Source: www.lukew.com/ff/entry.asp?1684
  • 89. Choose wisely...
  • 90. Image optimization kraken.io smush.itImageOptim Web-based Mac-only Uploads/URLs 15% 10% 5%
  • 91. 4Shrink page weight
  • 92. Drop big frameworks jQuery 93kB zepto 27kB MooTools 90kB sizzle 18kB ~80% ~70%
  • 93. microjs.com
  • 94. 5Use Caching
  • 95. 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
  • 96.   to
  • 97.   90%
  • 98.   faster
  • 99.   page
  • 100.   load
  • 101.   time
  • 102. localStorage cache key-value storedownload code Asset loaded? YESNO
  • 103. 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)
  • 104. uncached 200kB cached 30kb Microsoft has reduced its footprint from 200kB on the first file request to 30kB for subsequent requests by using localStorage.
  • 105. 6Improve startup time
  • 106. Browser
  • 107.   waits
  • 108.   for
  • 109.   JavaScript
  • 110.   to
  • 111.   be
  • 112.   parsed
  • 113. 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
  • 114.   block
  • 115. 7Avoid reflows
  • 116. 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 Good 3
  • 117.   reflows 1
  • 118.   reflow
  • 119. 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
  • 120.   reflows 1
  • 121.   reflow for ( var e = 0; e < elems.length; e++ ) { fragment.appendChild( elems[e] ); }
  • 122. Recap
  • 123. 3 Performance Traits Network Download Rendering
  • 124. The next time you feel that your site is going at a snail‘s pace...
  • 125. Reduce requests Avoid reflows Optimize images Avoid redirects Shrink page weight Improve startup time Use caching
  • 126. If you can‘t remember...
  • 127. KEEP CALM AND SNAILS-PACE.COM
  • 128. Thanks for your attention! Ask
  • 129.   a
  • 130.   question ...or
  • 131.   have
  • 132.   a
  • 133.   beer!