In den letzten Wochen habe ich auf meinem Blog wichtige Änderungen durchgeführt, dabei wurde das Theme ausgetauscht, weil die Ladezeiten nicht überzeugend waren.
Die vergangenen Jahre habe ich für meinen Blog das bekannte und beliebte Premium-Theme Avada eingesetzt. Die Wahl habe ich vor allem wegen der vielen Gestaltungsmöglichkeiten getroffen, die der Page Builder von Avada den Usern bietet.
Doch wo Vorteile sind, lauern gleichzeitig Nachteile. Der aufgeblähte Code belastete die Performance des Themes, schnelle Ladezeiten ließen sich kaum umsetzen, was zahlreiche Avada-Nutzer regelmäßig bemängelten.
In der neuen Version hat sich das Avada-Team nun diesem Problem angenommen, wahrscheinlich auch deshalb, weil im Juni die Web Core Vitals von Google angekündigt wurden und man wegen der schlechten Ladezeiten nicht unnötig Kunden verlieren wollte.
Das Resultat ist der Performance Wizard von Avada, über den man ungenutzte Features, Icons, Schriftarten und Elemente deaktivieren sowie CSS-, JavaScript- sowie Bilder- und Video-Optimierungen vornehmen kann. Dadurch wird die Website deutlich performanter.
Dennoch sind weitere Optimierungsplugins in den meisten Fällen vonnöten, um die jeweilige Internetseite noch schneller zu machen und um die Core Web Vitals als Ranking Faktor zu erfüllen.
Umstieg vom Avada- auf das Generate-Press-Theme
Ich habe mich im April dazu entschlossen, das Avada-Theme gegen das schnelle GeneratePress-Theme auszutauschen. Das Theme und seine Funktionen habe ich in einem vergangenen Artikel näher vorgestellt.
Auf den Umstieg habe ich mich nicht sonderlich gefreut, bedeutete das Ganze doch eine Menge Arbeit. Die Seiten, die ich mit dem Avada-Page-Builder gestaltet habe, mussten alle neu konzipiert und vor allem der Avada-Shortcode entfernt werden.
Des Weiteren hatte ich mir vorgenommen, keinen weiteren Page-Builder wie z. B. Elementor und Beaver Builder einzusetzen, um die Website möglichst schlank zu halten.
Das hieß auch, mich mit dem Gutenberg-Editor vertraut zu machen, worauf ich überhaupt keine Lust hatte. Doch die unliebsame Beschäftigung damit hat sich gelohnt, mittlerweile komme ich mit den Gutenberg-Funktionen sehr gut zurecht.
Zusammen mit GeneratePress verwende ich das kostenlose Plugin GenerateBlocks, mit dem sich Container, Layoutraster und ansprechende Headlines sowie Buttons erstellen lassen. GenerateBlocks gibt es auch als kostenpflichtiges Premium-Plugin mit weiteren Features.
Layoutgestaltung im Blog
In den Blogartikeln selbst verzichte ich auf aufwändige Layoutgestaltung. Ab und zu hinterlege ich einen Textabschnitt mit hellgrauer Farbe, um ihn optisch hervorzuheben.
Mehrspaltige Textgestaltung habe ich bisher vermieden, was nicht heißen soll, dass ich dies nie umsetzen werde. Bei umfangreichen und zeitlosen Säulenartikel werde ich in Zukunft auch mehr Zeit in das Layoutkonzept investieren.
Dafür habe ich auf den statischen Seiten und natürlich auf der Homepage ein moderneres Layout umgesetzt. Die Texte sind zweispaltig, werden von Bildern, die sich auch in Spalten befinden, unterbrochen, sodass die User von Bleiwüsten verschont bleiben.
Die Startseite habe ich mit Containern von GenerateBlocks erstellt, darin zwei- bzw. dreispaltigen Text angelegt, die Spalten farblich abgesetzt und die Container mit Farbverlauf oder Parallaxbildern hinterlegt.
Zuerst dachte ich, dass ich die Startseite visuell nicht mehr so ansprechend gestalten kann wie mit Avada. Doch ich habe mich glücklicherweise geirrt. Es ist kaum ein Unterschied zu dem vorherigen Layout zu sehen.
Plugins
Um die Ladezeit so gut wie möglich niedrig zu halten, habe ich folgende Plugins installiert:
WP Rocket (kostenpflichtig): Das bekannte Caching-Plugin lässt sich sehr schnell einrichten und bietet viele nützliche Funktionen wie
- Caching-Grundfunktionen (Caching für mobile Geräte aktivieren)
- Datei-Optimierung wie CSS minimieren, zusammenfassen und ungenutztes CSS entfernen, JavaScript minimieren, verzögert laden, JavaScript-Ausführung verzögern
- LazyLoad, Bildabmessungen hinzufügen, WebP-Caching aktivieren, WordPress-Embeds deaktivieren
- Cache füllen: Vorladen von Links aktivieren, Vorladen aktivieren, Fonts vorladen
- Erweiterte Regeln: Nie cachen (von bestimmten Seiten wie Login-/Logout-Seiten, Cookies, User Agents)
- Datenbank bereinigen: Revisionen löschen, Transients bereinigen etc.
- Integration eines CDN (nutze ich nicht)
- Heartbeat kontrollieren
Die wichtigsten Features sind nach der Plugin-Aktivierung schon eingeschaltet. Ich bin bisher mit diesem Plugin sehr zufrieden.
Wichtige Einstellungen (gesetztes Häkchen):
- Caching für mobile Geräte aktivieren
- CSS minifizieren, CSS zusammenfassen, CSS-Darstellung optimieren
- JavaScript minifizieren, JavaScript verzögert laden, JavaScript-Ausführung verzögern
- Lazyload aktivieren (für Bilder, iFrames, Videos)
- Fehlende Bildabmessungen hinzufügen
- Vorladen aktivieren, Vorladen von Links aktivieren
- Datenbank optimieren: Bitte vorher eine Sicherung der Datenbank anlegen, ansonsten kann da wirklich auch mal was schiefgehen. Es lohnt sich allerdings, überflüssige Revisionen, Transients und Spam-Kommentare löschen zu lassen, genauso wie die Optimierung von Tabellen.
Falls dein Layout nach den vorgenommenen CSS- und JavaScript-Einstellungen fehlerhaft ist, solltest du testen, welche Einstellungen dein Theme verträgt und welche nicht. GeneratePress zickt jedenfalls nicht rum.
Autoptimize (kostenlos): Das Optimierungs-Plugin bietet zwar auch einige Funktionen an, die sich mit dem Caching-Plugin WP Rocket überschneiden, aber auch noch andere nützliche.
So habe ich unter Extras die Google Fonts entfernt (ich verwende nur noch Webfonts) und unter JS, CSS & HTML die Option HTML-Code optimieren angehakt.
Autoclear Autoptimize Cache (kostenlos): Das Ergänzungsplugin zu Autoptimize leert den Cache, wenn er den von dir festgesetzten Wert (z. B. 1 GB) überschreitet. Denn Autoptimize erstellt gecachte Versionen von sogenannten Asset Files, um die Ladezeit zu reduzieren, Doch irgendwann werden diese Dateien zu groß und verbrauchen unnötigen Webspace. Deshalb solltest du diesen Cache regelmäßig löschen.
LazyLoads for Comments (kostenlos): Dieses Plugin lädt die Kommentare nach, wenn der User entweder auf den Button Load Comments klickt oder wenn er weiter nach unten scrollt. Die gewünschte Option On Scroll oder On Click findest du unter Einstellungen -> Diskussion. Auch dadurch wird Ladezeit gespart.
Imagify (kostenlos): Mit diesem Bildkomprimierungsplugin lassen sich hochgeladene Fotos und Grafiken in ihrer Dateigröße deutlich verkleinern. Es gibt drei verschiedene Optimierungsstufen: normal, aggressiv, ultra. Ich habe die zweite Stufe ausgewählt (aggressiv).
Außerdem wandelt Imagify jpg- und png-Bilder in das moderne WebP-Format um, was auch die Ladezeit positiv beeinflusst. In der kostenlosen Version kannst du wegen der monatlichen Datenmengen-Beschränkung nicht alle Bilder auf einmal umwandeln, dafür benötigst du einen kostenpflichtigen Tarif.
LuckyWP Table of Contents: Dieses leichtgewichtige Inhaltsverzeichnis-Plugin habe ich nun in Verwendung.
Außerdem habe ich die Avatar-Anzeige in den Kommentaren unter Einstellungen -> Diskussion ausgeschaltet.
Test mit Google Page Speed
Nach vielen Tests und einigen Unverständlichkeiten hat mein Blog gute Werte bei den Core Web Vitals, sowohl in der mobilen als auch in der Desktop-Version.
Anfangs stimmten nur die Werte in der mobilen Version, in der Desktop-Version war ständig der CLS, der Cumulative Layout Shift etwas zu hoch. Ich dachte zuerst, das wäre ein Layoutproblem, doch damit hatte es nichts zu tun.
Meistens liegt das Problem nicht an irgendwelchen Feineinstellungen, sondern daran, welche Plugins und welches Theme du verwendest, und ob der Hoster auch eine gewisse Performance bietet.
Die im Screenshot (unten) gezeigten Werte sind nicht immer die gleichen, manchmal ist die Time to Interactive etwas zu hoch, doch die Ladezeit und die Web Core Vitals liefern ständig gute Werte.
Um die Website-Performance zu optimieren, gibt es u. a. noch zwei weitere erwähnenswerte Plugins:
Perfmatters (kostenpflichtig): Damit lassen sich z. B. Skripte auf Seiten- und Blogpost-Basis ausschalten, so dass diese nur noch auf notwendigen Seiten geladen werden.
Beispiel: Das Kontaktform-Plugin Contact-Form 7 wird ständig geladen, auch wenn auf der jeweiligen Seite/dem jeweiligen Blogpost gar kein Kontaktformular eingebunden ist. Das kostet Performance.
Mit dem Script-Manager von perfmatters lassen sich solche Skripte ausschalten.
Weitere Features von perfmatters:
- LazyLoading
- Datenbankoptimierung
- JavaScript verzögert laden
- Google-Analytics-Script lokal hosten
- Blogrevisionen ausschalten oder begrenzen
- Kommentare und URLs deaktivieren
- Google Maps deaktivieren
- Emojis, Embeds und Dashicons ausschalten
- Google Fonts ausschalten
- WooCommerce Widgets ausschalten
- etc.
Manche Funktionen liefert auch WP Rocket, manche sind nur in Perfmatters enthalten.
Asset CleanUP Pro (kostenpflichtig): Das Plugin gibt es auch in einer kostenlosen Ausgabe, die verfügt allerdings über nicht so viele Features.
Mit Asset CleanUP lassen sich noch verfeinerte Einstellungen vornehmen, was das konditionale Laden von CSS- und JavaScript-Dateien angeht. Perfmatters ist sicherlich einfacher zu bedienen, liefert auf der anderen Seite nicht solche Feineinstellungsmöglichkeiten.
Die wichtigsten Features:
- Verschieben von JavaScript- und CSS-Dateien vom <HEAD>- in den <BODY>-Bereich
- Verschieben von CSS, das im <BODY> geladen wird, um Rendering-blockierende Ressourcen zu reduzieren
- Verwalten von geladenen CSS- und JavaScript-Dateien auf Homepage, Beiträgen, Seiten und benutzerdefinierten Beitragstypen (z. B. WooCommerce-Produktseiten, etc.)
- Bulk-Unloads: Überall (Site-weit), auf bestimmten Seiten und Beitragstypen, Hinzufügen von Load-Ausnahmen
- Verbleibende geladene CSS- und JavaScript-Dateien minimieren (mit der Option, Ausnahmen hinzuzufügen)
- Entfernen von nicht verwendeten Elementen aus dem <HEAD>- und <BODY>-Bereich
- etc.
Mit den Funktionen von Asset CleanUP Pro muss man vorsichtig umgehen. Die einen oder andere Einstellung kann sich nachteilig auf das Layout und Website-Funktionen auswirken.
Fazit
Die Theme-Umstellung meines Blogs auf GeneratePress war schon sehr zeitaufwändig, hat sich aber gelohnt. Auch das Deaktivieren von so manchem Plugin und der Umstieg auf andere haben die Performance ebenfalls verbessert.
Was noch verbessert werden muss: Ich will auf ein besseres Webspace-Paket beim Hoster umsteigen, wahrscheinlich noch ein paar Plugins ausmisten und einen kostenpflichtigen Account bei Imagify buchen, damit alle Bilder zügig ins WebP-Format umgewandelt werden können.
(Bildquelle Artikelanfang: © qimono /Pixabay.com)