Ladezeiten Verbessern - Css Und JavaScript Komprimieren

8.399 Aufrufe

Veröffentlicht am

Vortrag zum Thema "Ladezeiten Verbessern - CSS und JavaScript Komprimierung". Entwickelt wurde die Präsentation für die Vortragsreihe im Rahmen der WebDevFulda-Treffen.

Veröffentlicht in: Bildung
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
8.399
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
154
Aktionen
Geteilt
0
Downloads
18
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Ladezeiten Verbessern - Css Und JavaScript Komprimieren

  1. 1. Ladezeiten verbessern<br />CSS und JavaScript komprimieren<br />Kai Greinke<br />pageload time<br />tacho 3d © vege – Fotolia.com<br />
  2. 2. Auf die Plätze …, Fertig …<br />URL eingeben  ENTER  Warten<br />
  3. 3. Was passiert in der Zeit<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Möglichkeiten beim CSS<br />JavaScript Komprimieren<br />Weitere Optimierung<br />GZIP Komprimierung nutzen<br />Cache aktivieren<br />Zusammenfassung<br />
  4. 4. Was passiert in der Zeit …<br />HTTP/1.0 200 OK<br />Date: Fri, 15 Jun 2009 16:04:22 GMT<br />Content-Language: de<br />Content-Type: text/html;charset=utf-8<br /><HTML>…</HTML><br />
  5. 5. Browser verarbeitet Inhalte …<br /><title> gesetzt und favicon dargestellt<br />
  6. 6. Browser verarbeitet Inhalte …<br />Es folgen die JavaScript Dateien im Quellcode<br />… der Browser fordert die Dateien sofort an …<br />
  7. 7. Browser verarbeitet Inhalte …<br />Dann kommen die CSS Dateien<br />… der Browser fordert auch diese an …<br />
  8. 8. Browser verarbeitet Inhalte …<br />Der <body> beginnt<br />… der Browser könnte loslegen …<br />
  9. 9. Wie viel Zeit ist verstrichen?<br />Quelle: www.webpagetest.org<br />Der Browser könnte loslegen,<br />wenn schon alle Dateien da wären!<br />
  10. 10. Werkzeuge für die Analyse<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Möglichkeiten beim CSS<br />JavaScript Komprimieren<br />Weitere Optimierung<br />GZIP Komprimierung nutzen<br />Cache aktivieren<br />Zusammenfassung<br />
  11. 11. Online Tools<br />z. B. <br />www.webpagetest.org<br />Werkzeuge für die Analyse<br />
  12. 12. Werkzeuge für die Analyse<br />Firefox Add-on<br />Firebug<br />
  13. 13. Werkzeuge für die Analyse<br />Firefox Add-on<br />YSlow<br />
  14. 14. Werkzeuge für die Analyse<br />Google <br />Page Speed <br />Add-On für den Firefox<br />
  15. 15. Werkzeuge für die Analyse<br />Sniffer<br />z. B. <br />Wireshark<br />
  16. 16. Analysieren der Inhalte<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Möglichkeiten beim CSS<br />JavaScript Komprimieren<br />Weitere Optimierung<br />GZIP Komprimierung nutzen<br />Cache aktivieren<br />Zusammenfassung<br />
  17. 17. Wo kann man optimieren?<br />Quelle: www.webpagetest.org<br />Nach 6 Sekunden beginnt der Browser die Seite zu rendern (letzt CSS / JS Datei).<br />Nach 11,8 Sekunden ist die Seite fertig geladen.<br />Test mit einer 1.5 Mbit/s aDSL Leitung in den USA … Erster Aufruf<br />
  18. 18. Analysieren der Inhalte<br />Browser … wartet<br />HTML<br />CSS<br />JavaScript<br />Browser … rendert<br />Bilder (in- und extern)<br />Audio / Video<br />RSS (fremde Inhalte)<br /><imgsrc=“images/bild.jpg“ width=“100“ height=“<br />
  19. 19. Möglichkeiten beim CSS<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Möglichkeiten beim CSS<br />JavaScript Komprimieren<br />Weitere Optimierung<br />GZIP Komprimierung nutzen<br />Cache aktivieren<br />Zusammenfassung<br />
  20. 20. Beispiel für die CSS Komprimierung<br />.button {   border-left-width: 6px;   border-left-style: solid;   border-left-color: rgb(153,153,153);   border-bottom-width: 2px;   border-bottom-style: solid;   border-bottom-color: rgb(153,153,153);}<br />216<br />
  21. 21. Verkürzte Schreibweise nutzen<br />.button {   border-left-width: 6px;   border-left-style: solid;   border-left-color: rgb(153,153,153);   border-bottom-width: 2px;   border-bottom-style: solid;   border-bottom-color: rgb(153,153,153);}<br />216<br />106<br />.button {    border-left: 6px solid rgb(153,153,153);    border-bottom: 2px solid rgb(153,153,153);}<br />
  22. 22. HEX- statt RGB-Notation<br />.button {    border-left: 6px solid rgb(153,153,153);    border-bottom: 2px solid rgb(153,153,153);}<br />106<br />88<br />.button {    border-left: 6px solid #999999;    border-bottom: 2px solid #999999;}<br />
  23. 23. Verkürzte Schreibweise (Farben)<br />.button {    border-left: 6px solid #999999;    border-bottom: 2px solid #999999;}<br />88<br />82<br />.button {    border-left: 6px solid #999;    border-bottom: 2px solid #999;}<br />
  24. 24. Zeilenumbrüche & Leerzeichen<br />.button {    border-left: 6px solid #999;    border-bottom: 2px solid #999;}<br />82<br />66<br />.button{border-left: 6px solid #999;border-bottom: 2px solid #999}<br />
  25. 25. Vorher  Nachher<br />.button {   border-left-width: 6px;   border-left-style: solid;   border-left-color: rgb(153,153,153);   border-bottom-width: 2px;   border-bottom-style: solid;   border-bottom-color: rgb(153,153,153);}<br />216<br />66<br />.button{border-left: 6px solid #999;border-bottom: 2px solid #999}<br />
  26. 26. Online Tools (compressor.ebiene.de)<br />177<br />.button{border-left-width:6px;border-left-style: solid;border-left-color:rgb(153,153,153);border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:rgb(153,153,153);}<br />
  27. 27. YUI Compressor<br />153<br />.button{border-left-width:6px;border-left-style:solid;border-left-color:#999;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#999;}<br />
  28. 28. Free CSS Toolbox<br />152<br />.button{border-bottom-color:#999;border-bottom-style:solid;border-bottom-width:2px;border-left-color:#999;border-left-style:solid;border-left-width:6px}<br />
  29. 29. Pingates CSS Compressor (tools.pingates.com)<br />66<br />.button{border-left:2px solid #999;border-bottom:6px solid #999}<br />
  30. 30. JavaScript komprimieren<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Möglichkeiten beim CSS<br />JavaScript Komprimieren<br />Weitere Optimierung<br />GZIP Komprimierung nutzen<br />Cache aktivieren<br />Zusammenfassung<br />
  31. 31. Das JavaScript Framework „mootools“ hat ca. 72 KByte<br />Kann man „mootools.js“ komprimieren?<br />Werden die „mootools.js“ überhaupt benötigt?<br />
  32. 32. mootools komprimieren?<br />179 KByte<br />
  33. 33. mootools komprimieren…<br />179 kByte  JavaScript Minifier  72 kByte nachher<br />
  34. 34. mootools komprimieren…<br />179 kByte  YUI Compressor  63 kByte nachher<br />
  35. 35. mootools - YUI statt JSMin<br />63 kByte  72 kByte<br />
  36. 36. mootools deaktivieren<br />In der index.php des Templates direkt nach <head><br />
  37. 37. Ladezeit ohne caption.js und mootools.js <br />Die Seite wird nach 1.8 Sekunden gerendert und ist nach 5 Sekunden fertig geladen.<br />
  38. 38. Nochmals zumVergleichmit und ohne mootools<br />
  39. 39. Weitere Optimierungen<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Möglichkeiten beim CSS<br />JavaScript Komprimieren<br />Weitere Optimierung<br />GZIP Komprimierung nutzen<br />Cache aktivieren<br />Zusammenfassung<br />
  40. 40. Korrekte Reihenfolge von CSS und JavaScript Dateien<br />
  41. 41. Deklaration von JavaScript Funktionen<br />Der Aufruf der Funktion kann vor oder nach der Deklaration der Funktion sein.<br />Probleme (z. B. mit Simple Mooticker) wenn mootools erst zum Schluss geladen werden.<br />
  42. 42. Probleme beim sofortigen ausführen von Skripten<br />Werden Funktionen nicht über Ereignisse, sondern direkt im Quelltext aufgerufen, so muss die Funktion vorher deklariert worden sein.<br />Daher werden manche Erweiterungen laufen und manche nicht.<br />Testen, testen, testen …<br />
  43. 43. CSS- und JavaScript-Dateien zusammenführen …<br />Alle JavaScripts in eine Datei <br />(1 statt 2 Requests)<br />Alle CSS-Formatierungen in eine Datei<br />(1 statt 5 Requests)<br />Reduziert die Anforderungen von 7 auf 2<br />
  44. 44. Der Browser hat Schuld …<br />Anzahl gleichzeitiger Verbindungen früher<br />IE 7, Firefox 2 (zwei)<br />Anzahl gleichzeitiger Verbindungen heute<br />IE 8, Firefox 3 (sechs) <br />Safari, Opera (vier)<br />
  45. 45. Inhalte auf mehrere Server verteilen<br />HTTP 1.1 Spezifikation: Max. zwei gleichzeitige Verbindung zum Server<br />Firefox 2 zwei<br />Firefox 3 sechs<br />Opera 9.26: vier<br />Opera 10.50: 16 … !!!<br />Safari 3 Max/Windows: vier<br />IE 7: zwei <br />IE 8: sechs / zwei<br />Server<br />1<br />Server<br />2<br />Browser<br />
  46. 46. Inhalte auf mehrere Server verteilen<br />Hauptinhalte: www.joomla-fulda.de<br />Bilder img.joomla-fulda.de<br />
  47. 47. Brandbreite hilft …<br />Vernetzung © Mardre - Fotolia.com<br />Cell phone on white © Mellow - Fotolia.com<br />
  48. 48. ?<br />Gedanken zum Hosting<br />Der Server des Billighosters ist für<br />1,45 € im Monat <br />genau so schnell wie der Server <br />des Premium Hosters für <br />79,00 € im Monat<br />
  49. 49. GZIP Komprimierung nutzen<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Möglichkeiten beim CSS<br />JavaScript Komprimieren<br />Weitere Optimierung<br />GZIP Komprimierung nutzen<br />Cache aktivieren<br />Zusammenfassung<br />
  50. 50. mod_deflate ist i.d.R. aktiv<br />
  51. 51. gzip für Joomla! aktivieren<br />
  52. 52. Kommunikation ohne GZIP<br />
  53. 53. Kommunikation mit GZIP<br />
  54. 54. Serverseitige Komprimierung (gzip komprimiert php-Dateien)<br />index.php ohne gzip = 23 kByte.<br />index.php mit gzip = 8 kByte. <br />
  55. 55. css als php einbinden<br />template.css ohne gzip = 12,7 kByte<br />
  56. 56. css als php einbinden<br />template.css  template.php <br />
  57. 57. css als php einbinden<br />
  58. 58. css als php einbinden<br />template.css ohne gzip = 12,7 kByte<br />template.php mit gzip = 3,4 kByte<br />
  59. 59. mootools als php einbinden<br />
  60. 60. mootools als php einbinden<br />Die index.php des Templates entsprechend anpassen<br />
  61. 61. mootools.jsohne gzip = 72 kByte<br />mootools.js.php mit gzip = 20 kByte<br />mootools als php einbinden<br />
  62. 62. Cache aktivieren<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Möglichkeiten beim CSS<br />JavaScript Komprimieren<br />Weitere Optimierung<br />GZIP Komprimierung nutzen<br />Cache aktivieren<br />Zusammenfassung<br />
  63. 63. Schalter im Backend<br />
  64. 64. ETag (entity tag)Server generiert Etag …<br />Inode + Filesize + Date Last Modification<br />
  65. 65. ETag (entity tag)Erste Anfrage … <br />
  66. 66. ETag (entity tag)Erneute Anfrage …<br />
  67. 67. ETag (entity tag)Prüfen, ob Etag gleich …<br />
  68. 68. ETag (entity tag)304 Not Modified<br />
  69. 69. Alle Techniken kombiniert<br />
  70. 70. CSS – Alle Zusammen … (1/2)css_together.php<br />
  71. 71. CSS – Alle Zusammen … (2/2)css_together.php<br />
  72. 72. Index.php des Templates<br />mootools.js und caption.js deaktiviert<br />Stylesheets rausgeschmissen<br />js_together.php und css_together.php übernehmen<br />
  73. 73. Ergebnis – Erste Anfrage<br />
  74. 74. Ergebnis – Zweite Anfrage<br />
  75. 75. Langsame Verbindung (56k)<br />Ab 28 Sekunden rendern … Nach 49 Sek komplett<br />Ab 11 Sekunden rendern … Nach 22 Sek komplett<br />
  76. 76. Wiederholter Aufruf (56k)<br />Ab 9 Sekunden rendern … Nach 25 Sek komplett<br />Ab 1,4 Sekunden rendern … Nach 4 Sek komplett<br />
  77. 77. .htaccess nutzen<br />Prima Ideen auch mit Hilfe der .htaccess<br />
  78. 78. Zusammenfassung<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Möglichkeiten beim CSS<br />JavaScript Komprimieren<br />Weitere Optimierung<br />GZIP Komprimierung nutzen<br />Cache aktivieren<br />Zusammenfassung<br />
  79. 79. Zusammenfassung (1/3)Requests minimieren<br />Alle Dateien vom selben Server _oder_Dateien auf max. 2-4 Server verteilen<br />Fremde Inhalte erhöhen Zeit um eine weitere Sekunde, können Anz. Download aber erhöhen<br />Anzahl der Serverzugriffe minimieren<br />Alle CSS Dateien in eine Datei zusammenfassen<br />Alle JS Dateien in eine Datei zusammenfassen<br />
  80. 80. Zusammenfassung (2/3)Dateigröße reduzieren<br />Code optimieren<br />CSS-Farben: z. B. Hex Schreibweise statt RGB<br />JavaScript: z. B. Kommentare entfernen<br />CSS und JavaScript auslagern<br />Wir nur einmal geladen<br />GZIP nutzen<br />PHP-Dateien meist kein Problem<br />CSS, JavaScripts als php<br />
  81. 81. Zusammenfassung (3/3)Rendern optimieren<br />Erneutes „Rendern“ vermeiden<br />Höhe und Breite von Bildern und Tabellen angeben.<br />CSS Dateien in den <head><br />„Rendern“ früher beginnen<br />JavaScripts am Ende (vor dem </body>) einbinden<br />
  82. 82. Vielen Dank<br />Präsentation auf<br />webdevfulda.de<br />Beitrag auf<br />joomla-fulda.de<br />Viel Spaß beim Testen der Möglichkeiten<br />Kai Greinke<br />

×