Zur Startseite

Speedoptimierungen (Cache, GZIP in Joomla! +htaccess, Serveroptimierung etc.)

Die Website sieht toll aus und ist online, aber irgendwie zu langsam. Was kann man tun um die Performance zu verbessern? Hinter Türchen Nr.20 findet ihr einige Tipps dazu...

Willkommen zum heutigen Adventskalendertürchen.

Performance

Der Begriff Performance ist sehr vielschichtig, er beginnt bei Dingen, die man als EntwicklerIn kontrollieren kann und endet beim Design von Prozessoren. Im heutigen Beitrag möchten wir uns mit den Teilen der Webseite beschäftigen, die wir beeinflussen können. Ich teile die einzelnen Performance-Punkte in Gruppen ein.

  • Dauer der Berechnung eines Seitenaufrufs serverseitig.
  • Dauer der Übertragung zwischen PHP und dem Browser.
  • Dauer bis die Webseite fertig dargestellt wird.

Diese Punkte kann man getrennt voneinander behandeln. Die Maßnahmen, um die Performance zu steigern, gliedere ich wie folgt:

Caching

  • PHP opcache
  • Joomla! Cache
  • Server/Proxy Cache
  • Browser Caching

Code Optimierung

  • PHP
  • Javascript
  • HTML
  • CSS

Komprimierung / Verkleinerung

  • Transport Komprimierung
  • HTML
  • CSS
  • Javascript
  • Bilder

Caching

Caching bzw. Zwischenspeichern ist eines der Mittel um Webseiten augenscheinlich einfach schneller zu machen. Leider ist das nicht immer richtig. Caching bedeutet, dass das erste Ausführen langsamer ist und jeder weitere Aufruf mit Hilfe des Caches beschleunigt werden kann. Das bedeutet allerdings, dass es bei Benchmarks super aussieht, wenn 1000 Aufrufe in unter einer Sekunde abgerufen werden, aber der erste vielleicht Pech hat und 3 Sekunden warten muss. Weiteres Problem beim Caching ist das Devalidieren des Caches, also wann die Daten im Cache veraltet sind. Aber das sind Probleme, die zum Teil gelöst sind. Zum praktischen Teil: Der PHP Opcache ist ein PHP Module welches ab PHP 7.0 per default mitgeliefert wird und von wahrscheinlich allen Hostern unterstützt wird und auch aktiviert ist. Ob das so ist kann man in Joomla unter dem Menüpunkt System → Systeminformationen im Reiter PHP Informationen nachlesen. Dort befindet sich ein Bereich „Zend Opcache“. In der ersten Zeile steht „Opcode Caching“ mit dem Wert „Up and Running“. Sollte dieser Bereich nicht da sein, gibt es diesen Opcache nicht. Allerdings gibt es noch andere Opcachemodule in PHP wie z.B.: APC. Solltest du kein Opcache Module finden, frag bei deinem Hostingprovider nach. Mehr gibt es hier nicht zu tun.
Der Joomla! Cache ist etwas ganz besonderes und funktioniert mehr oder weniger gut. Für normale Webseiten ohne besondere Anforderungen reicht er allerdings aus. Aktivieren kann man diesen unter System → Konfiguration im Reiter „System“. Dort gibt es mehrere Optionen, die den Cache beeinflussen.

  • Cache-Speicher – Joomla! unterstützt verschiedene Möglichkeiten die Cache Daten zu speichern. Der Standard ist „Datei“, in diesem Fall werden die Daten in einem Verzeichnis gespeichert, diese kann man im nächsten Feld angeben. Auf meinen Servern gibt es noch den APC-Benutzer-Cache, dieser Cache hält die Daten im RAM und benötigt keinen Festplattenzugriff.
  • Cache Verzeichnis – Optional kann ein eigenes Verzeichnis für den Cache festgelegt werden.
  • Cache-Dauer – Wie lange werden die gecachten Daten verwendet? Standard sind 15 Minuten, danach werden sie gelöscht und beim nächsten Aufruf neu berechnet.
  • Plattformspezifischer Cache – Wenn Ja, werden derzeit zwischen Mobilen Browsern und Desktop Browsern unterschieden. Sinnvoll, wenn man unterschiedliche Layouts für Mobil und Desktop ausgibt.
  • Cache – Dieser Punkt hat 3 Auswahlmöglichkeiten, AUS (kein Cache), AN – Normales Caching und AN – Erweitertes Caching.

Normales Caching funktioniert in Joomla! ziemlich gut und macht wenig Problem, einzig wenn man z.B. einen Artikel ändert, muss man den Cache manuell leeren unter System → Cache leeren. Erweitertes Caching versucht aggressiver Daten, vor allem Module, zu cachen. In meinen Tests hat das nicht so gut funktioniert.

Server/Proxy Cache

Viele Provider haben einen Loadbalancer mit Cache-Funktion, dieser versucht die Seitenaufrufe zu beantworten, bevor sie den eigentlichen Webserver erreichen. Gut funktioniert das für Bilder, Stylesheets (CSS) und Javascript Dateien. Schwieriger wird es bei dynamisch generierten HTML-Seiten so wie sie Joomla! ausgibt. Sehr oft können diese Caches nur schwer beeinflusst werden, z.B. aktives Löschen von gecachten Inhalten könnte möglich sein, ist aber meist nur durch zusätzlichen hohen Aufwand realisierbar. Trotzdem ist ein Servercache eine der besseren Erfindungen. Einfache Tipps den Cache sinnvoll zu beeinflussen: Unser Template hat normalerweise mehrere Verzeichnis; die wichtigsten für die Cache-Optimierung sind „js, css, images“ (diese können anders heißen, haben aber üblicherweise die entsprechenden Inhalte). In diesen Verzeichnissen legen wir jeweils eine .htaccess Datei an, die vom Apache Webserver interpretiert wird (bei anderen Webservern gibt es andere Möglichkeiten das Gleiche zu erreichen). In der Datei legen wir fest, welche Cache-Control Parameter wir an den Proxy und auch den Webbrowser schicken möchten. Bei mir sind diese wie folgt eingerichtet: Dateien in meinen „images“, „css“, „js“ Verzeichnissen können üblicherweise 1 Jahr zwischengespeichert werden da sich diese nie ändern. Zumindest handhabe ich das so. Wie man sieht wird die Dauer in Sekunden angegeben.

< IfModule mod_headers.c > Header set Cache-Control "max-age=31536000, public" < /IfModule >

Um dennoch neue Versionen von CSS und Javascript Dateien ausliefern zu können, verwenden wir Versionierung in den PHP Dateien im Template. Das funktioniert einfach in dem man an die Datei „?v=1“ anhängt und die Zahl hoch zählt, sollte sich der Inhalt der jeweiligen Datei ändern.

Browser Cache

Der Browser-Cache funktioniert genauso wie der Server/Proxy-Cache, auch er wird über den „Cache-Control“ Header gesteuert. Somit bleibt uns nichts weiter zu tun, als die richtigen Werte im Cache-Control zu setzen, damit beide Caches bedient werden. Solltest du allerdings wollen, dass nur der Browser Cache deine Dateien speichert und kein Cache dazwischen, kannst du statt „public“ am Ende der „Cache-Control“ Zeile auch „private“ schreiben. Dann wird kein Öffentlicher Proxy (der sich daran hält) deine Dateien zwischenspeichern.

Code Optimierung

Code Optimierung ist ein großes Thema, wir werden es hier nur kurz anschneiden. Beim Programmieren sollten wir immer darauf achten rechenintensive Arbeiten nur einmal zu machen. Hierfür verwenden wir Variablen, die einmal befüllt werden und beim nächsten Abrufen nicht nochmals befüllt werden. In Joomla! wird dieses „caching“ sehr oft nach Datenbank Abfragen durchgeführt. In Javascript wird/wurde sehr gerne jQuery verwendet, da es Funktionen bereitstellt, die Vanilla Javascript nicht oder nur umständlich bereit hält. Ein sehr schönes Beispiel ist die Schleifen-Funktion jQuery.each(). Mit dieser kann man sehr einfach alle Einträge in einem Array (eine Liste) durchgehen und bearbeiten. Leider ist das sehr ineffizient, weil für jeden Eintrag eine Funktion aufgerufen wird und Funktionen sind sehr teuer. Besser ist eine for...in Schleife mit hasOwnProperty Test oder seit ECMAScript 6 kann for...of verwendet werden. In HTML kann die Reduktion von Tags zur schnellerem Anzeigen führen. Allerdings ist das in den meisten Fällen vernachlässigbar. CSS Optimierungen hingegen machen auf 2 Ebenen Sinn. Zum einen sollte man darauf achten, dass ungenützte CSS Definitionen gelöscht werden und zum anderen sollten die Selektoren nicht zu genau ausfallen. Die HTML Rendering Engine wendet die CSS Parameter von rechts nach links an, bzw. von unten nach oben. Das bedeutet wenn es eine CSS Definition „.fett { font-weight: 900}“ gibt, wird diese für alle HTML-Tags mit der Klasse „fett“ angewendet. Wenn wir allerdings vor „.fett“ z. B. „html“ schreiben also „html .fett { font-weight: 900}“ muss die Rendering Engine nicht nur den HTML-Tag mit der Klasse „fett“ überprüfen sondern alle übergeordneten Tags bis zum „html“-Tag. Allerdings spielt auch dies bei normalen kleinen Seiten kaum eine Rolle.

Komprimierung

Transport Komprimierung wird im Normalfall vom Webserver oder einem Loadbalancer/Proxy erledigt. Das passiert entweder automatisch oder kann im Joomla! System → Konfiguration im Reiter „Server“ unter „Gzip-Komprimierung“ aktiviert werden. Die Komprimierung verkleinert die Dateigröße der Daten, die über die Internetverbindung geschickt werden und verringert dadurch die Übertragungsdauer.
Verkleinerung der HTML Ausgabe: Es gibt Plugins die versuchen HTML zu verkleinern. Ist zwar gut gemeint, allerdings kann das serverseitig viel mehr Ressourcen in Anspruch nehmen und länger dauern als die Übertragung selbst. Minimieren von CSS und Javascript Dateien dagegen ist sehr viel sinnvoller, da diese nur einmal verkleinert werden müssen und dann immer der gleiche Inhalt übertragen wird. Hierfür gibt es diverse Dienste oder Programme, die das für einen erledigen. Stichwort „Javascript Minifier“ oder „CSS Minifier“. Bilder sind auch ein wichtiges Thema, diese können schlecht mit Gzip komprimiert werden, allerdings ist die Skalierung auf die richtige Größe wichtig. Außerdem sind Programme wie Adobe Photoshop zwar gut beim Komprimieren aber es geht immer noch besser. Für Jpeg Dateien gibt es zum Beispiel libjpeg-turbo https://libjpeg-turbo.org/

Für heute sind wir am Ende unseres Adventskalenders.

Abschließende Worte: Nicht beim Hoster sparen ;-)

Ich hoffe, das heutige Türchen hat euch gefallen und ihr schaut morgen wieder vorbei.