Sommerupgrade für meinen Blog
Immer wieder habe ich kleinere Aktualisierungen an meinem Template vorgenommen, aber dieses Mal waren es größere Änderungen und Erweiterungen. Neben der Aktualisierung meines Layouts bin ich alle PHP-, CSS- und JavaScript-Dateien durchgegangen und habe ein komplettes Refactoring meines WordPress Templates durchgeführt. Im Fokus stand dabei die Optimierung der Geschwindigkeit. Zusätzlich habe ich die Struktur meiner Website angepasst, um meine Vorträge und Workshops mehr in den Vordergrund zu stellen.
Design
Mein bisheriges Design habe ich angepasst und viele Details optimieret. Hier habe ich vor allem noch einmal mein „Fluid Layout“ besser für unterschiedliche Geräte optimiert und durch eine andere Anordnung meine Blog-Artikel mehr in den Vordergrund gestellt. Zusätzliche habe ich die Darstellung der Texte noch weiter verfeinert.
Layout
Altes Layout der
Am auffälligsten ist die neue Startseite. Statt mit nur einer einfachen Liste aller neuesten Blog-Artikel starte ich ganz oben mit einem Slider mit den zehn neuesten Artikeln. Direkt darunter kommt eine kleine Beschreibung über mich und eine Animation mit der Anzahl meiner bisherigen Blog-Artikel. Direkt anschließend kommen die wichtigsten Themen meiner Seite und darunter noch einmal die Liste der neuesten Artikel. Ich wiederhole bewusst die neuesten Blog-Artikel noch einmal, da der Slider zwar einen schnellen Einstieg ermöglicht, neuen Besuchern aber keinen Überblick über meine Themen zulässt.
Die Navigation ist grundsätzlich gleich geblieben, es haben sich nur die Menüpunkte geändert. Allerdings habe ich einen Style für eine verkleinerte Version eingefügt, die sichtbar wird, sobald nach unten gescrollt wird.
Bisher hatte ich immer auf der rechten Seite die gleiche Sidebar auf allen Seiten. Da sie doch einiges an Platz einnimmt und gleichzeitig vom Inhalt ablenkt, habe ich mich entschieden, sie in die Fußzeile nach unten zu verschieben. Dadurch können sich meine Besucher noch besser auf die Inhalte konzentrieren.
Alle Seiten habe ich komplett überarbeitet, damit ich die volle Breite auch optimal nutzen kann. Vor allem hat die Kontaktseite mal ein Upgrade bekommen. Hier hatte ich immer alle Inhalte einfach nur reingepackt und über die Jahre hinweg hat das Ganze ein bisschen optisch gelitten.
Altes Layout der Artikel
Der Hauptfokus der Anpassung lag auf der Darstellung der Artikel. Das Artikelfoto wird nun in der kompletten Breite angezeigt und der Titel steht nun alleine im unteren Bereich des Fotos. Der Teasertext wurde ein wenig größer und läuft ebenfalls über die komplette Breite. Der Platz der ehemaligen Sidebar wird zum Teil für den Inhalt genutzt. Neu hinzugekommen ist eine kleinere Spalte auf der rechten Seite für das Inhaltsverzeichnis und die Marginalien. Das Inhaltsverzeichnis wird automatisch aus den Überschriften generiert. Mit den Stichwörtern als Marginalien können die Leser die Inhalte schneller erfassen und die Texte besser überfliegen. Bei einer kleineren Darstellung werden diese einfach ausgeblendet.
Einige ältere Teile mit zwei Spalten basierten noch auf klassischen floats und prozentualen Angaben. Hier setzte ich mittlerweile konsequent auf das CSS Grid Layout. Um das Fluid Layout zu realisieren, verwende ich ausschließlich rem-Werte für Größenangaben. Zentral definiere ich, abhängig von der Bildschirmauflösung, eine Schriftgröße in pt für den Body. Früher verwendete ich eine zentrale SCSS-Datei für alle Responsiveineträge, was allerdings dafür gesorgt hat, dass es sehr unübersichtlich wurde, da sich die Informationen für ein Element auf verschiedene Dateien verteilt haben. Jetzt verwende ich SCSS-Variablen für die Auflösungen und kann so die media queris für die Elemente in den jeweils gleichen Dateien defineiren.
Typographie
Die Schriftart habe ich gewechselt, da der Text der Artikel in einer Serifenschrift dargestellt werden sollte, um die Lesbarkeit zu verbessern. Wichtig war, eine gute Kombination aus einer Serifen- und Serifenloseschrift zu finden. Ich habe mich für die beiden Schriftarten Lato und Lustria entschieden, da sie gut miteinander harmonisieren. Der Fließtext wird mit der Serifenschrift Lustria angezeigt und alle anderen Elemente mit der serifenlosen Schriftart Lato.
Im Laufe der Zeit kamen immer wieder weitere Elemente hinzu wie Tabellen und Aufzählungen. Diese habe ich hinzugefügt und ad hoc einen Style dafür entwickelt. Nun bin ich alle Elemente noch einmal durchgegangen und habe damit eine höhere Durchgängigkeit erzielt. Gleichzeitig sind die Abstände jetzt harmonischer und alles hat ein bisschen mehr Luft.
Hatte ich bisher Quellen in meinen Blog-Artikeln verwendet, fügte ich diese händisch hinzu. Dafür habe ich nun ein kleines Script geschrieben, welches automatisch ein kleines Verzeichnis am Ende erstellt und die Verknüpfungen herstellt. Dabei verwende ich die Konvention der IEEE Zitierweise. Die Quellen werden in der Reihenfolge ihrer Verwendung nummeriert. Die jeweilige Nummer (pro Quelle wird eine Nummer vergeben) steht im Anschluss an das Zitat oder die Paraphrase in eckigen Klammern.
Geschwindigkeit
Bisher hatte ich schon eine schnelle Ladezeit, konnte diese aber noch einmal verbessern. Neben einem schlanken HTML-Code und minimalen CSS-Anweisungen spielten die Komprimierung der Abbildungen, die Einbindungen externen Dateien und die Optimierung von WordPress die größten Rollen.
Software is getting slower more rapidly than hardware becomes faster.
Abbildungen
Für die Reduzierung der Ladezeit sind das nachträgliche Laden von Abbildungen, die nicht im sichtbaren Bereich sind, und die Verwendung des Bildformates WebP die effizientesten Methoden.
Mit der sogenannten Lazy Load Variante werden Abbildungen mit einem Platzhalter versehen und erst geladen, sobald sie kurz vor dem sichtbaren Bereich sind. Diese Methode kommt vor allem bei Elementen zum Einsatz, die sich weiter unten auf der Seite befinden. Dadurch werden die sichtbaren Elemente schneller geladen und gleichzeitig Bandbreite gespart, sollte der Besucher nicht bis ganz nach unten scrollen. Bei einigen Elementen kam Lazy Load bereits zum Einsatz. Ich habe den Einsatz nur konsequenter umgesetzt und vor allem auch für responsive Abbildungen, die mehrere Versionen für unterschiedliche Auflösungen bereitstellen, eingesetzt. Dazu wechselte ich zur Bibliothek lazysizes von Alexander Farkas. Sie kann mit den verschiedenen Varianten für ein Einbindung von A-bildungen umgehen.
Bisher hatte ich meine Abbildungen immer mit JPEG Mini möglichst gut komprimiert. Neu dazugekommen ist, dass die Header-Fotos der Artikel zusätzlich im WebP-Format ausgeliefert werden. Sie werden über ein Picture Set definiert, so dass es ein Fallback gibt, sollte ein Web-Browser das Format nicht unterstützen.
Zusätzlich werden die Header-Fotos in vier unterschiedlichen Größen bereitgestellt und per Media Query passend zur Auflösung ausgeliefert. Dadurch profitieren vor allem Geräte mit kleineren Bildschirmen wie zum Beispiel Smartphones.
Externe Dateien
Bei der richtigen Methode für die Einbindung von externen Dateien bin ich zwiegespalten. Die Empfehlungen lauten meist, dass alle Inhalte im sichtbaren Bereich direkt in der Seite definiert werden sollten. Eine Anfrage weniger beschleunigt den Seitenaufruf, allerdings nimmt dadurch die Seitengröße zu. Bei nur einem Zugriff kann ich das auch gut nachvollziehen, aber sobald ein Besucher mehrere Seiten anschaut, ist die Datenmenge in der Summe größer. Daher arbeite ich mit einzelnen externen Dateien, die im Cache gespeichert werden können.
Die Hauptdatei ist im Kopfbereich eingebunden und beinhaltet die Anweisungen für alle sichtbaren Elemente nach dem Seitenaufruf. Die Schriftarten werden mit WOFF2-Format bereitgestellt und als Fallback im alten TTF-Format angeboten. Sie beinhalten nur die Zeichen der deutschen und englischen Sprache. Eine zweite CSS-Datei wird per JavaScript, sobald die Seite komplett im Browser dargestellt wird, asynchron nachgeladen. Darin ist das Aussehen von weiteren Inhaltselementen wie des Kommentarbereichs und der Fußzeile definiert. Für Elemente, die nur selten vorkommen, werden die Style-Informationen per JavaScript nachgeladen, nur wenn das Element vorhanden ist.
Grundsätzlich verzichte ich bei JavaScript auf eine Bibliothek wie jQuery und realisiere alle Funktionen mit reinem JavaScript – auch Vanilla JS genannt. Allein die Dateigröße von jQuery wäre größer als mein gesamter Code. Die Hauptdatei wird dem Befehl defer eingebunden, um keine anderen Ressourcen zu blockieren. Sie beinhaltet nur die wichtigsten Funktionen z.B. für die Navigation und eine Funktionalität, um weitere Scripte nachzuladen, wenn spezifische CSS-Klassen vorhanden sind.
Um die externen Dateien schneller zu laden, werden sie per HTTP/2 Push bereits beim Aufruf einer Seite mitgeteilt. Dadurch werden die CSS- und JavaScript-Dateien parallel geladen. Damit dies nur einmal erfolgt, wird nach dem ersten Ladevorgang ein Cookie gesetzt.
WordPress
WordPress ist ein flexibles System mit vielen Funktionen. Da ich aber nicht alle Features einsetze, habe ich im Kopfbereich der HTML-Seite irrelevante Einträge entfernt und die dazugehörigen Funktionen deaktiviert. Des Weiteren versuche ich nur wenige Plugins zu verwenden und möglichst viele Funktionen mit performanten PHP-Code in meinem Template selber zu realisieren.
Das Zwischenspeichern von vorab generierten HTML-Dateien und deren Auslieferung ist die effizienteste Art, WorldPress zu beschleunigen, anstatt bei jeder Abfrage per PHP auf die MySQL-Datenbank zuzugreifen. Bisher nutzte ich dafür das Plugin WP Super Cache. Ich suchte nach einem neuen Plugin, welches die folgenden Kriterien erfüllte:
- Open Source und eine aktive Entwicklung
- Keine unnötigen Funktionen, die ich nicht benötige
- Keine Hinweise zu irgendwelchen Premiumversionen
Schlussendlich bin ich beim Plugin Cache Enabler gelandet, welches jetzt hier den Dienst verrichtet.
Sicherheit
Seit WordPress die automatische Aktualisierung eingeführt hat, können Blogger deutlich entspannter in den Urlaub gehen. Mit dieser Funktion werden kritische Sicherheitsupdates automatisch eingespielt, der Admin erhält dann eine Benach-richtigung per Mail. In Kombination mit einer sicheren Infrastruktur und einer ak-tuellen PHP-Version ist damit schon einmal viel erreicht.
WordPress
Die meisten Angriffe auf das WordPress-System erfolgen über die Plugins. Daher schlägt sich die Optimierung der Geschwindigkeit auch auf die Sicherheit nieder. Schon immer habe ich dazu geneigt, so wenig Plugins wie nur irgendwie möglich zu verwenden. Häufig sind es nur kleine Funktionen oder Änderungen, für die ein neues Plugin eingesetzt wird. Daher bin ich meine Liste noch einmal durchgegangen und habe nach Möglichkeiten gesucht, die Funktionen durch kleine Code-schnipsel in der functions.php zu ersetzen. Außerdem habe ich versucht, Funktionen von WordPress zu deaktivieren, die ich nicht nutze. Dadurch reduziert sich auch die potentielle Angriffsfläche.
.htaccess
Über die .htaccess-Datei habe ich den Zugriff auf die wichtigsten Konfigurationsdateien verboten und einen Passwortschutz für das Admin-Verzeichnis eingerichtet. Zusätzlich habe ich die 7G Firewall von Perishable Press eingebunden. Sie beinhaltet verschiedene Regeln zur Filterung von Links, die Muster von bekannten Angriffen beinhalten.
Datenschutz
Grundsätzlich versuche ich schon immer, möglichst wenige Daten zu erfassen. Daher musste ich mit der Einführung der DSGVO auch keine großen Änderungen durchführen. Grundsätzlich orientiere ich mich an den Empfehlungen des Landesbeauftragten für den Datenschutz und an der Informationsfreiheit Baden-Württemberg.
Webhoster
Früher nutzte ich als Webhoster Domainfactory. Nachdem sie aber als Erstes von der Host Europe Group aufgekauft worden sind, selbige dann später von GoDaddy, einem Anbieter aus den USA, der immer wieder auch von Spammer genutzt wird, aufgekauft wurden, entschloss ich mich, meinen Webhoster zu wechseln. Hinzu kam der fragwürdige Umgang mit dem Kundendaten-Hack. Daher bin ich mittlerweile beim Anbieter webGo aus Hamburg, der kein Massenhoster ist, schnelle Server bietet und viele Einstellungen ermöglicht. Um die Vorgaben des Datenschutzes zu erfüllen, habe ich mit dem Anbieter einen Vertrag zur Auftragsdatenverarbeitung geschlossen und in den Einstellungen die Speicherung der IP-Adresse in den Log-Dateien deaktiviert.
Matomo
Auf meiner Website setzte ich Matomo für die statische Analyse der Seitenaufrufe ein. Mich interessiert dabei, welche Seiten am beliebtesten sind, woher die Besucher kommen, welche internen Verknüpfungen genutzt werden und welche Endgeräte am häufigsten eingesetzt werden. Da mich nur die Nutzung meiner Website interessiert und ich keine einzelnen Besucher tracken möchte, betrieb ich früher schon Piwik in einer datenschutzfreundlichen Konfiguration. Mein Ziel ist, möglichst wenige Daten zu verarbeiten.
Fazit
Über alle Änderungen, die ich in den letzten Wochen durchgeführt habe, hätte ich noch viel mehr schreiben können. Aber ich wollte einfach einen Überblick über die wichtigsten Punkte meines Sommerupgrades geben. Vielleicht greife ich aber in Zukunft einzelne Themen auf und erkläre sie noch ausführlicher. Wenn es noch Fragen oder noch irgendwelche Unstimmigkeiten gibt, einfach unten einen Kommentar hinterlassen.
Cooler Blog. Webdesign und e-Marketing scheint ein tolles Steckenpferd zu sein.
Es macht Spass zu lesen und über Neuerungen und Upgrades informiert zu werden.