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

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

on

  • 4,745 views

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.

Statistics

Views

Total Views
4,745
Views on SlideShare
4,711
Embed Views
34

Actions

Likes
4
Downloads
6
Comments
0

2 Embeds 34

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • The mobile web: At a snail‘s pace @marcelkalveram marcelkalveram.com
  • 3 Performance Traits Network Download Rendering
  • 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)
  • 0.32s 3.2s 16
  •   requests
  • ... 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
  • 3 Performance Traits Network Download Rendering
  • 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
  • 0.61s 3.2s
  • 3 Performance Traits Network Download Rendering
  • A speed benchmark vs. iPhone
  •   5 2012 Intel
  •   Celeron
  •   440 2006 Source: browser.primatelabs.com/processor-benchmarks
  • 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.
  • 3 Performance Traits Network Download Rendering
  • A common request 25%
  •   of
  •   the
  •    Users
  •   abandon
  •    the
  •   page 4
  •   sec Source: blog.kissmetrics.com/loading-time 2013
  •   average for
  •   mobile 7.5
  •   sec
  • 7 Performance Tips Image Source:dorrys.com/moving-snails-pace
  • 1Avoid redirects
  • 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
  • 2Reduce requests
  • } 42 Average
  •   number
  •    of
  •   resources
  •    per
  •   page. Modern
  •   browsers can
  •   download
  •    4
  •   files
  •   in
  •   parallel Concatenate assets Source: developers.google.com/speed/articles/web-metrics
  • 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
  • 3Optimize images
  • Images 62 % Other 10 % Flash 6 % JS 16 % CSS 3 % Html 4 % Oh
  •   god
  •   JPG... Source: www.lukew.com/ff/entry.asp?1684
  • Choose wisely...
  • Image optimization kraken.io smush.itImageOptim Web-based Mac-only Uploads/URLs 15% 10% 5%
  • 4Shrink page weight
  • Drop big frameworks jQuery 93kB zepto 27kB MooTools 90kB sizzle 18kB ~80% ~70%
  • microjs.com
  • 5Use Caching
  • 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
  • localStorage cache key-value storedownload code Asset loaded? YESNO
  • 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)
  • uncached 200kB cached 30kb Microsoft has reduced its footprint from 200kB on the first file request to 30kB for subsequent requests by using localStorage.
  • 6Improve startup time
  • Browser
  •   waits
  •   for
  •   JavaScript
  •   to
  •   be
  •   parsed
  • 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
  • 7Avoid reflows
  • 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
  •   reflows 1
  •   reflow
  • 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] ); }
  • Recap
  • 3 Performance Traits Network Download Rendering
  • The next time you feel that your site is going at a snail‘s pace...
  • Reduce requests Avoid reflows Optimize images Avoid redirects Shrink page weight Improve startup time Use caching
  • If you can‘t remember...
  • KEEP CALM AND SNAILS-PACE.COM
  • Thanks for your attention! Ask
  •   a
  •   question ...or
  •   have
  •   a
  •   beer!