faster websites
TRANSCRIPT
Faster Websites by Optimizing on the Client
Dipl.-Inf. (FH) Marco Emrich Sept. 2013
Slow Websites
http://www.flickr.com/photos/pyxopotamus/2758466665/sizes/o/in/photostream/
http://www.flickr.com/photos/reid_rosenberg/5616618789/sizes/l/
http://www.flickr.com/photos/decaf/31866493/sizes/l/
Jakob Nielsen
http://en.wikipedia.org/wiki/File:Jakob_Nielsen_1.jpghttp://www.nngroup.com/articles/website-response-times/
„Even a few seconds' delay is enough to create an unpleasant user experience“
http://visual.ly/your-brain-slow-website
http://www.nngroup.com/articles/website-response-times/
http://visual.ly/your-brain-slow-website
Studies
„67% of consumers cite slow websites as the main cause of basket abandonment“
http://econsultancy.com/de/blog/11274-67-of-consumers-cite-slow-websites-as-the-main-cause-of-basket-abandonment
http://www.aberdeen.com/Aberdeen-Library/5136/RA-performance-web-application.aspx
https://thestrangeloop.com/
http://conversionxl.com/11-low-hanging-fruits-for-increasing-website-speed-and-conversions/#.
„57% of online shoppers will wait 3 seconds or less before abandoning the site“
http://connect.phocuswright.com/2010/06/phocuswrightakamai-study-on-travel-site-performance/
http://theultralinx.com/2012/11/people-react-slow-websites-infographic.html
„Google engineers found that users begin to get frustrated with a site after waiting just 400 milliseconds – literally the blink of an eye – for web pages to load.“
http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?_r=1
Google: „today we're including a new signal in our search ranking algorithms: site speed“
http://googlewebmastercentral.blogspot.de/2010/04/using-site-speed-in-web-search-ranking.html
April 2010
The Mobile Challenge
http://www.flickr.com/photos/cizake/4164756091/sizes/o/in/photostream/
Developers
http://www.flickr.com/photos/el_jardineiro/2086608055/
http://www.flickr.com/photos/philipbitnar/3194364095/sizes/o/in/photostream/
http://www.flickr.com/photos/takens/6163883707/sizes/o/in/photostream/
http://en.wikipedia.org/wiki/File:KnuthAtOpenContentAlliance.jpg
„premature optimization is the root of all evil“
http://en.wikipedia.org/wiki/File:KnuthAtOpenContentAlliance.jpg
„premature optimization is the root of all evil“
1974
http://nextberlin.eu/person/steve-souders/
Steve Souders2007
The Golden Performance Rule
„80-90% of the end-user response time is spent on the frontend.“
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
2012
Backend
Frontend
Sustain moreConcurrent Users
Better Experience
Optimization at ...
Too muchConcurrent Users
?
Too muchConcurrent Users
1. Buy better hardware
Too muchConcurrent Users
1. Buy better hardware2. Optimize Backend
BadLoading/ResponseTime
1. Buy better hardware2. Optimize Backend
?
Too muchConcurrent Users
WPOWeb Performance Optimization
Some Basics
Don't overengineerhttp://www.amazon.de/Wenger-Schweizer-Offiziersmesser-Messer-Schatulle/dp/B000R0JDSI
http://bit.ly/1dugfP0
startwith
aspec1 sec on empty cache
Paris / DSL / Chrome
http://www.flickr.com/photos/cizake/4164756091/sizes/o/in/photostream/
Remove bottlenecks
Just one change at a time
MeasureWHAT
AnalyzeWHY
Optimize
Repeat
Measure from the Outside
Don't trust lab results
http://www.flickr.com/photos/janodecesare/9069301176/sizes/k/
Measure
http://www.flickr.com/photos/ltdemartinet/2970944908/sizes/o/in/photostream/
GetRUM
Measure
http://www.flickr.com/photos/ltdemartinet/2970944908/sizes/o/in/photostream/
RealUserMetrics
ExampleGoogle Analytics
ExampleNew Relic
ExampleWEBPAGETEST
Analyze from the Inside
Analyze
Browser Developer Tools: Waterfall Diagram
Chrome Developer Tools, Firebug, Dragonfly...
In-Browser Analytics
https://developers.google.com/speed/pagespeed/
http://yslow.org/
YSLOW Page SpeedInsights
http://gtmetrix.com/
http://gtmetrix.com/
Latency (RTT)
Optimize:Throughput vs. Latency
Throughput
Latency (RTT)
Throughput vs. Latency
Client ServerRound Trip Time
Throughput vs. Latency
Latencyreduce requests
Throughput
reduce file-sizemore parallel requests
Throughput vs. Latency
Latencyreduce requests
Browser Caching
YSlow Statistic
Optimization Techniques& Tools
http://yslow.org/ https://developers.google.com/speed/
http://developer.yahoo.com/performance/rules.html
Technique 1: Less is More
Snippet Plague
Facebook, Twitter, Google+, Google Analytics,Flickr, Youtube
Cure Don't use them
Cure Don't overuse them
- think about it -
JavaScript-Explosion
Zepto & JS-Microframeworks
http://microjs.com/
https://github.com/madrobby/zepto
ThomasFuchs
Technique 2: Far Future Expire Date
http://developer.yahoo.com/performance/rules.html#expires
File.mtime(path).to_i.to_s
Cachbusting per Creation TimeStamp Param
<img alt="Header" height="304" src="/images/header.jpg?1337557561" width="996" />
http://www.sevenforge.com/2008/12/18/cache-busting-asset-id/
Cache Manifests<html manifest="example.appcache"> ...
CACHE MANIFEST# 20100618:v2
CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
NETWORK:login.php/myapihttp://api.twitter.com
FALLBACK:/main.py /static.htmlimages/large/ images/offline.jpg*.html /offline.html
http://www.html5rocks.com/en/tutorials/appcache/beginner/http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html
http://caniuse.com/offline-apps
Cache Manifests<html manifest="example.appcache"> ...
CACHE MANIFEST# 20100618:v2
CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
NETWORK:login.php/myapihttp://api.twitter.com
FALLBACK:/main.py /static.htmlimages/large/ images/offline.jpg*.html /offline.html
http://www.html5rocks.com/en/tutorials/appcache/beginner/http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html
http://caniuse.com/offline-apps
All modern browsers
&
Cache Manifests<html manifest="example.appcache"> ...
CACHE MANIFEST# 20100618:v2
CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
NETWORK:login.php/myapihttp://api.twitter.com
FALLBACK:/main.py /static.htmlimages/large/ images/offline.jpg*.html /offline.html
http://www.html5rocks.com/en/tutorials/appcache/beginner/http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html
http://caniuse.com/offline-apps
All modern browsers
&
Technique(s) 3: CSS & JS
Merge, Minimize, Place, GZIP
JsMin, Google Closure Compiler, UglifyJS, YUI Compressor...
automatically in Rails
Technique 4: Async JavaScript-Loading
http://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet/
https://gist.github.com/1025811
http://mathiasbynens.be/notes/async-analytics-snippet
https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources
<script>(function(d) { var js = d.createElement('script'); js.src = "http://example.org/my.js"; (d.head || d.getElementsByTagName('head')[0]).appendChild(js);}(document));</script>
for your scripts
Stoyan Stefanov
http://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet/
Script Dom Element Technique
<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebookjssdk'));</script>
external scripts
Stoyan Stefanov
http://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet/
<script>
// Add a script element as a child of the body function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "deferredfunctions.js"; document.body.appendChild(element); }
// Check for browser support of event handling capability if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) Window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload;
</script>
Async & Deferred
https://developers.google.com/speed/docs/best-practices/payload#DeferLoadingJS
<script async src="http://example.org/my.js"></script>
Async in HTML5
https://developer.mozilla.org/en/docs/Web/HTML/Element/script
<script async src="http://example.org/my.js"></script>
Async in HTML5
https://developer.mozilla.org/en/docs/Web/HTML/Element/script
2228
Technique 5: Parallelize Requests
„There is a common misbelief that a single combined script performs best. Wrong“
http://headjs.com/
Parallel downloads are often faster
1000 kB
500 kB
500kb250 kB
250 kB
Parallel downloads are often faster
No CDNs, likehttp://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.jshttp://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js
Parallel downloads are often faster
No CDNs, likehttp://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.jshttp://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js
iPhone3 caches 15kB, iPhone4/5: 25kB
http://www.flickr.com/photos/miniyo73/8313902424/sizes/o/in/photostream/
http://www.yuiblog.com/blog/2008/02/06/iphone-cacheability/
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() { // all done });
Headjs.com
RequireJS + Almond
Optimize package-sizeLazy Loading by AMD
define(['jquery'] , function ($) { return function () {};});
https://github.com/jrburke/almond
http://requirejs.org/
Technique 6: CSS Sprites
https://github.com/jakesgordon/sprite-factoryhttps://github.com/flyerhzm/css_spritehttp://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.htmlhttp://compass-style.org/help/tutorials/spriting/http://csssprites.com/http://csssprites.org/http://documentcloud.github.com/jammit/http://spriteme.org/
Video DemoWebpagetest.org
http://www.webpagetest.org/video/compare.php?tests=130604_9V_174P,130604_SH_1746
https://github.com/marcoemrich/
@marcoemrich
http://www.flickr.com/photos/garyturner/4042962940/sizes/o/in/photostream/
wpc13.cnf.io
Technique 7: Preloading
(Post-Onload Download)
http://books.google.de/books?id=jRVlgNDOr60C&pg=PA59&lpg=PA59&dq="Post-Onload+Download"
feed the cache
Async & Deferred
with future expire headers
(new Image()).src = '/path/to/image.png'
Google AnalyticsVisitor Flow
Google AnalyticsVisitor Flow
Future: Cache Manifests<html manifest="example.appcache"> ...
http://docs.webplatform.org/wiki/tutorials/speed_best_practices
„browsers can optimize that heavily, perhaps even precaching them ahead of your use.“
Paul Irish
http://www.flickr.com/photos/kins-garage/4025080233/sizes/z/in/photostream/Cover Bild: