These are the slides for my talk at http://webandphp.com/conference/FasterWebsites #webandphpcon

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

2. Slow Websites

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

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

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

6. Jakob Nielsen
http://en.wikipedia.org/wiki/File:Jakob_Nielsen_1.jpg
http://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

7. http://www.nngroup.com/articles/website-response-times/
http://visual.ly/your-brain-slow-website

8. Studies

9. „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

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

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

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

13. „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

14. 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

15. The Mobile Challenge
http://www.flickr.com/photos/cizake/4164756091/sizes/o/in/photostream/

16. Developers

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

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

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

21. http://en.wikipedia.org/wiki/File:KnuthAtOpenContentAlliance.jpg
„premature
optimization is
the root of all
evil“

22. http://en.wikipedia.org/wiki/File:KnuthAtOpenContentAlliance.jpg
„premature
optimization is
the root of all
evil“
1974

23. http://nextberlin.eu/person/steve-souders/
Steve Souders
2007
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/

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

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

26. Backend
Frontend
Sustain more
Concurrent Users
Better Experience
Optimization at ...

27. Too much
Concurrent Users
?

28. Too much
Concurrent Users
1. Buy better hardware

29. Too much
Concurrent Users
1. Buy better hardware
2. Optimize Backend

30. Bad
Loading/Response
Time
1. Buy better hardware
2. Optimize Backend
?
Too much
Concurrent Users

31. WPO
Web Performance Optimization

32. Some Basics

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

34. http://bit.ly/1dugfP0
start
with
a
spec1 sec on empty cache
Paris / DSL / Chrome

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

36. Just one change at a time
Measure
WHAT
Analyze
WHY
Optimize
Repeat

37. Measure
from the
Outside

38. Don't
trust lab
results
http://www.flickr.com/photos/janodecesare/9069301176/sizes/k/

39. Measure
http://www.flickr.com/photos/ltdemartinet/2970944908/sizes/o/in/photostream/
Get
RUM

40. Measure
http://www.flickr.com/photos/ltdemartinet/2970944908/sizes/o/in/photostream/
Real
User
Metrics

41. Example
Google Analytics

42. Example
New Relic

43. Example
WEBPAGETEST

44. Analyze from the Inside

45. Analyze
Browser Developer Tools: Waterfall Diagram
Chrome Developer Tools, Firebug, Dragonfly...

46. In-Browser Analytics
https://developers.google.com/speed/pagespeed/
http://yslow.org/
YSLOW Page Speed
Insights
http://gtmetrix.com/
http://gtmetrix.com/

47. Latency (RTT)
Optimize:
Throughput vs. Latency
Throughput

48. Latency (RTT)
Throughput vs. Latency
Client ServerRound Trip Time

49. Throughput vs. Latency
Latency
reduce requests

50. Throughput
reduce file-size
more parallel requests
Throughput vs. Latency
Latency
reduce requests

51. Browser Caching

52. YSlow Statistic

53. Optimization Techniques
& Tools

54. http://yslow.org/ https://developers.google.com/speed/
http://developer.yahoo.com/performance/rules.html

56. Technique 1:
Less is More

57. Snippet Plague
Facebook, Twitter, Google+, Google Analytics,
Flickr, Youtube

58. Cure
Don't use them

59. Cure
Don't overuse them
- think about it -

60. JavaScript-Explosion

61. Zepto & JS-Microframeworks
http://microjs.com/
https://github.com/madrobby/zepto
Thomas
Fuchs

62. Technique 2:
Far Future Expire Date
http://developer.yahoo.com/performance/rules.html#expires

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

64. Cache Manifests
<html manifest="example.appcache">
...
CACHE MANIFEST
# 2010­06­18:v2
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
NETWORK:
login.php
/myapi
http://api.twitter.com
FALLBACK:
/main.py /static.html
images/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

65. Cache Manifests
<html manifest="example.appcache">
...
CACHE MANIFEST
# 2010­06­18:v2
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
NETWORK:
login.php
/myapi
http://api.twitter.com
FALLBACK:
/main.py /static.html
images/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
&

66. Cache Manifests
<html manifest="example.appcache">
...
CACHE MANIFEST
# 2010­06­18:v2
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
NETWORK:
login.php
/myapi
http://api.twitter.com
FALLBACK:
/main.py /static.html
images/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
&

67. Technique(s) 3:
CSS & JS
Merge, Minimize, Place, GZIP
JsMin, Google Closure Compiler, UglifyJS, YUI Compressor...
automatically in Rails

68. 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

69. <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

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

71. <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

72. <script async src="http://example.org/my.js"></script>
Async in HTML5
https://developer.mozilla.org/en/docs/Web/HTML/Element/script

73. <script async src="http://example.org/my.js"></script>
Async in HTML5
https://developer.mozilla.org/en/docs/Web/HTML/Element/script
2228

74. Technique 5:
Parallelize Requests

75. „There is a common misbelief that
a single combined script performs
best. Wrong“
http://headjs.com/

76. Parallel downloads are often faster
1000 kB
500 kB
500kb250 kB
250 kB

77. Parallel downloads are often faster
No CDNs, like
http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js

78. Parallel downloads are often faster
No CDNs, like
http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
http://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/

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

80. RequireJS + Almond
Optimize package-size
Lazy Loading by AMD
define(['jquery'] , function ($) {
return function () {};
});
https://github.com/jrburke/almond
http://requirejs.org/

81. Technique 6:
CSS Sprites
https://github.com/jakesgordon/sprite-factory
https://github.com/flyerhzm/css_sprite
http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html
http://compass-style.org/help/tutorials/spriting/
http://csssprites.com/
http://csssprites.org/
http://documentcloud.github.com/jammit/
http://spriteme.org/

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

83. marcoemrich77@googlemail.com
https://github.com/marcoemrich/
@marcoemrich

84. http://www.flickr.com/photos/garyturner/4042962940/sizes/o/in/photostream/
wpc13.cnf.io

85. Technique 7:
Preloading
(Post-Onload Download)
http://books.google.de/books?id=jRVlgNDOr60C&pg=PA59&lpg=PA59&dq="Post-Onload+Download"

86. feed the cache
Async & Deferred
with future expire headers
(new Image()).src = '/path/to/image.png'

88. Google Analytics
Visitor Flow

89. Google Analytics
Visitor Flow

90. 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

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