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

  • 4,663 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
4,663
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
6
Comments
0
Likes
4

Embeds 0

No embeds

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!