Joomla! Performance Tweaking Joomla!Day 2012 Berlin. Copyright by Frank Delventhal (

Transkript

1 Joomla! Performance Tweaking Joomla!Day 2012 Berlin

2 Kurze Vorstellung der Tools XAMPP Lokale Entwicklungsumgebung mit allem was man für den Start braucht Apache Benchmark Bestandteil von XAMPP, man kann hiermit testen wie sich Einstellungen in Joomla! auswirken Firebug für Firefox YSlow Plugin PageSpeed Plugin für Chrome auch online

3 Das Testszenario Joomla! Installation von mit den deutschen Beispieltexten installiert. Wie wurde getestet? Apache Benchmark: Anfragen (10 gleichzeitig) KleineTipps, zum testen: Kein X-Debug laufen lassen Kappt die Internerverbindung und beendet den Virenscanner / Firewall Alle Programme, die nicht laufen müssen sollten geschlossen werden. Macht alle Test mit der selben Konfiguration Beez 2 Template von Angie Radtke

4 Ergebnis der Standard Installation:

5 Testlauf 1: Standard Installation Dauer (s): 51,870 Requests: 30 gesamt Größe: 528,4K

6 Testlauf 2: Plugins Installieren Akeeba Backup aktiviert JCE aktiviert JCE Mediabox aktiviert JS CSS Control deaktiviert JFinalizer deaktiviert Beim Testen der Mediabox darf man nicht im Backend angemeldet sein, da sonst 2 Requests in YSlow unterschlagen werden. 2 AJAX geladene XHTML Dokumente (Lightbox, Tooltips) Standard Plugins Dauer (s): 51,870 51,215 #Requests: gesamt Größe: 528,4K 600,7K

7 Testlauf 3: Plugins / Module deaktivieren "Alles was keine Miete zahlt fliegt raus!" 51,761s 30 Module (von 51) 7 Plugins (von 52) 51,418s Index wieder aktiviert (4 Stück) 49,920s Benutzer Profil wieder aktiviert 50,825s Deaktivierung Protokoll und Debug 44,398s alle Menüs und Breadcrumbs deaktiviert Standard Plugins Deaktivieren Dauer (s): 51,870 51,215 49,920 #Requests: gesamt Größe: 528,4K 600,7K 600,7K

8 Testlauf 4: Caching Mehr Leistung auf Knopfdruck!" 28,798s Cache an / Datei 29,017s Cache an / Cache_Lite 26,816s erweitertes Caching / Datei 27,378s erweitertes Caching / Cache_Lite Standard Plugins Deaktivieren Cache Dauer (s): 51,870 51,215 49,920 26,816 #Requests: gesamt Größe:528,4K 600,7K 600,7K 600,7K

9 Testlauf 5: GZip Wie viel Watte kann man in die Tüte stopfen?" Joomla! Zip-Funktion komprimiert nur den HTML Anteil Generell sollte lieber über den Server (mod_deflate) komprimiert werden (CSS, JS, Fonts) Deaktivieren Cache GZip Dauer (s): 49,920 26,816 26,270 #Requests: gesamt Größe:600,7K 600,7K 588,3K

10 Testlauf 6a: Geht es mit weniger?... es gibt so viele Dinge derer ich nicht bedarf Sokrates JS CSS Control aktiviert das Laden von Mootools.js, caption.js etc. unterbunden habe nicht gemerkt das das Vergrößern / Verkleinern der Schrift nicht mehr ging JCE Mediabox als Plugin deaktiviert. Deaktivieren Cache GZip JS CSS Dauer (s): 49,920 26,816 26,270 25,194 #Requests: gesamt Größe:600,7K 600,7K 600,7K 588,3K

11 Testlauf 6b: Live Junge Du hast ja keine Ahnung vom richtigen Leben Eltern XAMPP Live

12 Kommunikation oder was ist ein http-request? Vor jeder Datei, die der Browser vom Server holt findet ein http-request statt. Es gibt noch: Conditional Requests Sach mal stimmt das noch? Far Future Expires Header Hier nimm und lass Dich nicht wieder blicken!

13 Dinge die man beim Far Future Expires Header beachten sollte Wenn eine Datei geändert wird, wird diese nie von Browser geladen werden, solange der Name gleich bleibt. nice.css würde bei einer Veränderung nicht neu geladen werden nice css wird nach Veränderungen als nice css abgespeichern Es macht ggf. Sinn verschiedene Elemente unterschiedlich lang im Cache zu speichern Nie, nie, nie HTML und PHP Datein mit einem Far Future Expires Header versehen!

14 Testlauf 7: Reduzieren... und nun den Brontosaurus auf kleiner Flamme 3 Jahre kochen Mit JFinalizer kann man sehr gut CSS und JS Dateien zusammenfassen. Kochbuch für den modernen Höhlenmenschen Viel Testen, da man es leicht Übertreiben kann.

15 JFinalizer Einstellungen HTML Kompression: ultra ist super, leider kommen dabei viele Module oder Plug Ins nicht zurecht,gerade wenn Javaskript eingebunden wird. HTML Kompression: DeTab HTML Kompression: Medium etwas kleinere HTML-Datei, die aber noch korrekt dargestellt wird. HTML-Kommentare sollten in der Seite belassen werden, da sonst Anweisungen für den IE gelöscht werden. (Viel Spaß beim debuggen) JS verarbeiten: Ja JS optimieren: Nein jquery NoConflict: Nein CSS Zusammenfassen: Ja CSS Optimieren: Nein GZip für JS und CSS: Nein

16 I have a bad feeling about this Han Solo Leider wird der print.css immer noch zusätzlich geladen. Bei Dateien ignorieren habe ich die Anweisungen print.css, meddia="print entfernt. Leider hatte dies nicht den gehofften Effekt und es gab Darstellungsprobleme mit den oberen Menü (rutschte in das obere Banner) Auch wird die media/system/css/system.css nicht mit zusammengefasst.

17 Let s do it quick and dirty! CSS Doggy Style JS CSS Control: print.css, system.css unterbinden Kopie des Beez2 Template erstellen (anpassen Navigation vor Text, etc.) Inhalt system.css an das Ende der General Template einfügen Media Query ans Ende setzten print.css print { /* Inhalt der print.css hier einfügen */ } 1 HTML, 1 CSS, 1 JS = 3 Requests

18 YSlow Hilfen 10 CSS-Bilder 2 Bilder vom Inhalt Darüber hinausgehende Reduktion nur mit HTML, CSS Kenntnissen möglich (z.b. CSS3 Gradients, etc.) YSlow gibt uns Smush.it als Dienst für die Komprimierung an.

19 Online-Optimierungen testen Häckchen setzen nicht vergessen! Dann kann man den Inhalt der ZIP einfach per FTP drüberbügeln

20

21 Na bemerkt? Die Möglichkeit die Schrift größer oder kleiner zu machen war nicht mehr da. Hierfür werden folgende JavaScript Dateien benötigt: captions.js mootools-core.js md_stylechanger.js hide.js

22 Server-Seitiges Tuning Nitro-Einspritzung für die Website mod_deflate komprimiert Dateien als GZIP, ist sehr performant und kann bei vielen Dateien eine merkbare Verbesserung bewirken. Gut bei: HTML, CSS,JS,Fonts Schlecht bei: Bildern, Filme, Audio-Dateien mod_expires hiermit kann man ein Haltbarkeitsdatum für Dateien festlegen. mod_headers die Header Ausgabe der Dateien z.b. ETag anpasen

23 mod_deflate <IfModule mod_deflate.c> SetOutputFilter DEFLATE # Don't compress images SetEnvIfNoCase Request_URI \ \.(?:gif jpe?g png)$ no-gzip dont-vary AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml AddOutputFilterByType DEFLATE text/javascript application/javascript application/xjavascript AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf AddOutputFilterByType DEFLATE font/truetype font/opentype # Add Fonts Files AddType font/ttf.ttf AddType font/otf.otf AddType application/x-woff.woff AddType image/svg+xml.svg AddType application/vnd.ms-fontobject.eot </IfModule>

24 mod_expires <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 600 seconds" ExpiresByType application/x-shockwave-flash "access plus 1 day 1 hour" ExpiresByType text/javascript "access plus 1 year" ExpiresByType application/x-javascript "access plus 1 year" <FilesMatch "\.(ico pdf flv jpg jpeg png gif js css swf ttf otf svg woff eot)$"> ExpiresDefault "access plus 1 year" </FilesMatch> </IfModule> # ExpiresByType image/gif "access plus 1 month 1 hour"

25 mod_headers # Deaktivieren der ETags <ifmodule mod_headers.c> Header unset ETag </ifmodule> FileETag None Lieber keinen ETag als einen falschen setzten

26 Optimierungen auf dem Sever

27 Nur ein toter Bug ist ein guter Bug Starship Troopers

28

29 Informationsquellen und Dank: High Performance Websites 14 Steps to Faster-Loading Web Sites von Steve Sounders Yahoo YSlow Firefox extension für Firebug Google Page Speed Plugin für Chrome (Element untersuchen > Page Speed) Online Tool Blank Template ebook von Alexander Schmidt ( Joomla! 2.5 von David Jardin (Hanser Verlag) Angie Radtke Beez 2 Template

30 Vielen Dank für Eure Aufmerksamkeit (bitte das nächste mal leiser Schnarchen Danke) Joomla! Performance Tweaking Joomla!Day 2012 Berlin - Inh. Frank Delventhal Hermann-Balk-Str. 111a Hamburg Tel.: