My talk at PHP Kongress 2010 about rules and practices considering web performance.

1. Web-Performance
Regeln und LösungenRegeln und Lösungen
PHP World Kongress 2010 | München

2. Hi!
• Seit 2003 bei der 1&1 Internet AG
• Abteilung betreut die Bestellsysteme
der 1&1 (Shops)
• Experte für Frontend-Technologien
• HTML, XML, CSS, JavaScript
• Accessibility, Website Performance,
AJAX, Suchmaschinenoptimierung
Nico

3. Eigenschaften der 1&1 Shops
• Ca. 30 verschieden große Webapplikationen
• Hunderte Seiten pro Applikation
• Tausende von Grafiken
• Hunderte Stylesheets und Scripte• Hunderte Stylesheets und Scripte
• Täglicher Abruf von mehreren Terabyte an
Ressourcen

4. Performance-Optimierung
20092007
Steve Souders
www.stevesouders.com

5. 10%
Server + Client

6. CSS IMG
Script HTML

7. Reduziere die Anzahl der
HTTP-Requests

8. Wenige HTTP-Requests
Internet Service Provider
+
Bandbreite des AnwendersBandbreite des Anwenders
+
Nähe zu Peering-Punkten
+
Distanz

9. Wenige HTTP-Requests
Client
Server
?

10. Wie schnell surft denn
Deutschland so?

11. http://www.akamai.com/stateoftheinternet/

12. Deutschland
• In keiner Top 10 vertreten
• Landesweite Verbindungsgeschwindigkeit
durchschnittlich unter 5 Mbit/s
• Baden-Baden als einzige deutsche Stadt auf Platz 61• Baden-Baden als einzige deutsche Stadt auf Platz 61
mit durchschnittlich 7,6 Mbit/s
• Platz 1: Südkorea/Masan mit
durchschnittlich 17 / 20,9 Mbit/s
• Global durchschnittlich 1,8 Mbit/s

13. 0 17< 51,8

14. www.zeit.de

15. Frankfurt / IE7 / 1,5 Mbit/s
13 Sekunden
First View

16. Start Render
6,3 Sekunden

17. Frankfurt / IE7 / 1,5 Mbit/s
Second View
9 Sekunden

18. http://www.webperformancetoday.com/2010/07/01/the-best-graphs-of-velocity/

19. Google runs expirements on the
search results page to understand and
improve search expirience.
Our expiriment injected server-side delay
100 bis 400 ms
0,2% bis 0,6% weniger Suchanfragen

20. It comes down just one factor – speed.
2,2 Sekunden schneller
15% mehr Downloads
10,8 Mio/Jahr

21. www.watchmouse.com

22. http://status.mozilla.com/

23. http://www.forbes.com/2010/10/25/internet-korea-india-technology-emerging-markets.html
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

24. Was machen wir?

25. CSS IMG
Script HTML

26. CSS IMG CDS
Script HTML

27. CSS IMG
Script HTML Pustefix
Framework

28. CSS IMG
Script HTML
Jasmin

29. Jasmin
Schönheit aus 1001 Nacht?
http://www.flickr.com/photos/honma/4084355466

30. Jasmin
• Nur ein Servlet ;-)
• JavaScript Minifier

31. Modularisierung mit Dependencies
Dependency
Qooxdoo
Autocompletion
webservice.js
autocompletion.js
autocompletion.css

32. Modularisierung mit Dependencies
<LINK href=“/xml/jasmin/dslorder+clearfix+autocompletion/css“>
<SCRIPT src=“/xml/jasmin/dslorder+clearfix+autocompletion/js“>

33. Wenige HTTP Requests
„Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich
nur für die Seite DslCheck die Ressourcen der Autocompletion.“
DslStart DslMobile DslCheck
dslorder dslorder dslorder
autocompletion
1. Request
2. Request

34. Wenige HTTP Requests
1. Request
2. Request
„Lade für alle Seiten die Ressourcen des DSL-Projekts und zusätzlich
nur für die Seite DslCheck die Ressourcen der Autocompletion.“
1. Request
2. Request
gZip
1. Seite 2. Seite

35. Wenige HTTP-Requests
15
20
Requests
0
5
10
Vorher Nachher
Requests*

36. Wenige HTTP-Requests
Requests
Vorher
Nachher

37. Minimierung
Original Optimierte Version
/**** zip:/home/servlet/pfixschlundAS_b/style/reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s
,samp,small,strike,strong,sub,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,leg
end,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0
;font-weight:inherit;font-style:inherit;font-size:100%;font-
family:inherit;vertical-align:baseline;} sup{line-height:0;font-
size:60%;}body{line-height:1;color:black;background:white;}ol,ul{list-
style:none;}table{border-collapse:separate;border-spacing:0;}caption,
th,td{text-align:left;fontweight:normal;}blockquote:before,blockquotetable, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
/*outline: 0;*/
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
th,td{text-align:left;fontweight:normal;}blockquote:before,blockquote
:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}.clearfix:
after{content:".";display:block;height:0;clear:both;visibility:hidden;}/*
Hides from IE-mac */ .clearfix{display:block;}/* End hide from IE-mac */
#skipmenu{position:absolute;top:10px;left:10px;width:180px;z-
index:100;}a.skiptarget{display:block;width:0;height:0;overflow:hidden;}a
.skip{fontsize:11px;texttransform:uppercase;textdecoration:none;}a.skip,
a.skip:link,a.skip:visited{position:absolute;top:999em;}a.skip:focus,a.skip:
active{outline:1px dotted #fff;color:#fff;position:absolute;top:0;left:0;}

38. Komprimierung
gZip

39. Minimierung
+
Komprimierung
Einsparung: 70%
Komprimierung

40. Jasmin
• Ergänzt Far Future Expires Header

41. Content Delivery Server (CDS)
CSS IMG CDS
Script HTML

42. Content Delivery Server (CDS)
• Liefert sämtliche Media-Daten wie Grafiken,
Flash, PDF usw. aus

43. Content Delivery Server (CDS)
htdocsApache CDShtdocsApache
Internet
CDS

44. Far Future Expires Header
2,5 Sekunden!
Far Future Expires Header: „Diese Ressource verändert sich für die
nächsten 15 Jahre nicht und kann immer
aus dem Cache bezogen werden.“

45. Far Future Expires Header
„Wie erzwinge ich ein Neuladen, wenn sich die Ressource doch
verändern sollte?“verändern sollte?“

46. „Auf der 1und1.de gibt es einen
Anzeigefehler bei Usern, die einen
Browser-Cache aktiviert haben.
Wie können wir solche Fehler
vermeiden?“

47. Far Future Expires Header
„Wie erzwinge ich ein Neuladen, wenn sich die Ressource doch
verändern sollte?“

48. Far Future Expires Header
/img/footer/ui-logo.gif
Publish
Internet
MD5-Hash
/img/footer/ui-logo.gif
32j4g23j4-ui-logo.gif
Sync auf CDS
<img src=„/img/footer/ui-logo.gif“>
url(/img/footer/ui-logo.gif)
<img src=„http://uicdn.net/32j4g23j4-ui-logo.gif“>
url(http://uicdn.net/32j4g23j4-ui-logo.gif)
CDS
Expires Header
HTML

49. Content Delivery Server (CDS)
3
3,5
4
4,5
Load Time*
0
0,5
1
1,5
2
2,5
3
Vorher Nachher
Load Time
* Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit

50. Content Delivery Server (CDS)
25
30
35
40
Requests*
0
5
10
15
20
25
Vorher Nachher
Requests
* Aufruf mit Cache, Dulles (USA), IE7, 1.5 MBit

51. Content Delivery Server (CDS)
Vorher
Nachher
82% weniger 304-Responses

52. Content Delivery Server (CDS)
Sync auf CDSSync auf CDS
CDS

53. Content Delivery Server (CDS)
Optimierung
+
CDS
Optimierung
+
Sync auf CDS

54. Smush.it
http://developer.yahoo.com/yslow/

55. Smush.it
http://developer.yahoo.com/yslow/smushit/faq.html

56. Smush.it
http://developer.yahoo.com/yslow/smushit/faq.html

57. Smush.it
http://sylvana.net/jpegcrop/jpegtran/
http://pmt.sourceforge.net/pngcrush/
http://sylvana.net/jpegcrop/jpegtran/
http://www.imagemagick.org/script/index.php

58. Parallele Downloads

59. Content Delivery Server (CDS)
4
5
6
Load Time*
0
1
2
3
4
Vorher Nachher
Load Time
* Aufruf ohne Cache, Dulles (USA), IE7, 1.5 MBit

60. Warum eine eigene Domain?
Darum

61. Warum eine eigene Domain?
StartseiteStartseite
Mobile Internet Eigene Homepage DSL

62. Warum eine eigene Domain?
Startseite
Mobile Internet
Eigene Homepage
DSL
CDN

63. Warum eine eigene Domain?
home.1und1.de/header/logo.png
mobile.1und1.de/header/logo.png
dsl.1und1.de/header/logo.png
homepage.1und1.de/header/logo.png
www.uicdn.net/header/43j2hg35-logo.png

64. Content Delivery Network
Lenexa
Karlsruhe
Europa
Atlantik
Karlsruhe
USA
Atlantik

65. Content Delivery Server (CDS)
http://www.youtube.com/watch?v=IWWBnJEsUtU
„Larry Page hat einmal die Vision geäußert, Webseiten
so schnell browsen zu können, wie man die Seiten in
einem Hochglanzmagazin umblättert.“

66. Content Delivery Server (CDS)

67. onLoad:
Webservice.getNextGraphics();
„Image Prefetching“

68. Kennzahlen
„Welche Größe haben die Daten, welche von den verschiedenen Seiten eines
Projekts abgerufen werden?“
„Werden Daten angefragt, die nicht verfügbar sind (404)?“
http://zoompf.com/2010-state-of-web-performance-report

69. CSS IMG
Script HTML

70. Progressive Rendering

72. Progressive Rendering
CSS an den Anfang
JavaScript ganz ans Ende

73. Nicholas C. Zakas
Ross Harmes Steven Leviathan
Stoyan Stefanov
http://oreilly.com/catalog/9780596802806
Julien Lecomte Matt Sweeney

74. http://vimeo.com/channels/fronteers10#16241085
Nicholas Zakas | High Performance Javascript | Fronteers 2010

75. <html>
<head>
<link rel=„stylesheet“ type=„text/css“ href=„some-styles-1.css“ />
<link rel=„stylesheet“ type=„text/css“ href=„some-styles-2.css“ />
<script type=„text/javascript“ src=„some-scripts-1.js“></script>
<script type=„text/javascript“ src=„some-scripts-2.js“></script>
</head>
<body>
…
Script

76. <html>
<head>
<link rel=„stylesheet“ type=„text/css“ href=„some-styles-1.css“ />
<link rel=„stylesheet“ type=„text/css“ href=„some-styles-2.css“ />
<script defer type=„text/javascript“ src=„some-scripts-1.js“></script>
<script defer type=„text/javascript“ src=„some-scripts-2.js“></script>
</head>
<body>
…
4+
3.5+
Script

77. <body>
…
<script type="text/javascript" src="js/LAB.js"></script>
<script type="text/javascript"><!—
$LAB
.script(„some-scripts-1.js“).wait()
.script(„some-scripts-2.js“);
//--></script>
</body>
</html>
Script

78. “The thing it does differently than most others is it allows you to express
via the API calls when it is necessary to preserve execution order
for dependencies.”
http://labjs.com/
<script type="text/javascript" src="js/LAB.js"></script>
<script type="text/javascript"><!—
$LAB
.script(„some-scripts-1.js“).wait()
.script(„some-scripts-2.js“);
//--></script>

79. Tools

80. WEBPAGETEST
www.webpagetest.org

81. WEBPAGETEST
www.webpagetest.org

82. WEBPAGETEST
www.webpagetest.org

83. WEBPAGETEST
www.webpagetest.org

84. WEBPAGETEST
www.webpagetest.org

85. WEBPAGETEST

86. WEBPAGETEST

87. WEBPAGETEST

88. WEBPAGETEST

89. YSlow
http://developer.yahoo.com/yslow/

90. YSlow

91. Page Speed
http://code.google.com/speed/page-speed/

92. Page Speed
http://code.google.com/speed/page-speed/docs/rules_intro.html

93. HTTP Fox
http://code.google.com/p/httpfox/

94. HTTP Fox

95. Firebug
• Firebug (Netzwerk Monitoring)
– Fortschrittsanalyse
– Filter nach Ressourcen-Typ
– Cache-Analyse– Cache-Analyse
– HTTP Headers
– XMLHttpRequest Monitoring

96. Firebug

98. Kennzahlen

99. CSS IMG
Script HTML

100. Wie groß sind die ausgelieferten Ressourcen?
Pro Seite
Pro Applikation
Gibt es Ausreißer?
Werden Ressourcen nicht gefunden?
Gibt es überflüssige Ressourcen?

102. Jasmin
CSS / JS
CDS
Grafiken / Flash
Apache
HTML
Größe
Fehlende Ressourcen
Größe
Ungenutzte CSS-Selektoren
JavaScript-Fehler
Fehlende Ressourcen
Überflüssige Ressourcen
Größe
Fehlende Seiten

103. Jasmin
CSS / JS
CDS
Grafiken / Flash
Apache
HTML
Größe
Fehlende Ressourcen
Größe
Ungenutzte CSS-Selektoren
JavaScript-Fehler
Fehlende Ressourcen
Überflüssige Ressourcen
Größe
Fehlende Seiten

104. JavaScript-Fehler

105. JavaScript-Fehler

106. JavaScript-Fehler

107. JavaScript-Fehler

108. Fehlende Seiten
Location Referrer

109. Nö…

110. https://www.google.com/webmasters/tools/
http://code.google.com/apis/webmastertools/

112. To avoid overloading our servers, only 25 issues can
be returned at a time.
Return more than 25 crawling issues?
Jonathan Simon: […] it‘s propably time to consider
raising it. I‘ll discuss your feedback with the team.

113. http://code.google.com/apis/webmastertools/Logfiles

115. start = new Date();
time = new Date() - start;
if (time > 30000) {
log(page, time);
}

116. Fragen?
nico.steiner@1und1.de
@sensationalseo
www.nicosteiner.de
www.slideshare.net/n.steiner

117. Vielen Dank für eure
Aufmerksamkeit!
nico.steiner@1und1.de
@sensationalseo
www.nicosteiner.de
www.slideshare.net/n.steinerhttp://www.flickr.com/photos/ben30/4028840988/