Frank Kleine, Nico Steiner 1&1 Internet AG. Frontend-Performance mit PHP

Transkript

1 Frank Kleine, Nico Steiner 1&1 Internet AG Frontend-Performance mit PHP

2 Vorstellung Frank Kleine Head of Web Infrastructure Nico Steiner Experte für Frontend T&A Frontend-Performance mit PHP 2

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 Frontend-Performance mit PHP 3

4 Vorstellung Steve Souders Web Performance und Open Source Evangelist Google (früher Yahoo) Erschaffer von YSlow Stanford-Dozent Sprecher auf internationalen Konferenzen 2007 YSlow Firebug Extension 2009 Frontend-Performance mit PHP 4

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 Frontend-Performance mit PHP 5

6 HTTP Protokoll Request URL Header Client Server Response SC Header Body GET /xml/shop/home.html Host: kunden.1und1.de User-Agent: Mozilla/5.0 (Windows; U; [ ]) Gecko/ Firefox/3.6.3 (.NET CLR ) Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 [ ] HTTP/ OK Date: Thu, 27 May :40:50 GMT Server: Apache [ ] Content-Type: text/html;charset=utf-8 LiveHTTPHeaders Frontend-Performance mit PHP 6

7 Die Testumgebung Frontend-Performance mit PHP 7

8 Die Testumgebung Frontend-Performance mit PHP 8

9 Die Testumgebung Frontend-Performance mit PHP 9

10 Die Testumgebung Frontend-Performance mit PHP 10

11 Ohne Optimierung Load Time Start Render Requests Size 7,5 s 5,9 s KB Frontend-Performance mit PHP 11

12 Ohne Optimierung Frontend-Performance mit PHP 12

13 Ohne Optimierung HTML Frontend-Performance mit PHP 13

14 Ohne Optimierung 12% HTML Frontend-Performance mit PHP 14

15 Ohne Optimierung CSS (9) Frontend-Performance mit PHP 15

16 Ohne Optimierung JS (7) Frontend-Performance mit PHP 16

17 Ohne Optimierung Grafiken (30) Frontend-Performance mit PHP 17

18 Weniger HTTP-Request

19 Weniger HTTP-Request Erzwingt Kompromiss zwischen Performance und Produktdesign Kombinierte Scripte + Styles CSS-Sprites Inline-Images Frontend-Performance mit PHP 19

20 Weniger HTTP-Request Zeiten verkürzen sich deutlich durch weniger HTTP-Overhead Internet Service Provider + Bandbreite des Endanwenders + Nähe zu Peering-Punkten + Distanz Frontend-Performance mit PHP 20

21 Kombiniertes CSS / JavaScript Software-Design bedingt Modularisierung 30 Stylesheets 15 Scripte HTTP-Overhead (Round-trip time) Build-Prozess Live-Umgebung Frontend-Performance mit PHP 21

22 JS/CSS-Dateien kombinieren Build-Prozess? Erster Ansatz: Phing Mit Bordmitteln möglich Frontend-Performance mit PHP 22

23 JS/CSS-Dateien kombinieren Build-Prozess? Erster Ansatz: Phing Mit Bordmitteln möglich Aber: Unpraktisch Jede JS/CSS-Änderung erfordert einen Build Frontend-Performance mit PHP 23

24 JS/CSS-Dateien kombinieren Build-Prozess? Erster Ansatz: Phing Mit Bordmitteln möglich Aber: Unpraktisch Jede JS/CSS-Änderung erfordert einen Build Frontend-Performance mit PHP 24

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 Frontend-Performance mit PHP 25

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 PHP zum Ausliefern von JS/CSS? Schnell genug für also auch für andere Frontend-Performance mit PHP 26

27 Kombiniertes CSS / JavaScript CSS (1) Frontend-Performance mit PHP 27

28 Kombiniertes CSS / JavaScript JS (1) Frontend-Performance mit PHP 28

29 Kombiniertes CSS / JavaScript Load Time Start Render Requests Size 7,5 s 5,9 s KB 5,3 s (-30%) 3,7 s (-37%) 33 (-14) 631 KB Frontend-Performance mit PHP 29

30 Weniger HTTP-Requests Frontend-Performance mit PHP 30

31 Weniger HTTP-Requests Sliding Doors of CSS by Douglas Bowman (2003) 36 Requests! <a class= btn-yellow-medium > <span>prüfen</span> </a> <button class= btn-yellow-medium > <span>auswählen</span> </button> Probleme mit IE6: Frontend-Performance mit PHP 31

32 Weniger HTTP-Requests buttons.png part-x.png 24,7 KB 36,9 KB +49% Frontend-Performance mit PHP 32

33 Weniger HTTP-Requests Frontend-Performance mit PHP 33

34 Inline Images data:[<mediatype>][;base64],<data> Nicht im IE7 <img src="data:image/gif;base64, R0lGODlhEAAQANUAAPr7/PL09mhoaA4ODk1NTVxcXAoKCvf4+iwsLDg4ODs7O/T2+IaGhnBwcPX3+ZSUlJycnOPl5ri 4uMTExKysrPj5+vj6+0RERPr6+87P0V9fXwYGBlFRUby+v05OT3JycvL19/b4+RsbG8vLyxgYGCoqKgICAtbY2iEhIb q6usdcw6+wsn7e3nt7e9fx16cfojiymls0tyiiijcqkiodgxcxf1dxvzc3n7u9vnv1dymjiexl5fv8/gzmzgaaap/// yh5baaaaaaalaaaaaaqabaaaaajqj5wscwkjbqkcikzamijuw9knc5iggxr8qp5wtcbqzarrqcyt+pxa7vbj9qhyxfq GLa8Ps+gCCwVBRA5hIWGEAUVBxwNIj6PkI8iDRwHIRcaPj+bnJs+GhchDgkEmjunqD8+BAkOCwgKmp2cPgoICyAoJaa op6olkcabnssys6oknqebawbgsz4gawenhhsmkzemgx4nerkqhtjj5omdkhkrqqa7" width="16" height="16" alt="embedded disc icon"> Online: Frontend-Performance mit PHP 34

35 Inline Images data:[<mediatype>][;base64],<data> Nicht im IE7 <img src="data:image/gif;base64, R0lGODlhEAAQANUAAPr7/PL09mhoaA4ODk1NTVxcXAoKCvf4+iwsLDg4ODs7O/T2+IaGhnBwcPX3+ZSUlJycnOPl5ri 4uMTExKysrPj5+vj6+0RERPr6+87P0V9fXwYGBlFRUby+v05OT3JycvL19/b4+RsbG8vLyxgYGCoqKgICAtbY2iEhIb q6usdcw6+wsn7e3nt7e9fx16cfojiymls0tyiiijcqkiodgxcxf1dxvzc3n7u9vnv1dymjiexl5fv8/gzmzgaaap/// yh5baaaaaaalaaaaaaqabaaaaajqj5wscwkjbqkcikzamijuw9knc5iggxr8qp5wtcbqzarrqcyt+pxa7vbj9qhyxfq GLa8Ps+gCCwVBRA5hIWGEAUVBxwNIj6PkI8iDRwHIRcaPj+bnJs+GhchDgkEmjunqD8+BAkOCwgKmp2cPgoICyAoJaa op6olkcabnssys6oknqebawbgsz4gawenhhsmkzemgx4nerkqhtjj5omdkhkrqqa7" width="16" height="16" alt="embedded disc icon"> Online: Oder mit PHP echo '<img src="data:image/gif;base64,'. base64_encode(file_get_contents($file)). '" width="16" height="16" alt="embedded disc icon">'; Frontend-Performance mit PHP 35

36 Komprimierung

37 Komprimierung Kleinere Response = weniger Datenpakete = reduzierte Übertragungszeit Komprimierung z.b. mit gzip Content Negotiation GET /xml/shop/home.html Host: kunden.1und1.de [ ] Accept-Encoding: gzip,deflate [ ] HTTP/ OK [ ] Vary: Accept-Encoding Content-Encoding: gzip Keep-Alive: timeout=15, max=97 Connection: Keep-Alive Transfer-Encoding: chunked LiveHTTPHeaders Frontend-Performance mit PHP 37

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 Frontend-Performance mit PHP 38

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 Last? Applikationsabhängig. Frontend-Performance mit PHP 39

40 Komprimiertes CSS / JavaScript CSS Frontend-Performance mit PHP 40

41 Komprimiertes CSS / JavaScript JS Frontend-Performance mit PHP 41

42 Komprimiertes CSS / JavaScript Load Time Start Render Requests Size 7,5 s 5,9 s KB 5,3 s (-30%) 3,7 s (-37%) 33 (-14) 631 KB 3,2 s (-57%) 2,1 s (-64%) 33 (-14) 254 KB (-63%) Frontend-Performance mit PHP 42

43 Stylesheets an den Anfang

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 Frontend-Performance mit PHP 44

45 Stylesheets an den Anfang Browser beginnt das Rendering erst nach dem Laden der Stylesheets Start Render CSS Frontend-Performance mit PHP 45

46 Stylesheets an den Anfang CSS im Head Start Rendering 4,7 s CSS im Content Start Rendering 6,0 s Frontend-Performance mit PHP 46

47 Stylesheets an den Anfang Frontend-Performance mit PHP 47

48 JavaScript an das Ende

49 JavaScript im Head des Dokuments Start Render Frontend-Performance mit PHP 49

50 JavaScript am Ende des Dokuments Start Render Frontend-Performance mit PHP 50

51 JavaScript am Ende des Dokuments Load Time Start Render Requests Size 7,5 s 5,9 s KB 5,3 s (-30%) 3,7 s (-37%) 33 (-14) 631 KB (-9%) 3,2 s (-57%) 2,1 s (-64%) 33 (-14) 254 KB (-63%) 2,4 s (-68%) 1,1 s (-81%) 33 (-14) 254 KB (-63%) Frontend-Performance mit PHP 51

52 Expires-Header

53 Ohne Expires-Header Frontend-Performance mit PHP 53

54 Mit Expires-Header Diese Ressource kann für die nächsten 15 Jahre immer aus dem Cache bezogen werden Frontend-Performance mit PHP 54

55 Mit Expires-Header Facebook: Hash-Tags Content Delivery Network Amazon: Versionierung Frontend-Performance mit PHP 55

56 Resultat Mit Optimierung Start Rendering 2,5 s Ohne Optimierung Start Rendering 9,0 s Frontend-Performance mit PHP 56

57 Resultat Frontend-Performance mit PHP 57

58 Resultat 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 Frontend-Performance mit PHP 58

59 Nutzen Google +0,4 Sekunden 0,6% weniger Suchanfragen Yahoo! +0,4 Sekunden 5-9% weniger Traffic Bing +2 Sekunden 4,3% weniger Umsatz Quelle: Fronteers "fast by default" 2009 Frontend-Performance mit PHP 59

60 Nutzen Shopzilla -5 Sekunden 12% mehr Umsatz 50% weniger Hardware Netflix 43% weniger Bandbreite Quelle: Fronteers "fast by default" 2009 Frontend-Performance mit PHP 60

61 Nutzen Shopzilla -5 Sekunden 12% mehr Umsatz 50% weniger Hardware Netflix 43% weniger Bandbreite Quelle: Fronteers "fast by default" 2009 Frontend-Performance mit PHP 61

62 Entwicklertools

63 Entwicklertools Wordpress minify Plugin BSD-Lizenz Frontend-Performance mit PHP 63

64 Entwicklertools Symfony minify Plugin BSD-Lizenz Frontend-Performance mit PHP 64

65 Entwicklertools TYPO3-Plugin w/minify/current/ Frontend-Performance mit PHP 65

66 Entwicklertools CSS Sprite Generator ZIP mit mehreren Bildern hochladen Generiert Sprite und passendes CSS Online nutzen oder lokal installieren PHP GD, BSD-Lizenz Frontend-Performance mit PHP 66

67 Entwicklertools Firefox-Extensions (Add-ons) Firebug YSlow Live HTTP Headers Firefox Throttle Frontend-Performance mit PHP 67

68 Entwicklertools Firebug (Netzwerk Monitoring) Fortschrittsanalyse Filter nach Ressourcen-Typ Cache-Analyse HTTP Headers XMLHttpRequest Monitoring Frontend-Performance mit PHP 68

69 Entwicklertools Firebug (Netzwerk Monitoring) Frontend-Performance mit PHP 69

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) Frontend-Performance mit PHP 70

71 Entwicklertools Live HTTP Headers Zeigt HTTP Header aller Komponenten einer Seite in Echtzeit Manipulation von Request-Daten (Beta) 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: ) 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 ,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: Cookie: dloadday= ; Cache-Control: max-age=0 HTTP/ OK Frontend-Performance mit PHP 71

72 Entwicklertools Firefox Throttle Begrenzt Download/Upload Geschwindigkeit Simulation von Zugängen mit geringer Bandbreite Frontend-Performance mit PHP 72

73 Anmerkungen? Fragen?

74 Weiterführende Informationen

75 Weiterführende Informationen Yahoo: Best Practices for Speeding Up Your Web Site Google: Web Performance Best Practices YouTube: site performance Frontend-Performance mit PHP 75

76 Weiterführende Informationen Steve Souders: High Performance Web Sites (O Reilly 2007) Steve Souders: Even Faster Web Sites (O Reilly 2009) Frontend-Performance mit PHP 76

77 Vielen Dank! Frank Kleine Nico Steiner