23.4    Pagespeed Insights und YSlow interpretieren 

Empfehlenswerte Anlaufstellen für Hinweise zur Suchmaschinen- und Performanceoptimierung sind die Suchmaschinen selbst. Googles Pagespeed Insights ist der Quasistandard für Optimierungsempfehlungen, an nächster Stelle folgt das Open-Source-Projekt YSlow. Beide lassen sich als Browser-Add-ons herunterladen, Pagespeed Insights ist auch als Website verfügbar und führt seine Analyse unter Eingabe der zu prüfenden URL unter https://developers.google.com/speed/pagespeed/insights durch. Noch schneller geht’s über die Website GTmetrix, die beide Dienste in einer Benutzeroberfläche vereint. Besuchen Sie die Website unter http://gtmetrix.com, geben Sie die URL Ihrer Joomla!-Installation ein, und studieren Sie das (englischsprachige) Ergebnis (Beispiel in Abbildung 23.13).

Abbildung 23.13    Verbesserungspotenzial für Performanceoptimierungen gibt es immer, aber mit zwei A-Noten kann sich das Reiseforum sehen lassen.

Einige Hinweise und Verbesserungsvorschläge von Pagespeed und YSlow sind u. U. zu bestimmten Website-Designrichtlinien widersprüchlich (z. B. im Rahmen von Responsive Design) oder können aus technischen Gründen nur bedingt berücksichtigt werden. Zerbrechen Sie sich dann nicht den Kopf darüber, und optimieren Sie an anderer Stelle weiter. Die folgenden Seiten beschäftigen sich mit den wichtigsten (alphabetisch sortierten) Optimierungsmaßnahmen, die entweder die größten Probleme bereiten oder besonders entscheidend für eine gute Bewertung sind.

 

23.4.1    Defer parsing of JavaScript – JavaScript ans Ende der HTML-Datei setzen 

Dies ist die Empfehlung, so viel JavaScript-Code wie möglich an das Ende der Webseite zu stellen, was theoretisch die Darstellung des oberen Seitenbereichs beschleunigt. Das ist bei Joomla! ein Problem, da sowohl das CMS selbst als auch die Erweiterungen an allen Ecken und Enden JavaScript-Code in die Webseiten injizieren. Die Reihenfolge ist dabei entscheidend, da mitunter Abhängigkeiten zu zuvor eingelesenen Scripts oder Bibliotheken bestehen.

Ob Sie JavaScript ans Ende der Seite verbannen können, ist daher stark von Ihrer individuellen Joomla!-Konfiguration abhängig und muss geprüft werden. JCH Optimize (siehe Abschnitt 23.4.6, »Minify CSS, Minify HTML, Minify JavaScript – Minifizierung aktivieren«) bietet die Optimierungsoption in der Plugin-Konfiguration unter Automatic Settings Group • Defer javascript. Falls Ihre Seiten nach Umschalten auf Ja (und Plugin Speichern) nicht mehr funktionieren, ist hier leider nichts zu optimieren.

 

23.4.2    Enable gzip compression – GZIP-Komprimierung aktivieren 

Bei der manuellen Installation von Joomla!-Erweiterungen haben Sie ZIP-Paketdateien heruntergeladen und installiert, die gleich zwei Aufgaben erfüllen: viele Dateien in einer zusammenzufassen und dabei die enthaltenden Daten zu komprimieren. Es liegt auf der Hand, die gleiche Technik für Webseiten anzuwenden, um die Übertragung zwischen Server und Webbrowser-Client zu beschleunigen. Das Zusammenfassen ist dabei zwar nur beschränkt möglich (siehe Minifizierung), aber die Komprimierung von Texten, Bildern, JavaScripts und CSS-Dateien ist inzwischen durchaus üblich.

Bei GZIP handelt es sich um ein Kompressionsverfahren ähnlich dem ZIP-Format, GZIP ist allerdings etwas leistungsfähiger – idealer Kandidat für die Komprimierung von Webseiten. Einige Jahre war die Anwendung umstritten. Sicherlich erfolgt die Übertragung der gepackten Daten schneller, aber was ist mit der Rechenzeit, die Server und Client zur Komprimierung und Dekomprimierung benötigen? Tatsächlich ist moderne Hard- und Software darauf ausgerichtet, dass der GZIP-Rechenaufwand minimal zu Buche schlägt. Es spricht nichts dagegen, dass Sie unter System • Konfiguration • Reiter Server • Bereich Server die GZIP-Komprimierung auf Ja setzen, um weitere Pagespeed-Pluspunkte zu sammeln.

Abbildung 23.14    Per Firebug oder Entwicklertools • Reiter »Netzwerk« erkennen Sie die erfolgreich aktivierte GZIP-Komprimierung einzelner Dateien unter »Content-Encoding: gzip« der Serverantwort (»Response Header«)

Problemlösung: Zur Aktivierung muss die GZIP-Komprimierung serverseitig unterstützt werden, was bei Webhostern in der Regel der Fall ist. In lokalen XAMPP-Installationen ist die Komprimierung deaktiviert, denn sie macht nur in Live-Umgebungen Sinn, wo kleinste Geschwindigkeitsoptimierungen große Auswirkungen auf Hunderte von Websitebesuchen haben. Falls Sie auf die harte Tour erfahren, dass Ihr Server GZIP nicht unterstützt (Content Encoding Error), ist ein manuelles Ausschalten durch Bearbeiten der Joomla!-Konfigurationsdatei configuration.php im Hauptverzeichnis möglich: Stellen Sie dann die Variable public $gzip = '1' auf 0.

 

23.4.3    Inline small CSS, Inline small JavaScript – kleine JavaScripts in die HTML-Datei verlagern 

Die wichtigste übergeordnete Maßnahme zur Websitebeschleunigung ist die Reduzierung der Dateianfragen beim Server, denn jede Anfrage und Anfrageantwort benötigt zusätzliche Zeit. Fallen nachzuladende JavaScript-Dateien oder CSS-Stylesheets besonders klein aus, empfiehlt Pagespeed daher die Integration in die HTML-Datei (über <script>- bzw. <style>-Tags). Per Hand ist das in Joomla! nur schwer umzusetzen, da das einen Eingriff in die Template- bzw. Erweiterungsimplementierungen bedeutet. Das Plugin JCH Optimize bietet über Combine CSS Files und Combine JavaScript Files die Möglichkeit, aus vielen Einzeldateien jeweils eine große zu kombinieren (sogenannte Aggregierung). Probieren Sie diese Optimierung aus, da sie die Anzahl der Serveranfragen möglicherweise um die Hälfte verringert.

 

23.4.4    Leverage browser caching – Browsercache steuern 

Neben der Vermeidung zu vieler Serveranfragen ist der Browsercache der zweitwichtigste Ansatzpunkt zur Beschleunigung aller Webseiten. Dabei speichert der Browser Seitenbestandteile auf der lokalen Festplatte des Besuchers, ideal für alle Elemente, die sich über Wochen oder Monate garantiert nicht verändern. Also Bilder, JavaScript-Bibliotheken, CSS-Frameworks, Template-CSS und Schriften. Idealerweise laden Ihre Webseiten Bibliotheken und Frameworks übrigens von Content Delivery Networks (CDNs, siehe Abschnitt 23.4.10, »Use a Content Delivery Network (CDN) – CDNs einsetzen«).

Doch auch ohne CDNs kommt es dank Browsercache zu einer extremen Beschleunigung der Ladezeit. Browser setzen zunächst ein Standard-Caching-Verhalten an, das auch von Einstellungen des Webservers beeinflusst wird. Für die meisten Szenarien ist das für ein sinnvolles Caching ausreichend. Ob wirklich gecacht wird, prüfen Sie mit einem Blick in Firebug oder ähnliche Tools (siehe Abbildung 23.15). Eine HTTP-Meldung 304 vom Server deutet auf erfolgreiches Caching, denn trotz Cache gibt es aufgrund von Protokollspezifikationen einen kurzen Austausch zwischen Webbrowser und Server.

Abbildung 23.15    PageSpeed Insights bewertet anhand des Response Headers »Cache-Control«, der Anzahl der Sekunden, wie lange die Ressource im Browser zwischengespeichert wird (im Bild: 2.592.000 Sekunden entsprechen 30 Tagen).

Klappen Sie aber den Antwort-Header auf, sehen Sie, was hier wirklich passiert. Finden Sie den Eintrag Cache-Control mit einer Sekundenanzahl dahinter, ist der Cache aktiv. Ein weiteres Indiz ist der aufklappbare Bereich Antwort-Header aus dem Cache.

Tipp: Um den Cache zu ignorieren und den Webbrowser zu zwingen, Webseiten und ihre Elemente vom Server anzufordern, drücken Sie (Strg) + (F5) bzw. (cmd) + (ª) + (R).

Um für diesen Punkt bei PageSpeed Insights grünes Licht zu erhalten, haben Sie zwei Möglichkeiten. Installieren Sie sich die Erweiterung JOT Cache aus dem Joomla! Extensions Directory, und experimentieren Sie mit den zahlreichen Optionen, oder ergänzen Sie explizite Cache-Zeiten in der Serverkonfigurationsdatei .htaccess. Dies ist ein universelles Beispiel solch einer Konfiguration:

# Take Control of the HTTP Expiration Headers and disable ETags
<IfModule mod_expires.c>
ExpiresActive On
FileETag None
Header unset ETag
ExpiresDefault "access plus 1 week"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
</IfModule>

Listing 23.1    ».htaccess«-Ergänzung: Browser-Cache-Kontrolle mit »ExpiresByType«

Beachten Sie die Zeilen FileEtag None und Header unset ETag, die Deaktivierung einer anderen Form von Cache-Kontrolle und Empfehlung zur Reduzierung weiterer nicht benötigter Serveranfragen, falls Sie mit klaren Cache-Zeiten arbeiten. Diese definieren Sie in den darauf folgenden Zeilen mit ExpiresByType-Direktiven. Passen Sie gerne die Anzahl der Monate vor month an Ihre Vorstellungen an.

 

23.4.5    Make fewer HTTP requests – JavaScript- und CSS-Aggregierung 

Ihre Webseiten bestehen nicht nur aus einer einzelnen zurückgegebenen HTML-Datei, sondern aus Dutzenden kleinen Bestandteilen: Bildern, Länder-Icons, Template-CSS-Stylesheet, jQuery-Bibliothek, Bootstrap-Framework, Schriften von Google-Fonts und zahlreichen kleinen Dateien, die die Joomla!-Erweiterungen in den Quelltext injizieren. Für jede dieser Dateien bauen Browser und Webserver eine neue Verbindung auf, um zu entscheiden, ob die Daten aus dem Browsercache geladen oder frisch vom Server übertragen werden. Die Prämisse lautet: Reduzieren Sie die Anzahl dieser Anfragen auf das Notwendigste. Dafür gibt es einige Mechanismen, z. B. die Verwendung von CSS-Sprites und die Aggregierung von CSS und JavaScript. In allen drei Fällen sammelt der Server viele kleine Dateien zusammen und packt sie in eine große.

Derartige Mechanismen sind in Joomla! leider nicht integriert. Während die Erzeugung von CSS-Sprites (viele Bilder in ein großes packen und per CSS den richtigen Ausschnitt herausschneiden) aufgrund der Variationen von Templates, Erweiterungen und eigenen Inhalten impraktikabel ist, finden Sie im Joomla! Extensions Directory aber wenigstens Lösungen für das Aggregierungsthema. Ein solches Plugin, JCH Optimize, genießt einen hervorragenden Ruf, da es flexibel zu konfigurieren ist und äußerst stabil und zuverlässig läuft.

Eine erfolgreich aktivierte Aggregierung erkennen Sie mit einem Blick in den Netzwerkreiter von Firebug und Co. Prüfen Sie zunächst die Anzahl der Anfragen (links unten), die deutlich geringer ausfallen sollte als mit deaktiviertem Plugin. Sehen Sie sich dann die Zeilen an, deren Dateinamen mit .js und .css enden. Finden Sie davor kryptische Ziffern- und Buchstabenkombinationen, handelt es sich um Dateien aus dem Aggregierungscache von JCH Optimize (siehe Abbildung 23.16). Wundern Sie sich nicht, dass nicht alle JavaScript- und CSS-Dateien für die Aggregierung berücksichtigt werden. Das Plugin hält ein Auge auf die sensiblen Abhängigkeiten der JavaScript- und CSS-Inhalte und lässt die Finger von solchen, die die korrekte Darstellung der Webseite gefährden.

Tipp: Wenn Sie gestalterische oder funktionelle Änderungen an Ihrer Website vornehmen, entstehen in der Regel neue Versionen und Kombinationen von JavaScript- und CSS-Dateien. Bevor Sie Ihre Anpassungen im Frontend sehen, teilen Sie daher JCH Optimize mit, dass das Plugin die JavaScript- und CSS-Aggregierungen erneuern soll. Das geschieht über den Button Clean Cache in der Plugin-Konfiguration (siehe Abbildung 23.17). Deshalb ist es auf Entwicklungs- und Testservern komfortabler, ohne Aggregierungen und Caches zu arbeiten, um Änderungen sofort zu sehen.

Abbildung 23.16    Bei den zwei aus zufälligen Ziffern- und Buchstabenkombinationen benannten Dateien handelt es sich um aggregierte CSS-Styles und JavaScript-Code.

Abbildung 23.17    Nach jeder Änderung an der Gestaltung Ihrer Website erzeugen Sie mit dem JCH-Optimize-Button »Clean Cache« neue Versionen der JS- und CSS-Aggregierungen.

 

23.4.6    Minify CSS, Minify HTML, Minify JavaScript – Minifizierung aktivieren 

Unter minify versteht man bei der Websiteentwicklung die primitive Komprimierung von HTML, CSS-Styles und JavaScript-Code durch Entfernen überflüssiger Leerzeichen, Leerzeilen und Abkürzen langer Variablen- und Funktionennamen etc. Also alle Formatierungen, die zur Lesbarkeit des Codes beitragen, aber für die Ausführung oder Darstellung unerheblich sind. Solch eine Minifizierung übernehmen in der Regel automatische Mechanismen, z. B. bietet JCH Optimize diese Option für HTML, CSS und JavaScript. Das Optimierungspotenzial ist hier nicht so hoch, und wie bei allen Eingriffen in den Quelltext besteht Gefahr, dass die eine oder andere Erweiterung nicht mitspielt. Aktivieren Sie die Minifizierung testweise; falls Ihre Site weiterhin problemlos funktioniert, haben Sie sich einen weiteren (kleinen) Optimierungsbaustein gesichert.

 

23.4.7    Optimize images – Bilder optimieren 

Wer viel Bildmaterial auf seiner Website präsentiert, kommt um diese Warnung nicht herum. Grundsätzlich gilt: Vermeiden Sie GIF-Bilder, bevorzugen Sie JPGs für fotoähnliche Illustrationen, und verwenden Sie PNG für alles übrige. Für JPG-Bilder sollte die Kompressionsrate nicht über 80 % liegen. Bei PNG-Dateien holen die Standardbildbearbeitungsprogramme oft noch nicht das Optimum aus dem Dateiformat. Suchen Sie im Internet per »png optimize« nach kostenlosen Tools und Onlinediensten, die Ihnen bei der Konvertierung helfen.

Abbildung 23.18    Nutzen Sie kostenlose Dienste wie TinyPNG (http://tinypng.com), um die Dateigröße Ihrer Bilder zu verkleinern; prüfen Sie aber die Qualität der Ausgabe.

 

23.4.8    Serve resources from a consistent URL – doppelte Ressourcenanfragen vermeiden 

Wenn verschiedene Erweiterungen dieselben Ressourcen, Bibliotheken, Frameworks oder Schriften, benötigen, kommt es zu doppelten Abfragen. ChronoForms und das Purity-III-Template inkludieren beispielsweise beide die CSS-Datei für die Icon-Schrift Font Awesome. Auch diesem Problem ist ohne Tweaken von Erweiterungen und/oder Templates kaum Herr zu werden. Abhängig von der betreffenden Ressource könnte eines der vielen Content-Delivery-Network-Plugins aus dem JED helfen, die den HTML-Header aufräumen und JavaScript-Bibliotheken, CSS-Frameworks (aber leider keine Schriften) von externen Servern laden. Stöbern Sie gegebenenfalls im Joomla! Extensions Directory nach »cdn«.

 

23.4.9    Specify image dimensions – Bildbreite und -höhe festlegen 

Mit Image Dimensions sind die Breiten- und Höhenangaben der <img>-Attribute width and height gemeint. Diese Angaben sind in Zeiten von Responsive Design nicht mehr relevant, da die Bildskalierung dynamisch per CSS vorgenommen wird. Ignorieren Sie daher diese von PageSpeed Insights erzeugte Warnung, YSlow gibt mit der Meldung Do not scale images in HTML den korrekten Hinweis.

 

23.4.10    Use a Content Delivery Network (CDN) – CDNs einsetzen 

Content Delivery Networks sind Serverfarmen, die häufig verwendete sekundäre Webseitenbestandteile bereitstellen, z. B. multimediale Inhalte, JavaScript-Bibliotheken oder CSS-Frameworks. Durch die globale Verteilung der einzelnen Server des CDNs entsteht dann ein Geschwindigkeitsvorteil, falls die angeforderte Ressource von einem Server abgeholt wird, der möglichst nah am Client sitzt. Das ist insbesondere für Websites nützlich, die eine hohe Anzahl multimedialer Inhalte, Bilder und Videos, bereitstellen. Für diese Fälle sind CDN-Dienste jedoch kostenpflichtig.

Einen weiteren Geschwindigkeitsbonus bieten CDNs durch das Cachen angeforderter Komponenten: Laden zwei verschiedene Webseiten dieselbe Ressource von der gleichen Quelle, z. B. die jQuery-Bibliothek von https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js, liegt die JavaScript-Datei für die zweite Website bereits im Browsercache. Für das weitverbreitete jQuery, das auf einer Vielzahl von Websites zum Einsatz kommt, ist die Beschleunigung enorm, aber das gilt natürlich auch für Bootstrap, Foundation, MooTools, AngularJS etc., alle großen Bibliotheken, die auf modernen Websites eingesetzt werden. Dankenswerterweise ist diese Art von Service kostenlos und wird von großen Anbietern wie MaxCDN, Google CDN oder Bootstrap CDN zur Verfügung gestellt.

Joomla! integriert standardmäßig die JavaScript-Bibliothek jQuery und das CSS-Framework Bootstrap und lädt sie lokal von Ihrem Server. Im HTML-Code erkennen Sie das an diesen beiden Zeilen:

<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>

Um diese Komponenten nun von einem Content Delivery Network zu laden, ist eine Modifikation des HTML-Headers notwendig, was nur ein zusätzliches Plugin zustande bringt. Leider ist im Joomla! Extensions Directory noch keine einfach zu konfigurierende Lösung für beide Komponenten zu finden. Ein interessantes Plugin, das sich auf die Optimierung des HTML-Headers spezialisiert hat, ist Too Many Files. Die Erweiterung bietet zwar keine CDN-Alternative für Bootstrap, sondern nur für jQuery, aber aggregiert gleichzeitig JavaScript- und CSS-Dateien und übernimmt damit auch Aspekte von JCH Optimize.