Joomla! ist ein hervorragendes Content Management System (CMS). Die Installation ist darauf ausgelegt, auf möglichst vielen Webservern verlässlich zu funktionieren und danach auf die Bedürfnisse des Betreibers angepasst zu werden. Folglich ist Joomla! direkt nach der »Geburt« nicht sonderlich schnell. Vergleichbar einem Säugling nach der Geburt. Süß, aber krabbelt noch nicht allzu schnell durch die Wohnung.
In diesem Artikel zeige ich Ihnen, wie Sie aus dem süßen Säugling einen ansehnlichen Athleten mit einer rekordverdächtigen 100m Zeit bekommst. Das Gute ist, es geht viel schneller, als ein Kind groß zu ziehen.
Warum muss meine Webseite überhaupt schnell sein?
Langsame Webseiten verabscheut jeder aus tiefstem Herzen. Gehen Sie davon aus, dass der Besucher Ihrer Website keine Geduld hat. Mit jeder Sekunde mehr Ladezeit, steigt die Chance, dass er zu einer anderen Seite abwandert. Nur wenn ein Besucher ganz sicher ist, dass er nur bei Ihnen das findet, was er sucht, wird er längere Ladezeiten akzeptieren. Dies gilt im verstärkten Maß für das mobile Surfverhalten. In Studien wurde belegt, dass nach längeren Wartezeiten der Stresslevel der Nutzer steigt.
Die ersten Schritte in 5 Minuten zum »Nachklicken«
Es gibt verschiedene Ebenen, auf die man die Geschwindigkeitsoptimierung betreiben kann. Hier konzentriere ich mich auf die Punkte, die in 5 Minuten bis 10 Minuten abgearbeitet werden können.
Damit Veränderungen kein »Blindflug« werden.
Zuerst sollten wir den »Ist-Zustand« ermitteln. Sonst können wir ja gar nicht sehen, ob sich etwas verbessert hat. Für meine Tests verwende ich Firefox mit den Webdeveloper Tools. In den Netzwerkeinstellungen kann man genau sehen, wie lange die Webseite zum Laden benötigt.
Wer einfach mal einen schnellen Test nutzen will, kann auch gerne folgende Website nutzen: gtmetrix.com Ich empfehle diese Seite für den ersten Tests, da diese Pagespeed und YSlow vereint, so kann man mehrere Analysen auf einmal durchführen.
Wir machen es uns einfach und interessieren uns erst einmal nur für diese 3 Kennzahlen. Je niedriger diese Kennzahlen werden, desto besser sind die aktuellen Einstellungen.
- 1.Page Load Time:
Gibt an, wie lange die Seite braucht, um komplett geladen zu werden. - 2.Total Page Size:
Gibt an, wie groß sämtlich Elemente / Dateien der Website sind. - 3.Requests (Anfragen):
Einige Browser und Server können noch nicht mit dem HTTP/2 Standard umgehen, der die simultane Übertragung von vielen Dateien gleichzeitig zulässt.Für alle anderen Browser gibt es ein Limit, wie viele Dateien gleichzeitig gesendet werden können. Des Weiteren gibt es pro übertragene Datei eine kurze Unterhaltung zwischen dem Webserver und dem Browser. Daher gilt: je mehr Dateien, desto mehr »Gequatsche«.
Sinken diese drei Kennzahlen sind Sie auf dem richtigen Weg. Steigen diese Kennzahlen war die letzte Änderung falsch, hier sollten Sie die letzte Veränderung rückgängig machen.
Wenn Sie viele Dinge gleichzeitig ändern und es dann nicht funktioniert, wissen Sie nicht, welche Einstellung das war. Drehen Sie daher immer nur an einer Stellschraube auf einmal.
Als Test habe ich eine einfache Joomla! Website aufgesetzt, welche die Demo-Inhalte enthält. Ich habe die Startseite mit mehr Text und insgesamt 4 Bildern (davon 3 Thumbnails) verändert, so dass es auch eher einer echten Seite entspricht. Im Protostar Template wurden die Google Fonts deaktiviert, da die Ladezeit der Seite dann zu stark davon beeinflusst wird, wie schnell Google diese Daten ausliefert.
Erster Test der Website »out of the box«
out of the box: 2,343s Requests: 13 367,5KB
Die Tests wurden mit einem lokalen Webserver durchgeführt, daher sind die Ladezeiten schneller, als sie in der »freien Wildbahn« vorkommen würden.
Die ersten 4 Anfragen kommen schon aufgrund der Bilder zustande, eine geht auf das HTML Dokument selber zurück und der Rest sind Javascript- und Stylesheet-Dateien. Idealerweise wären das dann 4 Bilder, 1 HTML, 1 Stylesheet und 1 Javascript. Sieben wäre der Idealzustand – es bleibt also noch etwas zu tun.
Schritt 1: Cache aktivieren
Joomla! ist ein Content Management System. Die Webseite wird für jeden Aufruf neu zusammengestellt. Das Konstruieren der Ausgabeseite benötigt Zeit. Mit dem Cache speichern Sie dieses Ergebnis für eine bestimmte Zeit ab und wenn jemand anderes genau diese Seite sehen will, muss diese Seite nicht neu berechnet werden. Es wird einfach die Seite aus dem Zwischenspeicher genommen. Je mehr Besucher man auf der Website hat, desto positiver wirkt sich diese Einstellung aus. Stellen Sie sich das wie ein Kurzzeitgedächtnis vor, Sie haben etwas in einem Lexikon nachgeschlagen und 10 Sekunden später fragt Sie ein Freund genau danach. Da die Informationen so frisch sind, können Sie gleich die Antwort geben, ohne nochmal nachschauen zu müssen.
- In Joomla Backend unter System > Konfiguration : System : Cache
Im Reiter »System« finden Sie die Einstellungen für den Cache. Hier werden folgende Einstellungen hinterlegt - Cache: Erweitertes Coaching (Module können auch gespeichert werden)
- Plattformspezifischer Cache: Ja (Anderer Zwischenspeicher für Smartphones)
- Cache Dauer: 15 Minuten. Wenn Sie selten Veränderungen auf der Seite haben, können Sie die Cache Dauer auch sehr hoch einstellen. Vorerst empfehlen wir aber bei 15 Minuten zu bleiben.
Im Anschluss rufen wir die Startseite noch einmal auf, damit sich der Cache füllen kann. Dann erst wird die neue Ladezeit gemessen.
Da zu wenig Last auf der Seite ist und keine komplexen Module geladen werden, wirkt sich diese Einstellung in unseren Test kaum aus. Bei »normalen« Webseiten, macht dies oft einen enormen Unterschied aus. Je komplizierter die Erstellung der Seite ist, desto stärker wirkt sich diese Einstellung aus.
Cache On: 1,117s Requests: 13 368,3KB
Schritt 2: Gzip-Komprimierung
- System > Konfiguration : Server : Gzip Gzip-Komprimierung: Ja
Die Komprimierung erfasst bei dieser Einstellung nur den HTML-Inhalt der Seite und umfasst keinen Stylesheet Dateien (.css) oder JavaScript Dateien (.js). Hierfür braucht man zusätzliche Erweiterungen oder man kennt sich mit den .htaccess-Einstellungen aus.
Gzip On: 1,110s Requests: 13 351,6KB
Schritt 3: Komponente zum Zusammenlegen von Skript- und Stylesheet Dateien installieren.
Dabei werden alle Javascript Dateien (*.js) gesucht, die auf der Seite geladen werden, diese werden in einer Datei zusammengefasst und ggf. auch noch komprimiert. Das gleiche Prinzip wird auf die Stylesheet Dateien (*.css) angewandt. Sehr gute Erfahrungen haben wir mit JCH-Optimize gemacht.
Weitere Informationen zu JCH-Optimize und Download
Einfach mal die freie Version herunterladen, installieren und testen.
Die Erweiterung muss nach der Installation aktiviert werden.
In Joomla! Backend unter Erweiterungen > Plugins : System – JCH Optimize
In dem Tab »Plugin« das Plugin aktivieren. in dem Tab »Grundlegende Optionen« unten die »sonstige Einstellungen« auf den Button »Plug-ins Sortieren« klicken.
Das Zusammenfassen von Dateien braucht Rechenzeit. Wenn das Ergebnis nicht zwischengespeichert wird, braucht jeder Aufruf der Website mehr Zeit als nötig. Der Cache muss daher für diese Maßnahme aktiviert sein.
JCH Optimize free: 1,037s Requests: 7 352,3KB
Weitere JCH-Optimize Einstellungen
Automatische Einstellungen: average HTML-Text Komprimierung: »Ultra«
JCH Optimize free erweitert: 0,900s Requests: 7 124,3KB
Mit der kostenpflichtigen Version von JCH-Optimize kann man seine Website noch schneller machen. Man muss allerdings Zeit in die Einarbeitung investieren und verstärkt testen.
Ich mag nicht lesen, bin ich schon fertig?
Wer nicht gerne lesen mag, könnte jetzt durch sein. Wir sind jetzt bei einer passablen 100m-Zeit angelangt. Wer vom Turnschuh gerne auf einen Sportwagen umsteigen möchte, sollte weiterlesen.
Was macht eine Website langsam oder schnell und wie nutze ich das?
Elemente einer Website
Um eine Webseite schneller zu machen, ist ein Grundverständnis für die Materie von Vorteil. Wie beim Autofahren ist es auch gut zu verstehen, dass das Benzin irgendwann aufgebraucht ist und dass ebenfalls die Bremsbeläge nicht ewig halten.
Text
Die Menge des Textes spielt fast keine Rolle. Text lässt sich sehr gut und schnell übertragen, falls der Inhalt der Seite komprimiert (Gzip) ausgeliefert wird.
Bilder
Bilder vermitteln oft besser Emotionen, als Text. Daher sollte dieses Mittel auch genutzt werden. Dabei gilt es ein paar Dinge zu beachten. Jedes Bild ist eine weitere Anfrage. Daher sollte man nicht ohne »echten« Grund 100 Thumbnails auf einer einzelnen Seite verwenden. Es gibt Methoden, wie man so ein »Problem« lösen kann, aber diese sind dann alle aufwendiger. Wer sich hierfür Interessiert sollte unter Google “Image-Sprites” und “HTTP2” suchen.
Bilder sollten in dem Format geladen werden, indem diese auch gebraucht werden. Daher macht es keinen Sinn, ein 3000KB (1980 x 1080) großes Bild auf die Größe einer Briefmarke zu skalieren. Es werden ja immer noch die ganzen 3 MB gebraucht, um das Thumbnail im Browser des Besuchers anzuzeigen. Verkleinert das Bild per Bildbearbeitungsprogramm auf die benötigte Größe z.B. 85 KB (400 x 350 Pixel).
Es gibt Komponenten, die einem diese Arbeitsschritte abnehmen. Welche Lösung eine echte Arbeitserleichterung darstellt, hängt extrem stark von dem jeweiligen Projekt ab.
Multimedia (Videos, Musik, Podcasts)
Die Dateigröße von Musik, Podcasts und Videos sind ungleich größer, als Bilder. Oft lohnt es sich hier, diese Medien bei spezialisierten Diensten unterzubringen und dann auf die eigene Seite einzubinden.
Jeder kennt Youtube-Einbindungen auf anderen Webseiten. Für professionelle Videos oder Bezahlinhalte kann man vimeo.com sehr empfehlen. Hier können Sie bei einem Profi-Account die Einstellungen so vornehmen, dass das Video nur auf Ihrer Seite eingebunden werden kann.
Für Musik und Podcast gibt es Soundcloud und noch andere Anbieter. Meistens gibt es auch hier einen frei verfügbaren Service und Premium- Angebote.
Externe Dienste
Externe Dienste erleichtern Ihnen, neue Funktionen auf die Webseite zu bekommen (Banner, Wettervorhersagen, Tweets, etc.). Oft haben diese aber einen Nachteil. Die Seite wartet, bis dieser fremde Server seinen Inhalt ausliefert. So kann es sein, dass Ihre Webseite langsam lädt, nur weil der Bannerserver die entsprechenden Inhalte langsam bereitstellt. Das kann Besucher kosten.
Es gibt Module, die Ihre letzten Twitter-Tweets oder Facebook-Einträge auf der Website anzeigen. Oft sind hier die Standardeinstellungen so, dass diese bei jedem Aufruf eines Besuchers alles neu zusammengestellt wird. Solange Sie nicht im Minutentakt die Temperatur Ihres Kaffees der Welt mitteilen möchten, ist das unnötig. Achten Sie darauf, dass diese Inhalte möglichst lange zwischengespeichert werden. Viele dieser Komponenten legen den Cache mit Hilfe eines Besuchers an, der dann länger warten muss, bis alles geladen wurde. Schauen Sie auch, ob man den Zwischenspeicher auch mit Hilfe eines Cronjobs (Serverseitige Automatisierung) aktualisieren kann.
Interne Struktur einer Website
Schritt 4: Template / HTML Code
Die Qualität Ihres Templates hat nicht nur Auswirkungen darauf, wie »cool« Ihre Seite aussieht, sondern beeinflusst auch, wie schnell diese in Computern, Tablets, Smartphones dargestellt werden kann. In neueren Versionen Ihres Templates finden sich oft Bugfixes und Anpassungen, die Ihre Website besser machen. Daher sollten Sie hier auch immer auf einem aktuellen Stand sein (genauso wie mit dem Joomla!-System selber und den Komponenten, die Sie nutzen).
Schritt 5: Webserver – das richtige Hosting-Paket
Die Wahl des richtigen Hosting Paketes hat Einfluss darauf, wie schnell Ihre Website ist. Daher kann es oft sinnvoll sein, zu einem etwas teureren Paket zu greifen, wenn es mehr Ressourcen zur Verfügung stellt (mehr Arbeitsspeicher – RAM, SSD-Speicher anstelle von Festplatten).
Schritt 6: Umstellung auf PHP 7
Joomal! kann sehr gut mit PHP 7 umgehen und fast alle Erweiterungen von Fremdanbietern können dieses mittlerweile auch. Der Geschwindigkeitsgewinn von PHP 7 zu den vorherigen 5er Versionen ist fast 100%. Wenn Sie die Möglichkeit haben, solltest Sie unbedingt PHP 7 verwenden.
Daher haben wir unsere Testseite vorher auch nur mit PHP 5.6 betrieben und »schalten nun mal den Turbo zu«.
PHP 7: 0,784s Requests: 7 124,3KB
Ok das macht ja gut was aus. Noch etwas Lachgaseinspritzung gefällig?
Schritt 7: Aktivieren von PHP Cache (OPcache)
OPcache sind oft Einstellungen, die nur vom Provider vorgenommen werden. Diese sind oft erst konfigurierbar, wenn man einen eigenen Server mietet. Die Konfiguration ist alles andere als trivial, so dass man 99% der Kunden keinen Gefallen tun würde, ihnen diese Einstellungen an die Hand zu geben.
PHP 7 + OpCache: 0,690s Requests: 7 124,3KB
Die Maßnahmen im Vergleich:
-
Dateigröße der Startseite
-
Ladezeit der Startseite
Eine der ersten Maßnahmen, den Zwischenspeicher zu nutzen, hat mit den größten Erfolg gebracht. Die anschließenden Maßnahmen sind jedoch nötig, um noch bessere Werte zu erreichen. Ein Sprinter wird sich am Anfang seiner Karriere auch mal um eine Sekunde verbessern können, aber wenn er an der Spitze ist, muss er um jede hundertstel Sekunde kämpfen. Ähnlich verhält es sich mit einer performanten Website.
Huston we got a Problem« – Testen, testen, testen
Wer navigiert, muss auch immer schauen, wo er sich gerade befindet. Es reicht nicht aus, nur das Ziel zu kennen. Bei der Geschwindigkeitsoptimierung muss man das Gleiche machen. Der Blick in den Rückspiegel wird hier ersetzt, in dem man mit dem eigenen Browser testet. Wichtige Funktionen Ihrer Seite sollten immer mit getestet werden.
Weiterer populärer Dienste
Folgende Webservice können Ihnen bei der weiteren Optimierung helfen.
Repeat – nun alles von vorne
Eine Website ist ein Prozess und kein fertiges Produkt. Wir leben mit einem Medium, dass sich kontinuierlich verändert. Die Website wird »just in time« zusammengebaut und existiert so nur für einen kurzen Moment in der Wahrnehmung des Betrachters. Die Regeln, wie die Website ausgeliefert wird, verändern sich mit jedem Update. Daher sollten Sie von Zeit zu Zeit immer wieder Ihre Website testen. Eine optimierte Seite zu testen geht schnell und zu 98% sind keine weiteren Schritte notwendig. Ohne gelegentliches Testen betreiben Sie allerdings Ihre Seite im Blindflug.
»Never Change a running System« – eine Floskel
Aber bitte nun nicht aus Bequemlichkeit zu einem Update-Verweigerer werden. Frei nach dem Motto »läuft ja alles, nun bloß nicht anfassen«.
Updates dienen dazu, dass das System sich der sich verändernden Umwelt anpasst. Sie ziehen im Winter auch dicke Sachen an und laufen nicht im T-Shirt herum.
Nun machen Sie Ihre Website zu etwas Einzigartigem und erschaffen etwas Tolles! Viel Spaß!
Sie haben Anregungen oder Fragen zum Thema Geschwindigkeitsoptimierung für Joomla!? Schicken Sie uns einen Kommentar. Wir freuen uns auf Ihr Feedback.
- Geschwindigkeitsoptimierung für Joomla! - 2. November 2016
