20-mal heruntergeladen
Hochgeladen vonJoomla! User Group Fulda
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Das Dokument behandelt verschiedene Techniken zur Verbesserung der Ladezeiten von Webseiten, einschließlich der Komprimierung von CSS und JavaScript sowie der Nutzung von Gzip und Caching. Es werden Tools zur Analyse der Seitenleistung erwähnt und konkrete Beispiele für die Optimierung von Code. Eine effektive Reihenfolge von Datei-Anfragen wird betont, um die Rendering-Zeiten zu minimieren.
Weitere ähnliche Inhalte
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
- 1. Ladezeiten verbessernCSS undJavaScript komprimierenKai Greinkepageload timetacho 3d © vege – Fotolia.com
- 2. Auf die Plätze…, Fertig …URL eingeben ENTER Warten
- 3. Was passiert inder ZeitWas passiert in der ZeitWerkzeuge für die AnalyseAnalysieren der InhalteMöglichkeiten beim CSSJavaScript KomprimierenWeitere OptimierungGZIP Komprimierung nutzenCache aktivierenZusammenfassung
- 4. Was passiert inder Zeit …HTTP/1.0 200 OKDate: Fri, 15 Jun 2009 16:04:22 GMTContent-Language: deContent-Type: text/html;charset=utf-8<HTML>…</HTML>
- 5. Browser verarbeitet Inhalte…<title> gesetzt und favicon dargestellt
- 6. Browser verarbeitet Inhalte …Es folgen die JavaScript Dateien im Quellcode… der Browser fordert die Dateien sofort an …
- 7. Browser verarbeitet Inhalte …Dann kommen die CSS Dateien… der Browser fordert auch diese an …
- 8. Browser verarbeitet Inhalte …Der <body> beginnt… der Browser könnte loslegen …
- 9. Wie viel Zeitist verstrichen?Quelle: www.webpagetest.orgDer Browser könnte loslegen,wenn schon alle Dateien da wären!
- 10. Werkzeuge für dieAnalyseWas passiert in der ZeitWerkzeuge für die AnalyseAnalysieren der InhalteMöglichkeiten beim CSSJavaScript KomprimierenWeitere OptimierungGZIP Komprimierung nutzenCache aktivierenZusammenfassung
- 11. Online Toolsz. B.www.webpagetest.orgWerkzeuge für die Analyse
- 12. Werkzeuge für dieAnalyseFirefox Add-onFirebug
- 13. Werkzeuge für dieAnalyseFirefox Add-onYSlow
- 14. Werkzeuge für dieAnalyseGoogle Page Speed Add-On für den Firefox
- 15. Werkzeuge für dieAnalyseSnifferz. B. Wireshark
- 16. Analysieren der InhalteWaspassiert in der ZeitWerkzeuge für die AnalyseAnalysieren der InhalteMöglichkeiten beim CSSJavaScript KomprimierenWeitere OptimierungGZIP Komprimierung nutzenCache aktivierenZusammenfassung
- 17. Wo kann manoptimieren?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
- 18. Analysieren der InhalteBrowser… wartetHTMLCSSJavaScriptBrowser … rendertBilder (in- und extern)Audio / VideoRSS (fremde Inhalte)<imgsrc=“images/bild.jpg“ width=“100“ height=“
- 19. Möglichkeiten beim CSSWaspassiert in der ZeitWerkzeuge für die AnalyseAnalysieren der InhalteMöglichkeiten beim CSSJavaScript KomprimierenWeitere OptimierungGZIP Komprimierung nutzenCache aktivierenZusammenfassung
- 20. Beispiel für dieCSS Komprimierung.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);}216
- 21. Verkürzte Schreibweise nutzen.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);}216106.button { border-left: 6px solid rgb(153,153,153); border-bottom: 2px solid rgb(153,153,153);}
- 22. HEX- statt RGB-Notation.button{ border-left: 6px solid rgb(153,153,153); border-bottom: 2px solid rgb(153,153,153);}10688.button { border-left: 6px solid #999999; border-bottom: 2px solid #999999;}
- 23. Verkürzte Schreibweise (Farben).button{ border-left: 6px solid #999999; border-bottom: 2px solid #999999;}8882.button { border-left: 6px solid #999; border-bottom: 2px solid #999;}
- 24. Zeilenumbrüche & Leerzeichen.button{ border-left: 6px solid #999; border-bottom: 2px solid #999;}8266.button{border-left: 6px solid #999;border-bottom: 2px solid #999}
- 25. Vorher Nachher.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);}21666.button{border-left: 6px solid #999;border-bottom: 2px solid #999}
- 26. Online Tools (compressor.ebiene.de)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);}
- 27.
- 28.
- 29. Pingates CSS Compressor(tools.pingates.com)66.button{border-left:2px solid #999;border-bottom:6px solid #999}
- 30. JavaScript komprimierenWas passiertin der ZeitWerkzeuge für die AnalyseAnalysieren der InhalteMöglichkeiten beim CSSJavaScript KomprimierenWeitere OptimierungGZIP Komprimierung nutzenCache aktivierenZusammenfassung
- 31. Das JavaScript Framework„mootools“ hat ca. 72 KByteKann man „mootools.js“ komprimieren?Werden die „mootools.js“ überhaupt benötigt?
- 32.
- 33. mootools komprimieren…179 kByte JavaScript Minifier 72 kByte nachher
- 34. mootools komprimieren…179 kByte YUI Compressor 63 kByte nachher
- 35. mootools -YUI statt JSMin63 kByte 72 kByte
- 36. mootools deaktivierenIn derindex.php des Templates direkt nach <head>
- 37. Ladezeit ohne caption.jsund mootools.js Die Seite wird nach 1.8 Sekunden gerendert und ist nach 5 Sekunden fertig geladen.
- 38. Nochmals zumVergleichmit undohne mootools
- 39. Weitere OptimierungenWas passiertin der ZeitWerkzeuge für die AnalyseAnalysieren der InhalteMöglichkeiten beim CSSJavaScript KomprimierenWeitere OptimierungGZIP Komprimierung nutzenCache aktivierenZusammenfassung
- 40. Korrekte Reihenfolge vonCSS und JavaScript Dateien
- 41. Deklaration von JavaScriptFunktionenDer 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.
- 42. Probleme beim sofortigenausführen von SkriptenWerden 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 …
- 43. CSS- und JavaScript-Dateienzusammenführen …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
- 44. Der Browser hatSchuld …Anzahl gleichzeitiger Verbindungen früherIE 7, Firefox 2 (zwei)Anzahl gleichzeitiger Verbindungen heuteIE 8, Firefox 3 (sechs) Safari, Opera (vier)
- 45. Inhalte auf mehrereServer verteilenHTTP 1.1 Spezifikation: Max. zwei gleichzeitige Verbindung zum ServerFirefox 2 zweiFirefox 3 sechsOpera 9.26: vierOpera 10.50: 16 … !!!Safari 3 Max/Windows: vierIE 7: zwei IE 8: sechs / zweiServer1Server2Browser
- 46. Inhalte auf mehrereServer verteilenHauptinhalte: www.joomla-fulda.deBilder img.joomla-fulda.de
- 47. Brandbreite hilft …Vernetzung© Mardre - Fotolia.comCell phone on white © Mellow - Fotolia.com
- 48. ?Gedanken zum HostingDerServer des Billighosters ist für1,45 € im Monat genau so schnell wie der Server des Premium Hosters für 79,00 € im Monat
- 49. GZIP Komprimierung nutzenWaspassiert in der ZeitWerkzeuge für die AnalyseAnalysieren der InhalteMöglichkeiten beim CSSJavaScript KomprimierenWeitere OptimierungGZIP Komprimierung nutzenCache aktivierenZusammenfassung
- 50.
- 51. gzip für Joomla!aktivieren
- 52.
- 53.
- 54. Serverseitige Komprimierung (gzipkomprimiert php-Dateien)index.php ohne gzip = 23 kByte.index.php mit gzip = 8 kByte.
- 55. css als phpeinbindentemplate.css ohne gzip = 12,7 kByte
- 56. css als phpeinbindentemplate.css template.php
- 57. css als phpeinbinden
- 58. css als phpeinbindentemplate.css ohne gzip = 12,7 kBytetemplate.php mit gzip = 3,4 kByte
- 59. mootools als phpeinbinden
- 60. mootools als phpeinbindenDie index.php des Templates entsprechend anpassen
- 61. mootools.jsohne gzip =72 kBytemootools.js.php mit gzip = 20 kBytemootools als php einbinden
- 62. Cache aktivierenWas passiertin der ZeitWerkzeuge für die AnalyseAnalysieren der InhalteMöglichkeiten beim CSSJavaScript KomprimierenWeitere OptimierungGZIP Komprimierung nutzenCache aktivierenZusammenfassung
- 63.
- 64. ETag (entity tag)Servergeneriert Etag …Inode + Filesize + Date Last Modification
- 65. ETag (entity tag)ErsteAnfrage …
- 66. ETag (entity tag)ErneuteAnfrage …
- 67. ETag (entity tag)Prüfen,ob Etag gleich …
- 68. ETag (entity tag)304Not Modified
- 69.
- 70. CSS – AlleZusammen … (1/2)css_together.php
- 71. CSS – AlleZusammen … (2/2)css_together.php
- 72. Index.php des Templatesmootools.jsund caption.js deaktiviertStylesheets rausgeschmissenjs_together.php und css_together.php übernehmen
- 73. Ergebnis – ErsteAnfrage
- 74. Ergebnis – ZweiteAnfrage
- 75. Langsame Verbindung (56k)Ab28 Sekunden rendern … Nach 49 Sek komplettAb 11 Sekunden rendern … Nach 22 Sek komplett
- 76. Wiederholter Aufruf (56k)Ab9 Sekunden rendern … Nach 25 Sek komplettAb 1,4 Sekunden rendern … Nach 4 Sek komplett
- 77. .htaccess nutzenPrima Ideenauch mit Hilfe der .htaccess
- 78. ZusammenfassungWas passiert inder ZeitWerkzeuge für die AnalyseAnalysieren der InhalteMöglichkeiten beim CSSJavaScript KomprimierenWeitere OptimierungGZIP Komprimierung nutzenCache aktivierenZusammenfassung
- 79. Zusammenfassung (1/3)Requests minimierenAlleDateien vom selben Server _oder_Dateien auf max. 2-4 Server verteilenFremde Inhalte erhöhen Zeit um eine weitere Sekunde, können Anz. Download aber erhöhenAnzahl der Serverzugriffe minimierenAlle CSS Dateien in eine Datei zusammenfassenAlle JS Dateien in eine Datei zusammenfassen
- 80. Zusammenfassung (2/3)Dateigröße reduzierenCodeoptimierenCSS-Farben: z. B. Hex Schreibweise statt RGBJavaScript: z. B. Kommentare entfernenCSS und JavaScript auslagernWir nur einmal geladenGZIP nutzenPHP-Dateien meist kein ProblemCSS, JavaScripts als php
- 81. Zusammenfassung (3/3)Rendern optimierenErneutes„Rendern“ vermeidenHöhe und Breite von Bildern und Tabellen angeben.CSS Dateien in den <head>„Rendern“ früher beginnenJavaScripts am Ende (vor dem </body>) einbinden
- 82. Vielen DankPräsentation aufwebdevfulda.deBeitragaufjoomla-fulda.deViel Spaß beim Testen der MöglichkeitenKai Greinke