Successfully reported this slideshow.

Ladezeiten Verbessern - Css Und JavaScript Komprimieren

984 views

Published on

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

Published in: Education
  • einige nützliche Tips, um Joomla zu optimieren:-)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Ladezeiten Verbessern - Css Und JavaScript Komprimieren

  1. 1. Kai Greinketacho 3d © vege – Fotolia.com
  2. 2. URL eingeben  ENTER  Warten © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  3. 3. • Was passiert in der Zeit• Werkzeuge für die Analyse• Analysieren der Inhalte• Möglichkeiten beim CSS• JavaScript Komprimieren• Weitere Optimierung• GZIP Komprimierung nutzen• Cache aktivieren• Zusammenfassung
  4. 4. Browser Webserver Browser fordert Seite an 1 KByte Server stellt Seite bereit GET / HTTP/1.1 /…/index.html Server sendet Seite 32 KByte HTTP/1.0 200 OK Browser verarbeitet Date: Fri, 15 Jun 2009 16:04:22 GMTInhalte, fordert weitere Dateien Content-Language: de an, rendert die Seite und zeigt Content-Type: text/html;charset=utf-8 sie an. <HTML>…</HTML> © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  5. 5. <title> gesetzt und favicon dargestellt © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  6. 6. Es folgen die JavaScript Dateien im Quellcode… der Browser fordert die Dateien sofort an … © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  7. 7. Dann kommen die CSS Dateien… der Browser fordert auch diese an … © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  8. 8. Der <body> beginnt… der Browser könnte loslegen … © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  9. 9. Quelle: www.webpagetest.org Der Browser könnte loslegen,wenn schon alle Dateien da wären! © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  10. 10. • Was passiert in der Zeit• Werkzeuge für die Analyse• Analysieren der Inhalte• Möglichkeiten beim CSS• JavaScript Komprimieren• Weitere Optimierung• GZIP Komprimierung nutzen• Cache aktivieren• Zusammenfassung
  11. 11. Online Tools z. B. www.webpagetest.org© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  12. 12. Firefox Add-on Firebug© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  13. 13. Firefox Add-on YSlow© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  14. 14. Google Page Speed Add-On für den Firefox© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  15. 15. Sniffer z. B. Wireshark© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  16. 16. • Was passiert in der Zeit• Werkzeuge für die Analyse• Analysieren der Inhalte• Möglichkeiten beim CSS• JavaScript Komprimieren• Weitere Optimierung• GZIP Komprimierung nutzen• Cache aktivieren• Zusammenfassung
  17. 17. Quelle: www.webpagetest.orgNach 6 Sekunden beginnt der Browser die Seite zu rendern (letzt CSS / JS Datei). Nach 11,8 Sekunden ist die Seite fertig geladen. Test mit einer 1.5 Mbit/s aDSL Leitung in den USA … Erster Aufruf © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  18. 18. BROWSER … WARTET BROWSER … RENDERT  HTML  Bilder (in- und extern)  CSS  Audio / Video  JavaScript  RSS (fremde Inhalte)<img src=“images/bild.jpg“ width=“100“ height=“ © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  19. 19. • Was passiert in der Zeit• Werkzeuge für die Analyse• Analysieren der Inhalte• Möglichkeiten beim CSS• JavaScript Komprimieren• Weitere Optimierung• GZIP Komprimierung nutzen• Cache aktivieren• Zusammenfassung
  20. 20. .button { 216 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);} © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  21. 21. .button { 216 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);}.button { 106 border-left: 6px solid rgb(153,153,153); border-bottom: 2px solid rgb(153,153,153);} © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  22. 22. .button { 106 border-left: 6px solid rgb(153,153,153); border-bottom: 2px solid rgb(153,153,153);}.button { 88 border-left: 6px solid #999999; border-bottom: 2px solid #999999;} © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  23. 23. .button { 88 border-left: 6px solid #999999; border-bottom: 2px solid #999999;}.button { 82 border-left: 6px solid #999; border-bottom: 2px solid #999;} © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  24. 24. .button { 82 border-left: 6px solid #999; border-bottom: 2px solid #999;}.button{border-left: 6px solid #999;border-bottom: 662px solid #999} © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  25. 25. .button { 216 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);}.button{border-left: 6px solid #999;border-bottom: 662px solid #999} © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  26. 26. 177.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);} © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  27. 27. 153.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;} © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  28. 28. 152.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} © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  29. 29. 66.button{border-left:2px solid #999;border-bottom:6px solid #999} © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  30. 30. • Was passiert in der Zeit• Werkzeuge für die Analyse• Analysieren der Inhalte• Möglichkeiten beim CSS• JavaScript Komprimieren• Weitere Optimierung• GZIP Komprimierung nutzen• Cache aktivieren• Zusammenfassung
  31. 31. Kann man „mootools.js“ komprimieren?Werden die „mootools.js“ überhaupt benötigt? © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  32. 32. 179 KByte© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  33. 33. 179 kByte  JavaScript Minifier  72 kByte nachher © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  34. 34. 179 kByte  YUI Compressor  63 kByte nachher © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  35. 35. 63 kByte  72 kByte© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  36. 36. In der index.php des Templates direkt nach <head> © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  37. 37. Die Seite wird nach 1.8 Sekunden gerendert und ist nach 5 Sekunden fertig geladen. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  38. 38. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  39. 39. • Was passiert in der Zeit• Werkzeuge für die Analyse• Analysieren der Inhalte• Möglichkeiten beim CSS• JavaScript Komprimieren• Weitere Optimierung• GZIP Komprimierung nutzen• Cache aktivieren• Zusammenfassung
  40. 40. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  41. 41. Der Aufruf der Funktion kann vor oder nach der Deklaration der Funktion sein. Probleme (z. B. mit Simple Mooticker) wenn mootools erst zum Schluss geladen werden.© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  42. 42. Werden Funktionen nicht über Ereignisse, sondern direkt im Quelltext aufgerufen, so muss die Funktion vorher deklariert worden sein. Daher werden manche Erweiterungen laufen und manche nicht. Testen, testen, testen …© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  43. 43. Alle JavaScripts in eine Datei (1 statt 2 Requests) Alle CSS-Formatierungen in eine Datei (1 statt 5 Requests) Reduziert die Anforderungen von 7 auf 2© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  44. 44. Anzahl gleichzeitiger Verbindungen früher IE 7, Firefox 2 (zwei) Anzahl gleichzeitiger Verbindungen heute IE 8, Firefox 3 (sechs) Safari, Opera (vier)© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  45. 45. HTTP 1.1 Spezifikation: Max. zwei gleichzeitige Verbindung zum ServerServer Server  Firefox 2 zwei 1 2  Firefox 3 sechs  Opera 9.26: vier  Opera 10.50: 16 … !!!  Safari 3 Max/Windows: vier Browser  IE 7: zwei  IE 8: sechs / zwei © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  46. 46. Hauptinhalte: www.joomla-fulda.deBilder img.joomla-fulda.de © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  47. 47. Vernetzung © Mardre - Fotolia.com Cell phone on white © Mellow - Fotolia.com © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  48. 48. Der Server des Billighosters ist für 1,45 € im Monat genau so schnell wie der Server des Premium Hosters für 79,00 € im Monat© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  49. 49. • Was passiert in der Zeit• Werkzeuge für die Analyse• Analysieren der Inhalte• Möglichkeiten beim CSS• JavaScript Komprimieren• Weitere Optimierung• GZIP Komprimierung nutzen• Cache aktivieren• Zusammenfassung
  50. 50. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  51. 51. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  52. 52. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  53. 53. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  54. 54. index.php ohne gzip = 23 kByte. index.php mit gzip = 8 kByte.© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  55. 55. template.css ohne gzip = 12,7 kByte© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  56. 56. template.css  template.php© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  57. 57. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  58. 58. template.css ohne gzip = 12,7 kBytetemplate.php mit gzip = 3,4 kByte© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  59. 59. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  60. 60. Die index.php des Templates entsprechend anpassen © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  61. 61. mootools.js ohne gzip = 72 kBytemootools.js.php mit gzip = 20 kByte© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  62. 62. • Was passiert in der Zeit• Werkzeuge für die Analyse• Analysieren der Inhalte• Möglichkeiten beim CSS• JavaScript Komprimieren• Weitere Optimierung• GZIP Komprimierung nutzen• Cache aktivieren• Zusammenfassung
  63. 63. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  64. 64. Inode + Filesize + Date Last Modification © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  65. 65. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  66. 66. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  67. 67. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  68. 68. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  69. 69. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  70. 70. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  71. 71. mootools.js und caption.js deaktiviert Stylesheets rausgeschmissenjs_together.php und css_together.php übernehmen © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  72. 72. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  73. 73. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  74. 74. Ab 28 Sekunden rendern … Nach 49 Sek komplett Ab 11 Sekunden rendern … Nach 22 Sek komplett© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  75. 75. Ab 9 Sekunden rendern … Nach 25 Sek komplett Ab 1,4 Sekunden rendern … Nach 4 Sek komplett© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  76. 76. Prima Ideen auch mit Hilfe der .htaccess © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  77. 77. • Was passiert in der Zeit• Werkzeuge für die Analyse• Analysieren der Inhalte• Möglichkeiten beim CSS• JavaScript Komprimieren• Weitere Optimierung• GZIP Komprimierung nutzen• Cache aktivieren• Zusammenfassung
  78. 78.  Alle Dateien vom selben Server _oder_ Dateien auf max. 2-4 Server verteilen  Fremde Inhalte erhöhen Zeit um eine weitere Sekunde, können Anz. Download aber erhöhen Anzahl der Serverzugriffe minimieren  Alle CSS Dateien in eine Datei zusammenfassen  Alle JS Dateien in eine Datei zusammenfassen © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  79. 79.  Code optimieren  CSS-Farben: z. B. Hex Schreibweise statt RGB  JavaScript: z. B. Kommentare entfernen CSS und JavaScript auslagern  Wir nur einmal geladen GZIP nutzen  PHP-Dateien meist kein Problem  CSS, JavaScripts als php © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  80. 80.  Erneutes „Rendern“ vermeiden  Höhe und Breite von Bildern und Tabellen angeben.  CSS Dateien in den <head> „Rendern“ früher beginnen  JavaScripts am Ende (vor dem </body>) einbinden © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  81. 81. Präsentation auf webdevfulda.de Beitrag auf joomla-fulda.de Viel Spaß beim Testen der Möglichkeiten Kai Greinke© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe

×