Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Ladezeiten verbessern<br />CSS und JavaScript komprimieren<br />Kai Greinke<br />pageload time<br />tacho 3d © vege – Foto...
Auf die Plätze …, Fertig …<br />URL eingeben   ENTER    Warten<br />
Was passiert in der Zeit<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Mö...
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 />Co...
Browser verarbeitet Inhalte …<br /><title> gesetzt und favicon dargestellt<br />
Browser verarbeitet Inhalte  …<br />Es folgen die JavaScript Dateien im Quellcode<br />… der Browser fordert die Dateien s...
Browser verarbeitet Inhalte  …<br />Dann kommen die CSS Dateien<br />… der Browser fordert auch diese an …<br />
Browser verarbeitet Inhalte  …<br />Der <body> beginnt<br />… der Browser könnte loslegen …<br />
Wie viel Zeit ist verstrichen?<br />Quelle: www.webpagetest.org<br />Der Browser könnte loslegen,<br />wenn schon alle Dat...
Werkzeuge für die Analyse<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />M...
Online Tools<br />z. B. <br />www.webpagetest.org<br />Werkzeuge für die Analyse<br />
Werkzeuge für die Analyse<br />Firefox Add-on<br />Firebug<br />
Werkzeuge für die Analyse<br />Firefox Add-on<br />YSlow<br />
Werkzeuge für die Analyse<br />Google <br />Page Speed <br />Add-On für den Firefox<br />
Werkzeuge für die Analyse<br />Sniffer<br />z. B. <br />Wireshark<br />
Analysieren der Inhalte<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Mög...
Wo kann man optimieren?<br />Quelle: www.webpagetest.org<br />Nach 6 Sekunden beginnt der Browser die Seite zu rendern (le...
Analysieren der Inhalte<br />Browser … wartet<br />HTML<br />CSS<br />JavaScript<br />Browser … rendert<br />Bilder (in- u...
Möglichkeiten beim CSS<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Mögl...
Beispiel für die CSS Komprimierung<br />.button {   border-left-width: 6px;   border-left-style: solid;   border-left-colo...
Verkürzte Schreibweise nutzen<br />.button {   border-left-width: 6px;   border-left-style: solid;   border-left-color: rg...
HEX- statt RGB-Notation<br />.button {    border-left: 6px solid rgb(153,153,153);    border-bottom: 2px solid rgb(153,153...
Verkürzte Schreibweise (Farben)<br />.button {    border-left: 6px solid #999999;    border-bottom: 2px solid #999999;}<br...
Zeilenumbrüche & Leerzeichen<br />.button {    border-left: 6px solid #999;    border-bottom: 2px solid #999;}<br />82<br ...
Vorher   Nachher<br />.button {   border-left-width: 6px;   border-left-style: solid;   border-left-color: rgb(153,153,1...
Online Tools (compressor.ebiene.de)<br />177<br />.button{border-left-width:6px;border-left-style: solid;border-left-color...
YUI Compressor<br />153<br />.button{border-left-width:6px;border-left-style:solid;border-left-color:#999;border-bottom-wi...
Free CSS Toolbox<br />152<br />.button{border-bottom-color:#999;border-bottom-style:solid;border-bottom-width:2px;border-l...
Pingates CSS Compressor (tools.pingates.com)<br />66<br />.button{border-left:2px solid #999;border-bottom:6px solid #999}...
JavaScript komprimieren<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Mög...
Das JavaScript Framework „mootools“ hat ca. 72 KByte<br />Kann man „mootools.js“ komprimieren?<br />Werden die „mootools.j...
mootools komprimieren?<br />179 KByte<br />
mootools komprimieren…<br />179 kByte      JavaScript Minifier      72 kByte nachher<br />
mootools komprimieren…<br />179 kByte      YUI Compressor      63 kByte nachher<br />
mootools  - YUI statt JSMin<br />63 kByte  72 kByte<br />
mootools deaktivieren<br />In der index.php des Templates direkt nach <head><br />
Ladezeit ohne caption.js und mootools.js <br />Die Seite wird nach 1.8 Sekunden gerendert und ist nach 5 Sekunden fertig g...
Nochmals zumVergleichmit und ohne mootools<br />
Weitere Optimierungen<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Mögli...
Korrekte Reihenfolge von CSS und JavaScript Dateien<br />
Deklaration von JavaScript Funktionen<br />Der Aufruf der Funktion kann vor oder nach der Deklaration der Funktion sein.<b...
Probleme beim sofortigen ausführen von Skripten<br />Werden Funktionen  nicht über Ereignisse, sondern direkt im Quelltext...
CSS- und JavaScript-Dateien zusammenführen …<br />Alle JavaScripts in eine Datei <br />(1 statt 2 Requests)<br />Alle CSS-...
Der Browser hat Schuld …<br />Anzahl gleichzeitiger Verbindungen früher<br />IE 7, Firefox 2 (zwei)<br />Anzahl gleichzeit...
Inhalte auf mehrere Server verteilen<br />HTTP 1.1 Spezifikation: Max. zwei gleichzeitige Verbindung zum Server<br />Firef...
Inhalte auf mehrere Server verteilen<br />Hauptinhalte:		www.joomla-fulda.de<br />Bilder			img.joomla-fulda.de<br />
Brandbreite hilft …<br />Vernetzung © Mardre - Fotolia.com<br />Cell phone on white © Mellow - Fotolia.com<br />
?<br />Gedanken zum Hosting<br />Der Server des Billighosters ist für<br />1,45 € im Monat <br />genau so schnell wie der ...
GZIP Komprimierung nutzen<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />M...
mod_deflate ist i.d.R. aktiv<br />
gzip für Joomla! aktivieren<br />
Kommunikation ohne GZIP<br />
Kommunikation mit GZIP<br />
Serverseitige Komprimierung (gzip komprimiert php-Dateien)<br />index.php ohne gzip = 23 kByte.<br />index.php mit gzip = ...
css als php einbinden<br />template.css ohne gzip = 12,7 kByte<br />
css als php einbinden<br />template.css              template.php <br />
css als php einbinden<br />
css als php einbinden<br />template.css ohne gzip = 12,7 kByte<br />template.php mit gzip = 3,4 kByte<br />
mootools als php einbinden<br />
mootools als php einbinden<br />Die index.php des Templates entsprechend anpassen<br />
mootools.jsohne gzip = 72 kByte<br />mootools.js.php mit gzip = 20 kByte<br />mootools als php einbinden<br />
Cache aktivieren<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Möglichkei...
Schalter im Backend<br />
ETag (entity tag)Server generiert Etag …<br />Inode   +   Filesize   +   Date Last Modification<br />
ETag (entity tag)Erste Anfrage … <br />
ETag (entity tag)Erneute Anfrage …<br />
ETag (entity tag)Prüfen, ob Etag gleich …<br />
ETag (entity tag)304 Not Modified<br />
Alle Techniken kombiniert<br />
CSS – Alle Zusammen … (1/2)css_together.php<br />
CSS – Alle Zusammen … (2/2)css_together.php<br />
Index.php des Templates<br />mootools.js und caption.js deaktiviert<br />Stylesheets rausgeschmissen<br />js_together.php ...
Ergebnis – Erste Anfrage<br />
Ergebnis – Zweite Anfrage<br />
Langsame Verbindung (56k)<br />Ab 28 Sekunden rendern … Nach 49 Sek komplett<br />Ab 11 Sekunden rendern … Nach 22 Sek kom...
Wiederholter Aufruf (56k)<br />Ab 9 Sekunden rendern … Nach 25 Sek komplett<br />Ab 1,4 Sekunden rendern … Nach 4 Sek komp...
.htaccess nutzen<br />Prima Ideen auch mit Hilfe der .htaccess<br />
Zusammenfassung<br />Was passiert in der Zeit<br />Werkzeuge für die Analyse<br />Analysieren der Inhalte<br />Möglichkeit...
Zusammenfassung (1/3)Requests minimieren<br />Alle Dateien vom selben Server _oder_Dateien auf max. 2-4 Server verteilen<b...
Zusammenfassung (2/3)Dateigröße reduzieren<br />Code optimieren<br />CSS-Farben: z. B. Hex Schreibweise statt RGB<br />Jav...
Zusammenfassung (3/3)Rendern optimieren<br />Erneutes „Rendern“ vermeiden<br />Höhe und Breite von Bildern und Tabellen an...
Vielen Dank<br />Präsentation auf<br />webdevfulda.de<br />Beitrag auf<br />joomla-fulda.de<br />Viel Spaß beim Testen der...
Nächste SlideShare
Wird geladen in …5
×

Ladezeiten Verbessern - Css Und JavaScript Komprimieren

8.737 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
  • Als Erste(r) kommentieren

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

×