Für unsere #FERNGESPRÄCH Community habe ich vor wenigen Tagen eine kleine Website aufgebaut. Das habe ich dann auch mal wieder zum Anlass genommen, mich wieder ein wenig in das Thema Website Optimierung einzuarbeiten. Es hat sich in diesem Bereich vieles getan und es gibt da auch schöne neue Tools.
Website für die Zeugen Kühlwaldis
Das #FERNGESPRÄCH ist eine Sendung auf dem Twitch-Channel WildMics bei dem Tommy Krappweis zusammen mit Hoaxilla zu den verschiedenen Themen befreundete Experten einlädt um darüber zu sprechen. Um diese Sendung herum hat sich eine Community gebildet, die sich Zeugen Kühlwaldis nennt. Und zu dieser Community baue ich aktuell eine Website auf. Wer mehr darüber wissen will, kann entsprechen auf der Website nachschauen. Dafür ist sie ja da ;)
Verwendete Technik
Für die Website nutze ich das HTML5, dass CSS Framework Bootstrap und PHP 8.1 zum Generieren der Seiten. Für den zusätzlichen CSS-Code verwende ich SCSS. Die Website liegt beim saarländischen Webhoster Manitu. Als Entwicklungsumgebung nutze ich das kostenlose Visual Studio Code von Microsoft. Strukturierte Daten (z.B. die Liste der Ferngespräche) habe ich aktuell in JSON-Dateien hinterlegt. Im Laufe der Zeit werde ich diese Daten in einer Datenbank (MariaDB) speichern. Für die jetzige Version sind die JSON-Dateien ausreichend.
Entwicklertools im Browser
Inzwischen habe alle Browser auch Entwicklertools integriert. Diese lassen sich mit der Taste F12 öffnen bzw. auch wieder schließen.
Über den Reiter „Inspector“ (Firefox) bzw. „Elements“ (Chrome) kann der HTML-Code analysiert und optimiert werden.
Für die Optimierung der Ladezeiten ist der Reiter „Netzwerkanalyse“ (Firefox) bzw. „Network“ (Chrome) wichtig. Hier findet ihr die Anfragen, die der Browser an den Webserver schickt um die Elemente der Website zu laden.
- das Dokument (der HTML-Code)
- die Stylesheets (styles.min.css mit Timestamp als Parameter)
- eine JavaScript Datei (bootstrap.bundle.min.js mit Timestamp als Parameter)
- die Header-Grafik (banner.jpg)
Je nach Browser werden noch weitere Dateien geladen. So hat Firefox noch das Apple Touch Icon (apple-touch-icon.png) und das kleine Favicon (favicon-16×16.png) geladen. Chrome interessiert sich eher für das Manifest (site.webmanifest).
Zusammen sind die Daten 310,03 KB groß. Durch entsprechende Kompression wurden 119,18 KB übertragen. Die ganze Seite wurde in 346 ms geladen.
Weniger Requests sind besser für die Ladezeit der Website.
Das ist der Stand nach meinen Optimierungen. Dies ist aber auch nur in dieser Form möglich, da ich die Seite komplett von Hand (abgesehen vom CSS Framework Bootstrap) aufgebaut habe. Sobald man ein CMS und verschiedene Erweiterungen nutzt, wird eine solche Optimierung nur mit einem sehr hohen Aufwand möglich sein.
Content Management System wie WordPress
Ein CMS wie WordPress ermöglicht eine deutlich effizientere Pflege einer Website. Es gibt zahlreiche Erweiterungen die mit wenigen Mausklicks nützliche Funktionen ergänzen. Das führt jedoch auch dazu, dass mehrere CSS und JS-Dateien in die Website eingebunden werden.
Bei spitzohr.de werden insgesamt gleich drei CSS-Dateien geladen.
- style.min.css stammt direkt von WordPress und enthält die Formatierungen der Blöcke
- jquery.fancybox.min.css gehört zu einer Erweiterung um Bilder in einer Lightbox anzuzeigen
- style.css ist das Stylesheet meines Themes
Das „min“ im Dateinamen bedeutet, dass die CSS-Datei auf das notwendige Minimum reduziert (CSS minify) wurde. Dort wurden z.B. alle Leerzeilen und Zeichenumbrüche entfernt. Bei den Zeugen Kühlwaldis pflege ich meine Stylesheets über SCSS-Dateien, welche dann durch eine Erweiterung in Visual Studio Code automatisch bei jeder Änderung in eine komprimierte CSS-Datei (styles.min.css) zusammengefasst werden.
Insgesamt werden auch 8 JavaScript-Dateien geladen. Diese stammen auch wieder direkt von WordPress, aus meinem Theme und von den verschiedenen Plugins. Ähnlich wie bei den Stylesheets kann die Entwicklungsumgebung aus JavaScript (oder besser gleich TypeScript) Dateien eine minified JavaScript-Datei erzeugen. Bei den Zeugen Kühlwaldis nutze ich bisher nur die JS-Datei von Bootstrap. Beim Episodenguide.de habe ich eine TypeScript-Datei, die dann eine scripts.min.js erzeugt.
Online-Tools zur Analyse
Google Search Console
Neben den Entwicklertools im Browser gibt es auch zahlreiche Online-Tools. Dazu gehört auch die Google Search Console (früher Google Webmaster Tools).
Es dauert mehrere Tage oder Wochen, bis für eine neue Website („Property“) genug Daten gesammelt wurden. Anbei ein paar Screenshots zu anderen meiner Websites
PageSpeed Insights
Auf der Seite PageSpeed Insights kann man die eigene Website testen lassen. Dabei werden verschiedene Aspekte geprüft und bei Problemen gibt es weiterführende Informationen und Tipps, wie diese behoben werden können. Mit Hilfe dieser Tipps habe ich die Seite für die Zeugen Kühlwaldis habe auf 100 Punkte gebracht ;)
Das funktioniert aber nicht mit allen Seiten! Die Unterseite mit der Liste der Ferngespräche kommt nur auf 99 Punkte. Die Seite hat zu viele DOM-Elemente (HTML-Tags). Bei mehr als 800 Elemente wird eine Warnung angezeigt. Bei mehr als 1400 zeigt das Tool einen Fehler an. Eine Optimierung ist in diesem Bereich schwierig. Die Liste enthält aktuell 105 Einträge. Jede Zeile besteht aus 13 HTML-Tags. Das sind dann bereits 1.365 Tags für die Liste. Eventuell kann ich ein oder zwei Tags einsparen, dann habe ich aber noch immer über 1.000 Tags.
Bei spitzohr.de gibt es noch deutlich mehr Optimierungspotential. Dort komme ich aktuell nur auf 67 Punkte.
Wie weiter oben bereits erwähnt hat die Seite zahlreiche CSS und JS-Dateien, die geladen werden. Diese blockieren teilweise das Rendering. Siehe dazu Eliminate render-blocking resources.
Die Textkomprimierung ist für den Webserver nicht aktiviert. Wie das geht ist auf der Seite Enable text compression beschrieben. Ich habe daher auf spitzohr.de jetzt folgenden Code in der .htaccess Datei ergänzt:
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/css text/plain text/php text/xml AddOutputFilterByType DEFLATE application/xml application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript application/x-javascript </IfModule>
Nach dieser Änderung haben sich die Punkte für spitzohr.de bereits auf 83 verbessert.
Eine der Empfehlungen ist auch „Erstreaktion des Servers verringern“. Die Reaktionszeit von spitzohr.de schwankt bei meinem Tests zwischen 1s und 2s. Deswegen gibt es auch bei jeder Analyse durch die PageSpeed Insights immer andere Punkte in einem bestimmten Bereich. So hatte ich nach der Optimierung Punkte zwischen 79 und 83.
Um bei WordPress die Reaktionszeit des Servers bzw. die Generierung der HTML-Seite zu verbessern gibt es andere Möglichkeiten. Ein häufiges Problem ist die Installation von zu vielen Plugins. Mehr Plugins = langsamer. Mit neueren PHP-Versionen (z.B. 8.1 statt 7.4) wird die Seite auch schneller. Ansonsten sollte auch geprüft werden, ob der Hoster auch Pakete mit besserer Performance anbietet. Es gibt zahlreiche Seiten, die sich mit dem Theme WordPress-Optimierung beschäftigen.
Mein Fazit
Es hat mal wieder Spaß gemacht, mich mit dem Thema Website Optimierung zu beschäftigen. Allerdings beschränke ich mich da im wesentlich auf meine händisch erstellen Website. Abgesehen von den Tipps hier im Blog-Artikel werde ich keine Optimierungen anbieten. Da gibt es genug Agenturen und andere kreative Menschen, die so etwas anbieten und auch besser können.