faster websites

91
Faster Websites by Optimizing on the Client Dipl.-Inf. (FH) Marco Emrich Sept. 2013

Upload: marcoemrich

Post on 29-Jan-2018

912 views

Category:

Technology


4 download

TRANSCRIPT

Page 1: Faster websites

Faster Websites by Optimizing on the Client

Dipl.-Inf. (FH) Marco Emrich Sept. 2013

Page 2: Faster websites

Slow Websites

Page 3: Faster websites

http://www.flickr.com/photos/pyxopotamus/2758466665/sizes/o/in/photostream/

Page 4: Faster websites

http://www.flickr.com/photos/reid_rosenberg/5616618789/sizes/l/

Page 5: Faster websites

http://www.flickr.com/photos/decaf/31866493/sizes/l/

Page 6: Faster websites

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

Page 7: Faster websites

http://www.nngroup.com/articles/website-response-times/

http://visual.ly/your-brain-slow-website

Page 8: Faster websites

Studies

Page 9: Faster websites

„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

Page 10: Faster websites

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/#.

Page 11: Faster websites

„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/

Page 12: Faster websites

http://theultralinx.com/2012/11/people-react-slow-websites-infographic.html

Page 13: Faster websites

„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

Page 14: Faster websites

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

Page 15: Faster websites

The Mobile Challenge

http://www.flickr.com/photos/cizake/4164756091/sizes/o/in/photostream/

Page 16: Faster websites

Developers

Page 17: Faster websites
Page 18: Faster websites

http://www.flickr.com/photos/el_jardineiro/2086608055/

Page 19: Faster websites

http://www.flickr.com/photos/philipbitnar/3194364095/sizes/o/in/photostream/

Page 20: Faster websites

http://www.flickr.com/photos/takens/6163883707/sizes/o/in/photostream/

Page 21: Faster websites

http://en.wikipedia.org/wiki/File:KnuthAtOpenContentAlliance.jpg

„premature optimization is the root of all evil“

Page 22: Faster websites

http://en.wikipedia.org/wiki/File:KnuthAtOpenContentAlliance.jpg

„premature optimization is the root of all evil“

1974

Page 23: Faster websites

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/

Page 24: Faster websites

http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

Page 25: Faster websites

http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

2012

Page 26: Faster websites

Backend

Frontend

Sustain moreConcurrent Users

Better Experience

Optimization at ...

Page 27: Faster websites

Too muchConcurrent Users

?

Page 28: Faster websites

Too muchConcurrent Users

1. Buy better hardware

Page 29: Faster websites

Too muchConcurrent Users

1. Buy better hardware2. Optimize Backend

Page 30: Faster websites

BadLoading/ResponseTime

1. Buy better hardware2. Optimize Backend

?

Too muchConcurrent Users

Page 31: Faster websites

WPOWeb Performance Optimization

Page 32: Faster websites

Some Basics

Page 33: Faster websites

Don't overengineerhttp://www.amazon.de/Wenger-Schweizer-Offiziersmesser-Messer-Schatulle/dp/B000R0JDSI

Page 34: Faster websites

http://bit.ly/1dugfP0

startwith

aspec1 sec on empty cache

Paris / DSL / Chrome

Page 35: Faster websites

http://www.flickr.com/photos/cizake/4164756091/sizes/o/in/photostream/

Remove bottlenecks

Page 36: Faster websites

Just one change at a time

MeasureWHAT

AnalyzeWHY

Optimize

Repeat

Page 37: Faster websites

Measure from the Outside

Page 38: Faster websites

Don't trust lab results

http://www.flickr.com/photos/janodecesare/9069301176/sizes/k/

Page 39: Faster websites

Measure

http://www.flickr.com/photos/ltdemartinet/2970944908/sizes/o/in/photostream/

GetRUM

Page 40: Faster websites

Measure

http://www.flickr.com/photos/ltdemartinet/2970944908/sizes/o/in/photostream/

RealUserMetrics

Page 41: Faster websites

ExampleGoogle Analytics

Page 42: Faster websites

ExampleNew Relic

Page 43: Faster websites

ExampleWEBPAGETEST

Page 44: Faster websites

Analyze from the Inside

Page 45: Faster websites

Analyze

Browser Developer Tools: Waterfall Diagram

Chrome Developer Tools, Firebug, Dragonfly...

Page 46: Faster websites

In-Browser Analytics

https://developers.google.com/speed/pagespeed/

http://yslow.org/

YSLOW Page SpeedInsights

http://gtmetrix.com/

http://gtmetrix.com/

Page 47: Faster websites

Latency (RTT)

Optimize:Throughput vs. Latency

Throughput

Page 48: Faster websites

Latency (RTT)

Throughput vs. Latency

Client ServerRound Trip Time

Page 49: Faster websites

Throughput vs. Latency

Latencyreduce requests

Page 50: Faster websites

Throughput

reduce file-sizemore parallel requests

Throughput vs. Latency

Latencyreduce requests

Page 51: Faster websites

Browser Caching

Page 52: Faster websites

YSlow Statistic

Page 53: Faster websites

Optimization Techniques& Tools

Page 54: Faster websites

http://yslow.org/ https://developers.google.com/speed/

http://developer.yahoo.com/performance/rules.html

Page 55: Faster websites
Page 56: Faster websites

Technique 1: Less is More

Page 57: Faster websites

Snippet Plague

Facebook, Twitter, Google+, Google Analytics,Flickr, Youtube

Page 58: Faster websites

Cure Don't use them

Page 59: Faster websites

Cure Don't overuse them

- think about it -

Page 60: Faster websites

JavaScript-Explosion

Page 61: Faster websites

Zepto & JS-Microframeworks

http://microjs.com/

https://github.com/madrobby/zepto

ThomasFuchs

Page 62: Faster websites

Technique 2: Far Future Expire Date

http://developer.yahoo.com/performance/rules.html#expires

Page 63: Faster websites

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/

Page 64: Faster websites

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

Page 65: Faster websites

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

&

Page 66: Faster websites

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

&

Page 67: Faster websites

Technique(s) 3: CSS & JS

Merge, Minimize, Place, GZIP

JsMin, Google Closure Compiler, UglifyJS, YUI Compressor...

automatically in Rails

Page 68: Faster websites

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

Page 69: Faster websites

<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

Page 70: Faster websites

<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/

Page 71: Faster websites

<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

Page 72: Faster websites

<script async src="http://example.org/my.js"></script>

Async in HTML5

https://developer.mozilla.org/en/docs/Web/HTML/Element/script

Page 73: Faster websites

<script async src="http://example.org/my.js"></script>

Async in HTML5

https://developer.mozilla.org/en/docs/Web/HTML/Element/script

2228

Page 74: Faster websites

Technique 5: Parallelize Requests

Page 75: Faster websites

„There is a common misbelief that a single combined script performs best. Wrong“

http://headjs.com/

Page 76: Faster websites

Parallel downloads are often faster

1000 kB

500 kB

500kb250 kB

250 kB

Page 77: Faster websites

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

Page 78: Faster websites

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/

Page 79: Faster websites

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {    // all done });

Headjs.com

Page 80: Faster websites

RequireJS + Almond

Optimize package-sizeLazy Loading by AMD

define(['jquery'] , function ($) { return function () {};});

https://github.com/jrburke/almond

http://requirejs.org/

Page 81: Faster websites

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/

Page 82: Faster websites

Video DemoWebpagetest.org

http://www.webpagetest.org/video/compare.php?tests=130604_9V_174P,130604_SH_1746

Page 83: Faster websites

[email protected]

https://github.com/marcoemrich/

@marcoemrich

Page 84: Faster websites

http://www.flickr.com/photos/garyturner/4042962940/sizes/o/in/photostream/

wpc13.cnf.io

Page 85: Faster websites

Technique 7: Preloading

(Post-Onload Download)

http://books.google.de/books?id=jRVlgNDOr60C&pg=PA59&lpg=PA59&dq="Post-Onload+Download"

Page 86: Faster websites

feed the cache

Async & Deferred

with future expire headers

(new Image()).src = '/path/to/image.png'

Page 87: Faster websites
Page 88: Faster websites

Google AnalyticsVisitor Flow

Page 89: Faster websites

Google AnalyticsVisitor Flow

Page 90: Faster websites

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

Page 91: Faster websites

http://www.flickr.com/photos/kins-garage/4025080233/sizes/z/in/photostream/Cover Bild: