Your SlideShare is downloading. ×
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ladezeiten Verbessern - Css Und JavaScript Komprimieren

695
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.

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

1 Comment
0 Likes
Statistics
Notes
  • 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

No Downloads
Views
Total Views
695
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Kai Greinketacho 3d © vege – Fotolia.com
  • 2. URL eingeben  ENTER  Warten © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. 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. <title> gesetzt und favicon dargestellt © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. 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. 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. 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. • 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. 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. Firefox Add-on Firebug© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 13. Firefox Add-on YSlow© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. Sniffer z. B. Wireshark© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. 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. 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. • 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. .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. .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. .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. .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. .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. .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. 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. 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. 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. 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. • 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. 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. 179 KByte© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. 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. 63 kByte  72 kByte© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. 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. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. 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. 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. 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. 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. 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. 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. 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. • 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. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 51. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 52. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 53. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. 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. template.css  template.php© Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 57. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. 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. • 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. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 64. Inode + Filesize + Date Last Modification © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 65. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 66. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 67. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 68. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 69. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 70. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 73. © Kai Greinke 2010 - Joomla! User Group Fulda - 07. April 2010 - Präsentation im Rahmen der WebDevFulda Vortragsreihe
  • 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. 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. 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. • 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.  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.  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.  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. 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