Performance Tuning in Joomla Teil 3: Optimierung von statischen Medien

Im zweiten Teil dieser Serie habe ich beschrieben, wie man mit wenigen, einfachen Änderungen ein Grundniveau an Leistung aus einer Joomla-Webseite herausholen kann.

Heute tauchen wir tiefer in statische Medien ein: JavaScript, CSS und Bilddateien. Diese Änderungen sind aufwendiger, können aber eine langsame Seite in eine anständig funktionierende Seite verwandeln. Sicherlich sind nicht alle diese Änderungen für alle Webseiten sinnvoll, aber die Leistungsvorteile, die du dadurch erzielen kannst, sind erheblich.

 Dies ist eine Übersetzung des Artikels «Joomla Performance Tuning Part III- Static Media Optimization» von Nicholas Dionysopoulos aus dem Joomla! Community Magazine 01/22 (Link zum Original)

Ein grosser Teil deiner Webseite besteht aus statischen Mediendateien: CSS, JavaScript, Bilder und möglicherweise auch Audio und Video. Wir neigen dazu, nicht viel darüber nachzudenken, da wir sie im Vergleich zu unseren Inhalten als zweitrangig betrachten, aber sie machen in der Regel den Grossteil der Daten aus, die vom Server unserer Webseite auf das Gerät des Benutzers übertragen werden, wenn dieser eine Seite besucht. Hinzu kommt, dass das Parsen grosser CSS- und JavaScript-Dateien oder die Dekodierung grosser Bilder den Haupt-Browser-Thread zum Stillstand bringt, was vereinfacht ausgedrückt bedeutet, dass der Browser keine Arbeit für die Darstellung der Seite leisten kann (er kann nur weitere Daten im Hintergrund herunterladen). Je mehr CSS-, JavaScript- und Bilddateien vorhanden sind, desto länger dauert es, bis sie alle geladen sind, was bedeutet, dass der Browser das Rendern der Seite stoppen und alles von Grund auf neu berechnen muss, sobald eine dieser Dateien fertig geladen ist. Dies kann dazu führen, dass die Seite langsamer wird oder dass andere Rendering-Artefakte auftreten, wie z. B. das Springen von Inhalten auf dem Bildschirm (im Browser-Jargon "Layout Shift" genannt).

Optimiere deine Bilder

Wenn du eine bilderlastige Webseite hast, wie z. B. einen Blog oder eine Nachrichtenseite, machen die Bilder den grössten Teil der übertragenen Seiteninhalte aus. Du hast dich wahrscheinlich daran gewöhnt, einfach ein Bild zu nehmen, es mit dem Medienmanager von Joomla hochzuladen, vielleicht noch die Grösse zu ändern, oder es ein wenig zuzuschneiden (der Medienmanager von Joomla 4 kann das jetzt!) - und das war's dann auch schon. Schön für dich, aber deine Bilder sind höchstwahrscheinlich nicht optimiert und grösser (in Kilobytes, nicht unbedingt in den Abmessungen) als sie sein sollten.

Vielleicht sind dir Tools wie pngcrush und mozjpeg nur vage oder sehr gut bekannt. Wenn du mit der Kommandozeile vertraut sind, solltest du sie zur Optimierung deiner Bilder verwenden.

Noch einfacher geht es mit dem kostenlosen Tool ImageOptim  für Windows, macOS und Linux, das mehrere dieser Tools auf Ihre Bilder anwendet und die kleinste Datei auswählt. Es ist ganz einfach. Ziehe deinen Bildordner per Drag & Drop auf das Tool. Warte, bis es fertig ist. Deine Bilder werden durch ihre optimierten Versionen ersetzt. Natürlich solltest du dies zuerst auf einer lokalen Kopie deiner Webseite durchführen. Wenn du unsicher bist, bewahre eine Kopie Ihrer Originalbilder auf, denn ImageOptim überschreibt die Bilder ohne Nachfrage mit den optimierten Versionen.

Mach deine Bilder adaptiv

Du weisst ja bereits, dass deine Seite auf Geräten mit unterschiedlichen Bildschirmgrössen angezeigt wird: preisgünstige Android-Telefone unter 5 Zoll, Mainstream-Smartphones mit 6 Zoll, Phablets oder kleine Tablets mit 7 Zoll und mehr, Tablets mit 10 bis 11 Zoll, Laptops mit 13 bis 15 Zoll und riesige Desktop-Monitore mit 23 Zoll und mehr. Du hast dies bereits berücksichtigt, indem du deine Webseite responsive gestaltet hast, was bedeutet, dass ihr Inhalt skaliert und ihr Design sich an die Interaktionsmodi anpasst, die für die Bildschirmgrösse, auf der deine Seite dargestellt wird, am besten geeignet sind.

Wenn deine Zielgeräte von einem 380 Pixel breiten Haushaltshandy bis zu einem 5120 Pixel breiten Desktop reichen, ist die gleiche Bilddatei nicht für alle Grössen geeignet. Wenn du sie für den kleinen Bildschirm optimierst, wird das Bild auf dem grossen Bildschirm unscharf und pixelig aussehen. Wenn du sie für den grossen Bildschirm optimierst, laden die meisten deiner Besucher eine unnötig grosse Datei herunter, um ein viel kleineres Bild anzuzeigen. Die Optimierung für die gängigste Gerätegrösse Ihrer Zielgruppe ist das Schlimmste aus beiden Welten: Kleine Geräte laden eine zu grosse Datei herunter, und grosse Bildschirme zeigen ein unscharfes Foto.

Wenn du dann noch HiDPI-Geräte mit einer Pixeldichte berücksichtigst, die zwei-, drei- oder viermal so hoch ist wie die Standard-Bildschirmdichte (der Standard liegt bei 96 Pixel pro Zoll), habst du ein ziemliches Rätsel zu lösen. Entscheidest du dich für eine relativ kleine Datei, die auf vielen Geräten schlecht dargestellt wird, oder für eine grosse Datei, die auf allen Geräten gut dargestellt wird, aber ein paar Megabyte gross ist?

Glücklicherweise musst du dich NICHT entscheiden. Browser unterstützen seit langem adaptive Bilder. Kurz gesagt, mit dem PICTURE  Element und den entsprechenden Media-Queries kannst du dem Browser mitteilen, dass er automatisch die richtige Bilddatei für die Anzeige (Auflösung und DPI) auswählen soll, auf der deine Seite dargestellt wird. Ändert sich die Anzeigegrösse, z. B. weil der Benutzer sein Gerät vom Hoch- ins Querformat gedreht oder die Grösse seines Browserfensters auf dem Desktop geändert hat, findet der Browser auf intelligente Weise heraus, was zu tun ist. Wenn ein ausreichend grosses Bild vorhanden ist, wird es verkleinert. Ist dies nicht der Fall und hast du in deinem PICTURE-Element angedeutet, dass eine geeignetere Bilddatei mit den erforderlichen Abmessungen verfügbar ist, wird diese stattdessen geladen. Während das grössere Bild geladen wird, erscheint das kleinere skaliert, so dass aus der Sicht des Benutzers eine leichte Unschärfe in den Bildern entsteht, die nach kurzer Zeit wieder verschwindet.

Ein weiterer Trick, den du mit dem PICTURE-Element anwenden kannst, ist, dass der Browser das am besten geeignete Dateiformat auswählt, das er unterstützt. Die meisten Bilder im Web sind JPG oder PNG. Dabei handelt es sich um alte Bildformate, die aus den 1990er Jahren oder sogar noch früher stammen. Die meisten modernen Browser unterstützen auch WEBP, ein sehr viel effizienteres Bilddateiformat, das zu sehr viel kleineren Dateien führt und gleichzeitig Transparenz unterstützt. Aus Ihrer Perspektive als Webseite-Ersteller ist das wie PNG auf Steroiden. Leider kannst du nicht einfach alles in WEBP konvertieren, da ältere Browserversionen (und alle Versionen von Safari) WEBP überhaupt nicht unterstützen.

Jetzt kannst du dich verzweifelt an den Kopf fassen. Was früher ein einfaches Hochladen einer einzigen Bilddatei und das Einfügen eines IMG-Tags in Iden Inhalt war, ist jetzt zu einem Puzzle geworden, bei dem Sie verschiedene Bildgrössen und Bildtypen erstellen müssen. Das ist schwierig für dich, den Webseite-Integrator, und geradezu unmöglich für die Kunden.

Glücklicherweise gibt es Joomla-Erweiterungen von Drittanbietern, die das für Sie erledigen können. Ich habe in der Vergangenheit XT Adaptive Images Pro verwendet. Es gibt auch Econa und möglicherweise andere - Sie können einen tiefen Einblick in das Joomla-Erweiterungsverzeichnis nehmen, wo es eine Erweiterung für jeden Bedarf und jedes Budget gibt.

Eine andere Möglichkeit ist, mit Layout-Overrides und einem Helfer, der automatisch responsive Versionen Ihrer Bilder erstellt, weiterzumachen. Dies ist der Code, den ich für die Lightning-Vorlage von Charlie Lodder beigesteuert habe. Wenn die Erstellung von Templates Vorlagen Ihr Ding ist, kannst du diese Layout-Overrides und die Hilfsklasse leicht für dein eigenes Template anpassen.

Aber was ist mit den Bildern?

Vektor-Illustrationen

Ein weiterer Punkt in Bezug auf Bilder ist, dass Illustrationen (im Gegensatz zu Fotografien) in der Regel als Vektordatei in einem Programm wie Adobe Illustrator oder Affinity Designer erstellt werden. In der Regel werden diese in transparente PNG-Dateien umgewandelt, bevor sie auf einer Webseite verwendet werden. Dies ist die am wenigsten effiziente Art und Weise, dies zu tun.

Browser unterstützen seit langem skalierbare Vektorgrafikdateien (SVG), kleine Textdateien, die Vektorgrafiken beschreiben. Sie sind in der Regel viel kleiner als die für die Fotografie optimierten Dateiformate (JPG, PNG und sogar WEBP), sie lassen sich viel besser komprimieren, da es sich um reinen Text handelt, und sie können auf jeder Bildschirmauflösung von winzig bis riesig skaliert werden, ohne an Schärfe zu verlieren.

Während es in Joomla 3 auffallend wenig SVG-Unterstützung gab - oder sogar die Möglichkeit, sie ohne Erweiterungen von Drittanbietern hinzuzufügen - ist dies in Joomla 4 problemlos möglich, solange du sie manuell aktivierst. Gehe zu Inhalt, Medien und klicke auf Optionen. Ändere die gültigen Bilddateiendungen (Dateitypen), um SVG einzuschliessen, d.h. ändere sie in:

bmp,gif,jpg,png,svg

Wenn du die Option Uploads einschränken aktiviert haben (was richtig ist!), ändere auch die zulässigen Erweiterungen so, dass sie svg einschliessen, d. h.:

bmp,gif,jpg,jpeg,png,webp,ico,mp3,mp4,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv,svg

Wenn du MIME-Typen prüfen aktiviert hast, muss du auch image/svg+xml zu den legalen MIME-Typen hinzufügen, d.h.:

image/jpeg,image/gif,image/png,image/bmp,application/msword,application/excel,application/pdf,application/powerpoint,text/plain,application/x-zip,image/svg+xml

Klicke auf Speichern & Schliessen. Jetzt erlaubt Joomla, SVG-Dateien hochzuladen und sie überall dort zu verwenden, wo ein Bild eingefügt werden darf.

Ein letzter Hinweis zur Vorsicht: Versuche nicht, SVG-Dateien in Elementen zu verwenden, die ihre Grösse aus dem Inhalt beziehen (SVG-Dateien haben keine feste Breite und Höhe für alle Browser, auch wenn eine in der Datei angegeben ist) und versuche nicht, SVG-Dateien als Hintergrundbilder zu verwenden. Es gibt zwar Möglichkeiten, beides zu tun, aber die Wahrscheinlichkeit ist gross, dass du unnötig darunter leiden wirst.

Pfusche nicht mit JavaScript und CSS herum

In den letzten 15 Jahren gab es verschiedene Techniken, um das Laden von JavaScript und CSS zu beschleunigen. In der Regel handelt es sich dabei um folgende Techniken: Zusammenfassen von Dateien, Minifying von Dateien, GZipping von Dateien und Verschieben des JS/CSS-Ladevorgangs an den unteren Rand des HTML-Dokuments.

Lass das. Verwende kein Plugin, das irgendetwas davon tut. Dies sind ganz, ganz schlechte Ideen in Joomla 4 - und es braucht sie nicht!

Das Kombinieren von Dateien verursacht jede Menge von Huhn und Ei Situationen. Du musst wissen, in welcher Reihenfolge die Dateien auf jeder einzelnen Seite deiner Seite kombiniert werden müssen, und du musst den Schlamassel debuggen, wenn etwas nicht funktioniert. Ausserdem löst es genau null Probleme; wir haben im vorigen Teil darüber gesprochen, wie Browser Dinge herunterladen, um die Seite für die Anzeige vorzubereiten.

Das Verkleinern von JavaScript- und CSS-Dateien mit PHP-Code ist völlig kontraproduktiv. Das hat vor etwa 12 Jahren funktioniert, als diese Dateien noch sehr einfach waren. Moderne JavaScript- und CSS-Dateien benötigen spezielleren, nicht-PHP-basierten Code, um sie zu minimieren, z. B. Babel und Closure. Die meisten Entwickler minifizieren ihren Code sowieso und Joomla hat seit den frühen Tagen von Joomla 3.0 volle Unterstützung für minifizierte Dateien.

Die Verwendung eines Plugins zum GZipen Ihrer Dateien ist unglaublich ineffizient und wird zu längeren Ladezeiten der Seite führen. Im Teil 2 haben wir darüber gesprochen, wie du deinen Webserver dazu bringen kannst, dies effizienter zu tun und dem Browser zu sagen, dass er die statischen Dateien zwischenspeichern soll.

Wenn du die JavaScript-Dateien vom Kopf der Seite an den Fuss der Seite verschiebst, ist das ein Problem. Wenn es ein Inline-Skript im Kopf oder im Dokumentenkörper gibt, das auf den Code verweist, von dem der Entwickler vernünftigerweise erwartet hat, dass er bereits geladen ist, wird deine Seite fehlerhaft erscheinen. Joomla 4 unterstützt verzögertes und asynchrones Laden von Skripten. Wenn der Entwickler weiss, dass sein JavaScript das unterstützen kann, wird er das nutzen und es hat so ziemlich den gleichen Effekt (eigentlich sogar einen besseren Leistungsgewinn!) als das Verschieben von JavaScript an den unteren Rand des HTML-Dokuments.

Schliesslich schafft das Verschieben von CSS an den unteren Rand des HTML-Dokuments ein grösseres Problem als es löst. Der Browser rendert die gesamte Seite ungestylt, liest dann das Stylesheet aus und muss wieder von vorne anfangen. Dies verursacht eine Menge zusätzlicher Arbeit und macht deine Webseite langsamer, während gleichzeitig die Seite blinkt und sich bewegt, während sie neu gerendert wird. Das ist für den Benutzer eine grausame Erfahrung.

Verwende also bitte keine Plugins, die diese Dinge tun, um die Webseite zu "optimieren". Vor einem Jahrzehnt waren sie noch relevant, jetzt nicht mehr.

Verwendung eines CDN

Der grösste Leistungsengpass Ihrer Webseite ist die Bereitstellung deiner statischen Dateien: Bilder, CSS, JavaScript, Videos, Audio. Dies wird durch zwei Faktoren verschlimmert, die mit dem Betrieb einer Webseite verbunden sind: die verfügbare Bandbreite und die Nähe zum Nutzer.

Die verfügbare Bandbreite ist die "Geschwindigkeitsgrenze", mit der der Server der Webseite Bytes an einen Client übertragen kann. Sicher, du hast vielleicht eine Gigabit-Glasfaser-Internetverbindung oder eine superschnelle 5G-Mobilfunkverbindung auf deiner Seite. Wenn der Server eine Höchstgeschwindigkeit von 20 Mbit/s erreicht, ist dies die Geschwindigkeit, mit der alle Inhalte von diesem Server auf deinem Gerät ankommen.

Die Nähe zum Nutzer hat mit der ultimativen Geschwindigkeitsgrenze des Universums zu tun: der Lichtgeschwindigkeit. Einige von euch lachen jetzt. Nun, es ist wahr! Alle Daten von den Servern Ihrer Webseite werden über Glasfaserverbindungen übertragen, d. h. mit Laserlicht, das durch Glasrohre geleitet wird. Das sind 99,9 % des Weges. Die anderen 0,1 % können Kupferkabel (ADSL/VDSL), Mikrowellen (Satelliteninternet, 5G, WiFi) oder elektrische Impulse (Ethernet) sein. Das Laserlicht kann sich nicht schneller als mit Lichtgeschwindigkeit fortbewegen - tatsächlich bewegt es sich mit etwa 0,9c, 90 % der Lichtgeschwindigkeit oder knapp 270.000 Kilometern pro Sekunde / 168.000 Meilen pro Sekunde. Wenn sich dein Server am anderen Ende der Welt befindet, müssen die Daten etwa 20.000 Kilometer zurücklegen, was etwa 75 Millisekunden entspricht. Die Datenübertragung dauert einen Umlauf (Anfrage senden, Ergebnis zurückerhalten), so dass wir zusätzlich 150 Millisekunden warten müssen, bevor etwas vom Server zum Gerät des Benutzers gelangt. Je näher der Server dem Nutzer ist, desto schneller beginnt die Datenübertragung.

Der Kauf von mehr Bandbreite bei Ihrem Hoster ist zwar möglich, aber teuer. Den Standort des Servers zu ändern, kann unpraktisch sein, vor allem, wenn Sie einen geografischen Standort bedienen, der grösser ist als ein einzelnes Land von europäischer Grösse oder ein US-Bundesstaat.

Die Lösung für beide Probleme ist die Verwendung eines CDN (Content Delivery Network). Ein CDN verfügt über mehrere Server, so genannte Nodes, in Datenzentren auf der ganzen Welt. Deine statischen Dateien werden an diesen Knotenpunkten zwischengespeichert. Wenn ein Client eine Seite von deiner Webseite anfordert, leitet das CDN die Anfrage an deinen Server weiter, der Server führt Joomla aus und sendet den HTML-Inhalt über den CDN-Knoten an den Benutzer zurück. Wenn der Browser jedoch den statischen Inhalt Ihrer Webseite anfordert - das JavaScript, CSS, die Bilder usw., die zum Rendern der Seite erforderlich sind - hat der CDN-Knoten sie im Cache und liefert sie von dem Knoten, der dem Benutzer am nächsten ist. Das CDN verfügt ausserdem über reichlich Bandbreite, da es diese in grossen Mengen viel billiger einkauft als dein Hoster, was bedeutet, dass es eine schnelle Gigabit- oder 5G-Verbindung auslasten kann, auch wenn dein Server das nicht kann. Der kombinierte Effekt ist, dass eine Webseite viel schneller geladen wird.

Es gibt eine Vielzahl von CDNs da draussen. Ich verwende CloudFlare, weil es ein kombinierter CDN-, Webseite-Optimierungs- und Webseite-Sicherheitsdienst ist. Die Optimierungsfunktionen, die es bietet, können automatisch die Komprimierung deiner statischen Ressourcen übernehmen, wenn dein Server dies nicht unterstützt. Je nach deinen Bedürfnissen gibt es eine kostenlose Version, aber auch kostenpflichtige Versionen mit vielen weiteren Funktionen.

Es ist nicht notwendig, ein CDN zu verwenden. Wenn du eine Webseite hast, die ein grosses geografisches Gebiet bedient, oder wenn du erwartest, dass sie mit Anfragen überhäuft wird, dann solltest du dies in Betracht ziehen. Die Bezahlung für ein CDN ist in der Regel viel billiger und bereitet weniger Kopfzerbrechen als der Umzug auf einen dedizierten Server.

Im nächsten Teil sprechen wir über Fitnessübungen zum Aufbau einer Webseite für diejenigen unter euch, die ihre Templates selbst erstellen oder anpassen. Der letzte Artikel dieser Serie wird dann aus Tipps und Tricks zur Qualität der Inhalte und zur Optimierung deiner Inhalte bestehen, nicht nur für Suchmaschinen, sondern auch für deine menschlichen Besucher.

Bis dahin: Viel Spass beim Erstellen deiner Webseite!