3 WordPress-Plugins, die Ladezeiten verbessern

Ich möchte 3 Plugins vorstellen, die wir bei (fast) jedem WordPress-Projekt installieren. Diese Plugins optimieren unterschiedliche Bereiche, generell haben sie eines gemeinsam: Sie verbessern die Ladezeiten.

Wieso sollte mich das interessieren?

Kurz gesagt: ⚡ Schnellere Ladzeiten ⇶ 🤩 bessere User–Experience ⇶ đź’¸ mehr Umsatz.

Es gibt zahlreiche Case Studies dazu, wie die Verbesserung von Ladzeiten sich positiv auf die Benutzererfahrung, Conversion-Rate, Verweildauer, Bounce-Rate usw. auswirkt. (Natürlich hängen diese Metriken zusammen.)

Am Ende geht es um den Zweck der Website:
Ein Online-Shop macht mehr Umsatz, ein Blog wird mehr gelesen, eine Landing-Page generiert mehr Newsletter-Anmeldungen etc.

Du kannst leicht deine aktuelle Performance mit Google’s PageSpeed Insights ĂĽberprĂĽfen. Und welchen Einfluss Verbesserungen haben können, berechnet unser Impact Rechner.

Plugins

Die Plugins, die ich empfehle, verbessern drei unterschiedliche Bereiche:

Disclaimer: Du solltest jede Änderung an deiner WordPress Website zuerst auf einer Test-Installation durchführen und – wie der Name schon sagt – testen. Funktioniert alles wie gewollt, dann kann man diese Änderungen auf die Live-Seite durchführen. Das schützt vor bösen Überraschungen.

Performance Plugin Comet Cache

1. Comet Cache

Dieses Plugin ist einfach zu verstehen, wenn man ein Konzept versteht:
Was passiert eigentlich, sobald man eine Internet-Adresse in den Browser eingibt und <Enter> drĂĽckt?

  1. Der Browser schickt erstmal eine Nachricht an den Web-Server auf dem die Website liegt.
  2. Dann antwortet dieser Web-Server mit einer Text-Nachricht in Form von HTML-Code.
  3. Der Browser versteht und interpretiert diesen Code. Er lädt weitere, für die Darstellung notwendige Ressourcen.
  4. Am Ende zeichnet der Browser die Website auf den Bildschirm und „macht sie lebendig“, dh. man kann damit interagieren: klicken, tippen, swipen, scrollen usw.

1.1. Wie es hilft

Comet Cache verringert die Zeit zwischen der Eingabe der Internet-Adresse und der Antwort des Web-Servers indem es den HTML-Code nicht für jeden Besucher neu erzeugt, sondern zwischenspeichert. Jeder Besucher bekommt quasi „dieselbe“ Seite vor die Nase gesetzt.
Ausnahmen sind Seiten, die für jeden Besucher anders sein müssen, wie beispielsweise der „Warenkorb“, personalisierte Seiten (für eingeloggte User) u.ä.

Disclaimer: Das Plugin scheint zum Zeitpunkt des Schreibens des Artikels länger keine Updates erhalten zu haben. Wir nutzen es noch immer und hatten bis jetzt keine Schwierigkeiten.

1.2. Installation

Methode 1:
Das Plugin direkt im Dashboard installieren: Plugins ≫ Installieren ≫ nach „Comet Cache“ suchen. Nach der Installation das Plugin „Aktivieren“.

Methode 2:
Das Plugin herunterladen, anschlieĂźend die ZIP-Datei im Dashboard hochladen: Plugins ≫ Installieren ≫ Button „Plugin hochladen“. Nach der Installation das Plugin „Aktivieren“.

WordPress.org-Plugin-Seite: Comet Cache by WP Sharks

1.3. Konfiguration

Wir verwenden das Plugin beinahe unverändert in der Standard-Konfiguration.

Es gibt jedoch eine Besonderheit: Nachdem das Plugin im Dashboard aktviert wurde, muss es nochmals ĂĽber die Plugin-Einstellungen aktiviert werden:

Comet Cache aktivieren
Dashboard: Comet Cache ≫ „Einschalten/Auschalten“ ≫ „Ja, Comet Cache aktivieren“

Achtung: Nicht vergestern die Einstellung zu speichern!

1.4. Pro Tipp

Falls bei den Performance-Tests der Hinweis „Textkomprimierung aktivieren“ kommt, kann man das hier im Plugin aktivieren.

Voraussetzung auf der Server nutzt Apache. Unter der Option „Apache-Optimierungen“ kann GZIP aktiviert werden. Falls dein Hosting-Dienstleister das nicht bereits hat – heutzutage wĂĽrde ich das als Standard bezeichnen – ist eine aktive GZIP-Komprimierung sehr zu empfehlen.

Wir konfigurieren GZIP meist ĂĽber die .htaccess Datei, genau wie es in diesem Plugin-Bereich beschrieben ist.

Performance Plugin Fast Velocity Minify

2. Fast Velocity Minify

2.1. Wie es hilft / Was es tut

Willkommen bei WordPress. Dies ist dein erster Beitrag. Bearbeite oder lösche ihn und beginne mit dem Schreiben!

2.2. Installation

Methode 1:
Das Plugin direkt im Dashboard installieren: Plugins ≫ Installieren ≫ nach „FVM“ suchen. Nach der Installation das Plugin „Aktivieren“.

Methode 2:
Das Plugin herunterladen, anschlieĂźend die ZIP-Datei im Dashboard hochladen: Plugins ≫ Installieren ≫ Button „Plugin hochladen“. Nach der Installation das Plugin „Aktivieren“.

WordPress.org-Plugin-Seite: Fast Velocity Minify by Raul Peixoto

2.3. Konfiguration (wie wir sie hier nutzen)

Am Besten ich beschreibe wie wir das Plugin Schritt für Schritt für unsere Website konfiguriert haben. Jede Website hat etwas andere Anforderungen und das Plugin muss dementsprechend anders konfiguriert werden. Dh. unsere Konfiguration ist womöglich nicht die Beste für eine andere WordPress-Seite. Wir verwenden beispielsweise keine Google Fonts, aber dazu gleich …

Achtung: Wenn du dir nicht sicher bist, teste Ă„nderungen vorher auf einem anderen System und/oder bitte einen Profi um UnterstĂĽtzung.

Grundkonfiguration
FVM Konfiguration - Teil 1 - Funktionalität

Ich aktiviere gerne den „FVM Purge“-Button in der Admin-Leiste. Ebenso wollen wir, dass Einstellungen gespeichert bleiben, falls das Plugin mal deaktiviert wird.

URL Optionen
FVM Konfiguration - Teil 2 - URL Optionen

Wir verwenden SSL, somit setzen wir die Option „SSL erzwingen“.

HTML Optionen
FVM Konfiguration - Teil 3 - HTML Optionen

FĂĽr unseren Fall, wollen wir dass HTML-Code nicht minimiert wird, weil wir eine kleine, nerdige Ăśberraschung in Form von ASCII-Art hinterlassen haben.

Font Optionen
FVM Konfiguration - Teil 4 - Font Optionen

Wir verwenden keine Google Fonts, sondern eigene Fonts, somit lassen wir das Plugin Google Fonts entfernen.

Google Font Optionen
FVM Konfiguration - Teil 5 - Google Font Optionen

Diese Option macht fĂĽr unsere Website keinen Unterschied; wie gesagt wir nutzen keine Google Fonts. Sonst empfehle ich die Standard-Einstellung wie im Bild zu behalten.

Font Awesome
FVM Konfiguration - Teil 6 - Font Awesome

Auch nutzen wir auf unserer Seite kein Font Awesome, sondern SVG-Icons. Andernfalls empfehle ich ebenso die Standard-Einstellung zu behalten.

CSS Optionen
FVM Konfiguration - Teil 7 - CSS Optionen

Diese Einstellung ist bei uns stark zugeschnitten:

  • Wir haben das Minifizieren deaktiviert, da alle CSS-Dateien schon minifiziert hochgeladen werden
  • Ebenso wollen wir das Styles fĂĽrs Drucken („Print-Styles“) geladen werden
  • Und kein CSS soll in den HTML-Code inline eingefĂĽgt werden
JavaScript Optionen
FVM Konfiguration - Teil 8 - JavaScript Optionen

Hier habe ich keine Ă„nderungen gemacht, wir wollen, dass JavaScript von dem Plugin normal verarbeitet wird.

Render-blocking JS
FVM Konfiguration - Teil 9 - Render-blocking JS Optionen

Hier nutzen wir die „defer JS files globally“-Option. Dh. alle vom Plugin verarbeiteten JavaScript-Dateien erhalten das HTML-Attribut: rel="defer". Vereinfach formuliert: Der Browser bekommt damit die Anweisung das Laden dieser JS-Dateien nach hinten zu verschieben, bis andere Komponenten geladen sind.

Performance Plugin Lazy Load

3. Lazy Load

3.1. Wie es hilft / Was es tut

Dieses Plugin ist super praktisch, es lädt Bilder (+ YouTube iFrames) erst dann, wenn diese für die Darstellung der Seite gebraucht werden, sprich wenn die Bilder für den Besucher sichtbar werden. Normalerweise lädt der Browser alle Bilder bevor die Webseite dargestellt wird, das kann Ladzeiten stark verzögern.

Allerdings wird das Plugin mMn. in absehbarer Zeit nicht mehr notwendig sein:

  1. Internet-Browser werden diese Funktion von selbst/„nativ“ übernehmen. ~70% aller weltweit genutzten Browser tun das bereits (Stand: 10.11.2020)
  2. Seit WordPress 5.5 ist die notwendige Einstellung für „natives Lazy Loading“ integriert

Mein Tipp: in 12 Monaten wird dieses Plugin nur seinen Zweck erfüllen, falls man Browser mit geringen Nutzungszahlen unterstützen möchte.

3.2. Installation

Methode 1:
Das Plugin direkt im Dashboard installieren: Plugins ≫ Installieren ≫ nach „Lazy Load“ suchen. Nach der Installation das Plugin „Aktivieren“.

Methode 2:
Das Plugin herunterladen, anschlieĂźend die ZIP-Datei im Dashboard hochladen: Plugins ≫ Installieren ≫ Button „Plugin hochladen“. Nach der Installation das Plugin „Aktivieren“.

WordPress.org-Plugin-Seite: Lazy Load by WP Rocket
Alternatives Plugin: Lazy Loading Feature Plugin By The WordPress Team

3.3. Konfiguration

In diesem Fall ist das ganz einfach:

  1. Dashboard: „
  2. Einstellungen ≫ Lazy Load
  3. Häkchen nach Wunsch setzen:
    1. „Bilder“ (legen wir ans Herz) und/oder …
    2. „Iframes & Videos“ und/oder …
    3. „Youtube-Videos mit Vorschaubildern ersetzen“.
  4. Einstellungen speichern

3.4. Pro Tipp:

Die Dateigröße der Bilder sollte vorher optimiert werden, das ist eine der Maßnahmen mit dem größten Potential bzw. dem größten Schaden, falls es falsch gemacht wird.

Fazit

Alle 3 vorgestellten Plugins verwenden wir bei den meisten WordPress-Projekten. Lazy Loading wird in absehbarer Zeit von einem Großteil der Internet-Browser selbst übernommen. Verwendet man WordPress 5.5. (oder höher), wird man das Plugin also bald in den Ruhestand verabschieden können. Kurios in diesem Zusammenhang ist, dass unsere Starseite mit aktivem Lazy Loading sogar einen schlechteren PageSpeed Score erhalten hat.

Vergleich Starseite (mit wenig Bildern)

Startseite vor der Optimierung
Startseite – Plugins deaktiviert: 95 Punkte
Startseite nach der Optimierung
Startseite – Plugins aktiviert: 98 Punkte

Vergleich Blog-Beitrag (mit vielen Bildern)

Blog-Beitrag vor der Optimierung
Beitrag – Plugins deaktiviert: 82 Punkte
Blog-Beitrag nach der Optimierung
Beitrag – Plugins aktiviert: 95 Punkte

Zur Erinnerung: Du solltest jede Änderung an deiner WordPress Website zuerst auf einer Test-Installation durchführen und – wie der Name schon sagt – testen, bevor man es an der Website online macht.

WeiterfĂĽhrende Links zum Thema Ladezeiten:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.