Faster websites

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# 2010­06­18: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# 2010­06­18: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# 2010­06­18: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', 'facebook­jssdk'));</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

marcoemrich77@googlemail.com

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: