Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf ·...
Transcript of Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf ·...
![Page 1: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/1.jpg)
Frank Kleine, Nico Steiner
1&1 Internet AG
Frontend-Performance mit PHP
![Page 2: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/2.jpg)
Frontend-Performance mit PHP 2
Vorstellung
Frank Kleine
Head of Web Infrastructure
Nico Steiner
Experte für Frontend T&A
![Page 3: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/3.jpg)
Frontend-Performance mit PHP 3
Vorstellung
1&1 Shopsysteme• Ca. 30 verschiedene Shops mit zahlreichen Tarifen
• Mehrere Millionen Requests täglich
• Mehrere Terabyte Traffic
• Aufgeteilt auf verschiedene Cluster
• Anbindung: 210 Gbit/s
![Page 4: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/4.jpg)
Frontend-Performance mit PHP 4
Vorstellung
• Web Performance und Open Source Evangelist
• Google (früher Yahoo)
• Erschaffer von YSlow
• Stanford-Dozent
• Sprecher auf internationalen Konferenzen 2007
2009
Steve Souders
YSlow Firebug Extension
![Page 5: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/5.jpg)
Frontend-Performance mit PHP 5
Frontend-Performance mit PHP
• HTTP-Protokoll• Die Testumgebung• Weniger HTTP Requests• Kombinierung / Komprimierung• Stylesheets an den Anfang• Scripte an das Ende• Expires-Header• Entwicklertools
![Page 6: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/6.jpg)
Frontend-Performance mit PHP 6
HTTP Protokoll
Client Server
Request
Response
URL Header
Header BodySC
GET /xml/shop/home.html
Host: kunden.1und1.de
User-Agent: Mozilla/5.0 (Windows; U; […]) Gecko/20100401 Firefox/3.6.3 ( .NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
[…]
HTTP/1.1 200 OK
Date: Thu, 27 May 2010 07:40:50 GMT
Server: Apache
[…]
Content-Type: text/html;charset=UTF-8
http://livehttpheaders.mozdev.org/
LiveHTTPHeaders
![Page 7: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/7.jpg)
Frontend-Performance mit PHP 7
Die Testumgebung
![Page 8: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/8.jpg)
Frontend-Performance mit PHP 8
Die Testumgebung
http://www.webpagetest.org/
![Page 9: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/9.jpg)
Frontend-Performance mit PHP 9
Die Testumgebung
http://www.webpagetest.org/
![Page 10: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/10.jpg)
Frontend-Performance mit PHP 10
Die Testumgebung
http://www.webpagetest.org/
![Page 11: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/11.jpg)
Frontend-Performance mit PHP 11
Ohne Optimierung
695 KB475,9 s7,5 s
SizeRequestsStart RenderLoad Time
![Page 12: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/12.jpg)
Frontend-Performance mit PHP 12
Ohne Optimierung
![Page 13: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/13.jpg)
Frontend-Performance mit PHP 13
Ohne Optimierung
HTML
![Page 14: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/14.jpg)
Frontend-Performance mit PHP 14
Ohne Optimierung
HTML
12%
![Page 15: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/15.jpg)
Frontend-Performance mit PHP 15
Ohne Optimierung
CSS (9)
![Page 16: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/16.jpg)
Frontend-Performance mit PHP 16
Ohne Optimierung
JS (7)
![Page 17: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/17.jpg)
Frontend-Performance mit PHP 17
Ohne Optimierung
Grafiken (30)
![Page 18: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/18.jpg)
Weniger HTTP-Request
![Page 19: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/19.jpg)
Frontend-Performance mit PHP 19
Weniger HTTP-Request
• Erzwingt Kompromiss zwischen Performance und Produktdesign
• Kombinierte Scripte + Styles
• CSS-Sprites
• Inline-Images
![Page 20: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/20.jpg)
Frontend-Performance mit PHP 20
Weniger HTTP-Request
• Zeiten verkürzen sich deutlich durch weniger HTTP-Overhead
Bandbreite des Endanwenders
Internet Service Provider
Nähe zu Peering-Punkten
Distanz
+
+
+
![Page 21: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/21.jpg)
Frontend-Performance mit PHP 21
Live-Umgebung
Kombiniertes CSS / JavaScript
• Software-Design bedingt Modularisierung– 30 Stylesheets
– 15 Scripte
• HTTP-Overhead (Round-trip time)
Build-Prozess
![Page 22: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/22.jpg)
Frontend-Performance mit PHP 22
JS/CSS-Dateien kombinieren
• Build-Prozess?
• Erster Ansatz: Phing
• Mit Bordmitteln möglich
![Page 23: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/23.jpg)
Frontend-Performance mit PHP 23
JS/CSS-Dateien kombinieren
• Build-Prozess?
• Erster Ansatz: Phing
• Mit Bordmitteln möglich
• Aber: Unpraktisch– Jede JS/CSS-Änderung erfordert einen Build
![Page 24: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/24.jpg)
Frontend-Performance mit PHP 24
JS/CSS-Dateien kombinieren
• Build-Prozess?
• Erster Ansatz: Phing
• Mit Bordmitteln möglich
• Aber: Unpraktisch– Jede JS/CSS-Änderung erfordert einen Build
![Page 25: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/25.jpg)
Frontend-Performance mit PHP 25
JS/CSS-Dateien kombinieren, Versuch 2
• Kombinieren on the fly
• minify
• Kombiniert Ressourcen on Demand
• Erlaubt Gruppierung von Ressourcen
• Ab PHP 5.2, BSD-lizensiert
• http://code.google.com/p/minify/
![Page 26: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/26.jpg)
Frontend-Performance mit PHP 26
JS/CSS-Dateien kombinieren, Versuch 2
• Kombinieren on the fly
• minify
• Kombiniert Ressourcen on Demand
• Erlaubt Gruppierung von Ressourcen
• Ab PHP 5.2, BSD-lizensiert
• http://code.google.com/p/minify/
• PHP zum Ausliefern von JS/CSS?
• Schnell genug für www.1und1.de, also auch für andere
![Page 27: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/27.jpg)
Frontend-Performance mit PHP 27
Kombiniertes CSS / JavaScript
CSS (1)
![Page 28: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/28.jpg)
Frontend-Performance mit PHP 28
Kombiniertes CSS / JavaScript
JS (1)
![Page 29: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/29.jpg)
Frontend-Performance mit PHP 29
Kombiniertes CSS / JavaScript
631 KB33 (-14)3,7 s (-37%)5,3 s (-30%)
695 KB475,9 s7,5 s
SizeRequestsStart RenderLoad Time
![Page 30: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/30.jpg)
Frontend-Performance mit PHP 30
Weniger HTTP-Requests
http://dsl.1und1.de
![Page 31: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/31.jpg)
Frontend-Performance mit PHP 31
Weniger HTTP-Requests
„Sliding Doors of CSS“by Douglas Bowman (2003)
http://www.alistapart.com/articles/slidingdoors/
<a class=„btn-yellow-medium“>
<span>prüfen</span>
</a>
<button class=„btn-yellow-medium“>
<span>auswählen</span>
</button>
Probleme mit IE6: http://www.peterbe.com/plog/button-tag-in-IE
36Requests!
![Page 32: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/32.jpg)
Frontend-Performance mit PHP 32
Weniger HTTP-Requests
buttons.png 24,7 KB
part-x.png 36,9 KB
+49%
![Page 33: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/33.jpg)
Frontend-Performance mit PHP 33
Weniger HTTP-Requests
http://login.1und1.de
![Page 34: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/34.jpg)
Frontend-Performance mit PHP 34
Inline Images
data:[<mediatype>][;base64],<data>
<img src="data:image/gif;base64, R0lGODlhEAAQANUAAPr7/PL09mhoaA4ODk1NTVxcXAoKCvf4+iwsLDg4ODs7O/T2+IaGhnBwcPX3+ZSUlJycnOPl5ri4uMTExKysrPj5+vj6+0RERPr6+87P0V9fXwYGBlFRUby+v05OT3JycvL19/b4+RsbG8vLyxgYGCoqKgICAtbY2iEhIbq6usDCw6+wsN7e3nt7e9fX16CfoJiYmLS0tYiIiJCQkIODgxcXF1dXVzc3N7u9vnV1dYmJieXl5fv8/GZmZgAAAP///yH5BAAAAAAALAAAAAAQABAAAAajQJ5wSCwKJbqkcikZAmijUW9Knc5igGxr8qp5WTCBqzaRrQCYT+pxa7vbj9QHYxFQGLa8Ps+gCCwVBRA5hIWGEAUVBxwNIj6PkI8iDRwHIRcaPj+bnJs+GhchDgkEmjunqD8+BAkOCwgKmp2cPgoICyAoJaaop6olKCABNSSys6okNQEBAwbGsz4GAwEnHhsmkZEmGx4nERkqHTjj5OMdKhkRQQA7" width="16" height="16"
alt="embedded disc icon">
Online: http://www.opinionatedgeek.com/dotnet/tools/base64encode/
NichtimIE7
![Page 35: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/35.jpg)
Frontend-Performance mit PHP 35
Inline Images
data:[<mediatype>][;base64],<data>
<img src="data:image/gif;base64, R0lGODlhEAAQANUAAPr7/PL09mhoaA4ODk1NTVxcXAoKCvf4+iwsLDg4ODs7O/T2+IaGhnBwcPX3+ZSUlJycnOPl5ri4uMTExKysrPj5+vj6+0RERPr6+87P0V9fXwYGBlFRUby+v05OT3JycvL19/b4+RsbG8vLyxgYGCoqKgICAtbY2iEhIbq6usDCw6+wsN7e3nt7e9fX16CfoJiYmLS0tYiIiJCQkIODgxcXF1dXVzc3N7u9vnV1dYmJieXl5fv8/GZmZgAAAP///yH5BAAAAAAALAAAAAAQABAAAAajQJ5wSCwKJbqkcikZAmijUW9Knc5igGxr8qp5WTCBqzaRrQCYT+pxa7vbj9QHYxFQGLa8Ps+gCCwVBRA5hIWGEAUVBxwNIj6PkI8iDRwHIRcaPj+bnJs+GhchDgkEmjunqD8+BAkOCwgKmp2cPgoICyAoJaaop6olKCABNSSys6okNQEBAwbGsz4GAwEnHhsmkZEmGx4nERkqHTjj5OMdKhkRQQA7" width="16" height="16"
alt="embedded disc icon">
Online: http://www.opinionatedgeek.com/dotnet/tools/base64encode/
Oder mit PHP ☺echo '<img src="data:image/gif;base64,' . base64_encode(file_get_contents($file)) . '" width= "16" height="16" alt="embedded disc icon">';
NichtimIE7
![Page 36: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/36.jpg)
Komprimierung
![Page 37: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/37.jpg)
Frontend-Performance mit PHP 37
Komprimierung
• Kleinere Response = weniger Datenpakete = reduzierte Übertragungszeit
• Komprimierung z.B. mit gzip
• Content Negotiation
GET /xml/shop/home.htmlHost: kunden.1und1.de
[…]
Accept-Encoding: gzip,deflate
[…]
HTTP/1.1 200 OK
[…]
Vary: Accept-Encoding
Content-Encoding: gzip
Keep-Alive: timeout=15, max=97
Connection: Keep-Alive
Transfer-Encoding: chunked
http://livehttpheaders.mozdev.org/
LiveHTTPHeaders
![Page 38: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/38.jpg)
Frontend-Performance mit PHP 38
Komprimierung
• Empfiehlt sich für jede Text-Response– HTML / CSS / JavaScript
– AJAX (XML / JSON)
• Zusätzliche CPU-Zeit wird durch geringere Dateigröße aufgewogen
![Page 39: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/39.jpg)
Frontend-Performance mit PHP 39
Komprimierung
• minify liefert Content per default mit gzip oder deflate aus– Natürlich nur mit Content Negotation
• HTML kann man auch komprimieren– CMS oder Framework– Nativ in PHP: ob_start('gz_handler');– Benötigt ext/zlib– Apache: mod_gzip, mod_deflate– http://phpperformance.de/mod_gzip-mod_deflate-und-sonstige-komprimierungsverfahren-fuer-web-inhalte/
• Last? Applikationsabhängig.
![Page 40: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/40.jpg)
Frontend-Performance mit PHP 40
Komprimiertes CSS / JavaScript
CSS
![Page 41: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/41.jpg)
Frontend-Performance mit PHP 41
Komprimiertes CSS / JavaScript
JS
![Page 42: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/42.jpg)
Frontend-Performance mit PHP 42
Komprimiertes CSS / JavaScript
254 KB (-63%)33 (-14)2,1 s (-64%)3,2 s (-57%)
631 KB33 (-14)3,7 s (-37%)5,3 s (-30%)
695 KB475,9 s7,5 s
SizeRequestsStart RenderLoad Time
![Page 43: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/43.jpg)
Stylesheets an den Anfang
![Page 44: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/44.jpg)
Frontend-Performance mit PHP 44
Stylesheets an den Anfang
• Progressive Rendering– Browser stellt jegliche Inhalte sofort dar wenn diese verfügbar sind
– Schnelles visuelles Feedback fördert User Experience
![Page 45: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/45.jpg)
Frontend-Performance mit PHP 45
Stylesheets an den Anfang
• Browser beginnt das Rendering erst nach dem Laden der Stylesheets
Start Render
CSS
![Page 46: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/46.jpg)
Frontend-Performance mit PHP 46
Stylesheets an den Anfang
CSS im HeadStart Rendering 4,7 s
CSS im ContentStart Rendering 6,0 s
![Page 47: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/47.jpg)
Frontend-Performance mit PHP 47
Stylesheets an den Anfang
http://www.webpagetest.org/video/view.php?id=100528_ee3c12b0eae75703456caa0dd5ccf098de3a5a48
![Page 48: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/48.jpg)
JavaScript an das Ende
![Page 49: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/49.jpg)
Frontend-Performance mit PHP 49
JavaScript im Head des DokumentsStart Render
![Page 50: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/50.jpg)
Frontend-Performance mit PHP 50
JavaScript am Ende des DokumentsStart Render
![Page 51: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/51.jpg)
Frontend-Performance mit PHP 51
JavaScript am Ende des Dokuments
254 KB (-63%)33 (-14)1,1 s (-81%)2,4 s (-68%)
254 KB (-63%)33 (-14)2,1 s (-64%)3,2 s (-57%)
631 KB (-9%)33 (-14)3,7 s (-37%)5,3 s (-30%)
695 KB475,9 s7,5 s
SizeRequestsStart RenderLoad Time
![Page 52: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/52.jpg)
Expires-Header
![Page 53: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/53.jpg)
Frontend-Performance mit PHP 53
Ohne Expires-Header
![Page 54: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/54.jpg)
Frontend-Performance mit PHP 54
Mit Expires-Header
• „Diese Ressource kann für die nächsten 15 Jahre immer aus dem Cache bezogen werden“
![Page 55: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/55.jpg)
Frontend-Performance mit PHP 55
Mit Expires-Header
Facebook: Hash-Tags
Amazon: Versionierung
Content Delivery Network
![Page 56: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/56.jpg)
Frontend-Performance mit PHP 56
Resultat
Mit OptimierungStart Rendering 2,5 s
Ohne OptimierungStart Rendering 9,0 s
![Page 57: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/57.jpg)
Frontend-Performance mit PHP 57
Resultat
http://www.webpagetest.org/video/view.php?id=100528_91ecef9fae78adb38f3a100d41ad97e05809d18a
![Page 58: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/58.jpg)
Frontend-Performance mit PHP 58
Resultat
http://www.flickr.com/photos/ppz/47473793/
• Dokument wird 5,1 Sekunden schneller geladen
• Browser beginnt 4,8 Sekunden früher zu rendern
• Es werden 14 Requests gespart
• Es werden 441 KB weniger Daten übertragen
![Page 59: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/59.jpg)
Frontend-Performance mit PHP 59
Nutzen
Quelle: Fronteers "fast by default" 2009
Google• +0,4 Sekunden• 0,6% weniger Suchanfragen
Yahoo!• +0,4 Sekunden• 5-9% weniger Traffic
Bing• +2 Sekunden• 4,3% weniger Umsatz
![Page 60: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/60.jpg)
Frontend-Performance mit PHP 60
Nutzen
Quelle: Fronteers "fast by default" 2009
Shopzilla• -5 Sekunden • 12% mehr Umsatz• 50% weniger Hardware
Netflix• 43% weniger Bandbreite
![Page 61: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/61.jpg)
Frontend-Performance mit PHP 61
Nutzen
Quelle: Fronteers "fast by default" 2009
Shopzilla• -5 Sekunden • 12% mehr Umsatz• 50% weniger Hardware
Netflix• 43% weniger Bandbreite
![Page 62: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/62.jpg)
Entwicklertools
![Page 63: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/63.jpg)
Frontend-Performance mit PHP 63
Entwicklertools
• Wordpress minify Plugin
• http://wordpress.org/extend/plugins/wp-minify/
• BSD-Lizenz
![Page 64: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/64.jpg)
Frontend-Performance mit PHP 64
Entwicklertools
• Symfony minify Plugin
• http://www.symfony-project.org/plugins/sfMinifyPlugin
• BSD-Lizenz
![Page 65: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/65.jpg)
Frontend-Performance mit PHP 65
Entwicklertools
• TYPO3-Plugin
• http://typo3.org/extensions/repository/view/minify/current/
![Page 66: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/66.jpg)
Frontend-Performance mit PHP 66
Entwicklertools
• CSS Sprite Generator– ZIP mit mehreren Bildern hochladen
– Generiert Sprite und passendes CSS
– Online nutzen oder lokal installieren• PHP 5.2 + GD, BSD-Lizenz
– http://spritegen.website-performance.org/
![Page 67: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/67.jpg)
Frontend-Performance mit PHP 67
Entwicklertools
• Firefox-Extensions (Add-ons)
• https://addons.mozilla.org/de/firefox/
• Firebug
• YSlow
• Live HTTP Headers
• Firefox Throttle
![Page 68: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/68.jpg)
Frontend-Performance mit PHP 68
Entwicklertools
• Firebug (Netzwerk Monitoring)– Fortschrittsanalyse
– Filter nach Ressourcen-Typ
– Cache-Analyse
– HTTP Headers
– XMLHttpRequest Monitoring
![Page 69: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/69.jpg)
Frontend-Performance mit PHP 69
Entwicklertools
• Firebug (Netzwerk Monitoring)
![Page 70: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/70.jpg)
Frontend-Performance mit PHP 70
Entwicklertools
• YSlow– Entwickelt von Yahoo!
– Bewertet eine Webseite unter Berücksichtigung der „Rules for high performance websites“
– Zeigt performancerelevante Komponenten einer Seite
– Statistiken / Tools
– Alternative: Page Speed (Google)
– Alternative: Speed Tracer (Chrome)
![Page 71: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/71.jpg)
Frontend-Performance mit PHP 71
https://addons.mozilla.org/en-US/firefox/addon/3829/
GET /en-US/firefox/addon/3829/ HTTP/1.1
Host: addons.mozilla.org
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1;
de; rv:1.9.2.3)
Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,
*/*;q=0.8
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer:
http://www.google.com/search?q=firefox+extensions
Cookie: dloadday=212.227.66.8.1248158487731077;
Cache-Control: max-age=0
HTTP/1.1 200 OK
Entwicklertools
• Live HTTP Headers– Zeigt HTTP Header aller Komponenten einer Seite in Echtzeit
– Manipulation von Request-Daten (Beta)
![Page 72: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/72.jpg)
Frontend-Performance mit PHP 72
Entwicklertools
• Firefox Throttle– Begrenzt Download/Upload Geschwindigkeit
– Simulation von Zugängen mit geringer Bandbreite
![Page 73: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/73.jpg)
Anmerkungen? Fragen?
![Page 74: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/74.jpg)
Weiterführende Informationen
![Page 75: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/75.jpg)
Frontend-Performance mit PHP 75
Weiterführende Informationen
Yahoo: Best Practices for Speeding Up Your Web Site
http://developer.yahoo.com/performance/rules.html
Google: Web Performance Best Practices
http://code.google.com/speed/page-speed/docs/rules_intro.html
YouTube: „site performance“
http://www.youtube.com/results?search_query=site+performance
![Page 76: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/76.jpg)
Frontend-Performance mit PHP 76
Weiterführende Informationen
Steve Souders: High Performance Web Sites (O‘Reilly 2007)
http://oreilly.com/catalog/9780596529307
Steve Souders: Even Faster Web Sites (O‘Reilly 2009)
http://oreilly.com/catalog/9780596522315
![Page 77: Frank Kleine, Nico Steiner 1&1 Internet AGtalks.frankkleine.de/frontend-performance-php.pdf · Frontend-Performance mit PHP 4 Vorstellung • Web Performance und Open SourceEvangelist](https://reader034.fdokument.com/reader034/viewer/2022052100/6039b749647f3c756b18cf06/html5/thumbnails/77.jpg)
http://icons.mysitemyway.com
Vielen Dank!
Frank Kleinehttp://frankkleine.de/
http://www.stubbles.org/http://twitter.com/mikey179
Nico Steinerhttp://www.nicosteiner.de/http://www.slideshare.net/n.steinerhttp://twitter.com/sensationalseo