Zum Inhalt springen Zur Fußzeile springen

webfluence hat 5 von 5 Sternen bei 11 Bewertungen auf Google My Business.

Kostenfreier Erstkontakt

Telefon 0345 52485943

Mail-Adresse r.rosanke@webfluence.de

0345 52485943 r.rosanke@webfluence.de

WordPress Ladezeit optimieren

Wie du die Ladezeit deiner WordPress Webseite misst und mit nachhaltigen Optimierungstechniken reduzierst

„Eine langsame WordPress Webseite kann zahlreiche Ursachen haben.

Überladene Plugins, fehlendes Caching oder ein leistungsschwaches Hosting sind einige dieser Möglichkeiten.

In diesem Beitrag gehen wir die größten Hebel zur WordPress Ladezeiten Optimierung durch.“

Robert Rosanke,
Webdesigner

Inhaltsverzeichnis

  1. Ablauf der Ladezeitenreduzierung
  2. Tools zum Ladezeiten messen
  3. WordPress beschleunigen: Maßnahmen zur Ladezeitenoptimierung
  4. WordPress Plugins für eine bessere Ladezeit
  5. 4 Ideen, wenn deine Seite immer noch langsam ist

Ablauf der Ladezeitenreduzierung

Es führen bekanntlich viele Wege nach Rom.

Teilweise ist das auch bei der Ladezeitenoptimierung im Web der Fall, sodass eine Optimierungsmaßnahme bei Projekt 1 Top-Ergebnisse produziert und bei Projekt 2 kaum spürbare Verbesserung bringt.

Deshalb empfehle ich folgenden Workflow zur Speed-Optimierung:

  1. Ladezeit messen
  2. Eine Optimierungsmaßnahme durchführen
  3. Ladezeit erneut messen

Nur wenn die Maßnahme wirklich einen positiven Einfluss auf die gemessene Ladezeit oder den gefühlten Seitenaufbau hatte, dann bleibt sie drin.

Wenn eine Maßnahme die Seite nicht schneller macht, dann fliegt sie wieder raus.

Tools zum Ladezeiten messen

Zum Messen der Ladezeit gibt es zahlreiche kostenfreie und kostenpflichtige Tools.

Ich nutze hauptsächlich folgende Gratis-Tools:

Auf webpagetest.org messe ich die Kernmetriken der Webseite, spricht Ladezeit, Seitengröße, Requests etc.

Das PageSpeed Insights Tool nutze ich zwischendurch, um mir weitere Anregungen für Verbesserungen zu holen.

Wichtig zu erwähnen ist, dass PageSpeed Insights das Thema ziemlich technisch betrachtet und nicht alle vorgeschlagenen Maßnahmen (mit durchschnittlichen finanziellen und zeitlichen Mitteln) überhaupt umsetzbar sind.

Es geht hierbei wirklich nur um Tipps, niemand muss sich von den durchaus sportlichen Einstufungen verrückt machen lassen.

WordPress beschleunigen: Maßnahmen zur Ladezeitenoptimierung

  1. WordPress Hosting
  2. Downloadgröße der Seite reduzieren
  3. Seitenaufbau beschleunigen

1. Nutze ein leistungsstarkes WordPress Hosting

Ein leistungsstarkes Hosting ist die Grundlage einer schnellen Webseite.

Deshalb schauen wir uns jetzt einmal an, worauf es beim Webseiten-Hosting ankommt.

Häufige Fragen

Über SSL will ich an dieser Stelle keine langen Worte verlieren.

Unabhängig von rechtlichen Verpflichtungen, die mit der DSGVO 2018 auf Webseitenbetreiber zurollten, ist das SSL Zertifikat ein Vertrauenszeichen, das Webseitenbesucher schätzen.

Von daher empfehle ich es auf jeder Webseite einzusetzen.

  • HTTP/2 betrifft die Art und Weise, wie der Webserver mit dem Client (Browser) kommuniziert und ist technisch gesehen der aktuelle Standard.
  • Nicht jeder Hosting-Anbieter nutzt HTTP/2 per default.
  • Besonders jahrelange Stammkunden werden selten automatisch auf die neueste Technik umgestellt (das gilt auch für PHP-Versionen etc.).

Die Wirkung der „Aktivierung“ von HTTP/2 ist bei kleineren Webseiten erfahrungsgemäß nur moderat bis kaum spürbar. Da die Einrichtung einfach ist, nehme ich die wenigen Prozente trotzdem gerne mit.

Wenn du nicht weißt, ob deine Seite bereits HTTP/2 verwendet

Prüfe mit dem HTTP/2 Test auf keyCDN, ob deine Seite den neuen Standard bereits nutzt.

Falls ja, dann kannst du direkt zum nächsten Punkt springen.

Wenn du HTTP/2 auf deiner Webseite nutzen willst:

  1. Lies im FAQ deines Anbieters nach, ob es bereits eine Einstellung im Hosting-Backend für den Umstieg auf HTTP/2 gibt. Wenn dem so ist, dann aktiviere die Einstellung.
  2. Alternativ schreibst du dem Anbieter eine Mail und fragst an, ob ein Umstieg auf HTTP/2 möglich ist und wie das Ganze ablaufen würde. Der Rest ergibt sich bei einem kompetenten Support von selbst.

Die Umstellung auf HTTP/2 wird in der Regel nachts durchgeführt, sodass du lediglich am nächsten Morgen kontrollieren solltest, ob alles wie geplant funktioniert.

Um mehr aus HTTP/2 herauszuholen ist das Thema „Server Push“ für viele Webseiten mit Sicherheit interessant.

Denn anstatt den Browser den <head> Schritt für Schritt nach verlinkten CSS und JS-Dateien suchen zu lassen, werden die Dateien dank Server Push beim Seitenaufruf direkt an den Client gesendet.

Doch besonders bei WordPress Webseiten mit Minify-Plugins, die die file URL nach jedem Update ändern, ist diese Optimierungsmaßnahme eher schwierig umzusetzen.

Mein Ansatz

  1. Dateien feststellen, die am wichtigsten für den Seitenaufbau sind (z.B. Logo, CSS der Menüleiste und Cookie Banner JS + CSS)
  2. Festgelegte Dateien vom Caching-Plugin ausschließen
  3. Falls die CSS und JS Dateien nicht minifiziert sind, dann Dateien minifizieren und im Child-Theme ablegen
  4. Links zu den festgelegten Fotos und Dateien merken und mit dieser Anleitung zum Server Push freigeben

Nginx wurde über die letzten Jahre immer beliebter, wie Kinsta in einem Blogbeitrag aufzeigt.

Wahrscheinlich auch, weil Nginx immer häufiger bei spezialisierten Anbietern für Performance-optimiertes WordPress Hosting zum Einsatz kommt.

Apache wiederum wird häufig bei günstigen Hosting-Tarifen verwendet.

Alleine durch den Preisunterschied lässt sich an dieser Stelle jedoch nicht sagen, dass Nginx besser sein muss als Apache.

Dann selbst die Tatsache, dass Nginx ein Leichtgewicht ist und prinzipiell schneller funktionieren kann bringt einer Webseite nichts, wenn sie die Grenzen von Apache nicht erreicht.

Besonders bei kleinen Hobbyseiten ist ein High Performance Hosting nicht immer nötig, wohingegen es bei kommerziellen Projekten in der Regel durchaus sinnvoll sein kann und sich langfristig mit Sicherheit auszahlen wird.

Geld sparen oder mehr Umsatz machen?

Vergiss nicht deinen potentiellen Zugewinn an Besuchern, Google Rankings und Umsätzen mit in die Bewertung eines Hosting-Tarifs mit einzubeziehen.

Viele Seitenbetreiber, darunter auch Selbständige und Unternehmen, die einen wichtigen Anteil ihrer Einkünfte der eigenen Online Präsenz zu verdanken haben, sparen besonders gerne am Hosting.

Im schlimmsten Fall bedeutet ein schlechtes Hosting, dass

Hinterfrage an dieser Stelle kritisch, ob es sich wirklich lohnt 10 Euro monatlich beim Hosting zu sparen oder ob die Chance auf Neukunden und Wachstum des Projekts vielleicht doch überwiegen.

Bei mir als Webdesigner würde sich selbst ein Preis von 100 Euro pro Monat rentieren, wenn meine Seite dadurch 0,2 Sekunden schneller lädt und ich ein Webprojekt pro Jahr mehr umsetze.

Einige Premium-Anbieter

Deutsche Anbieter für den schmaleren Geldbeutel

2. Downloadgröße der Seite reduzieren

Wenn eine Webseite aufgerufen wird, dann müssen zuerst die Bestandteile der jeweiligen Webseite heruntergeladen werden.

Die Bestandteile einer modernen Webseite sind:

Draus ergeben sich folgende Hebel zur Seitenoptimierung:

Wir beschäftigen uns in diesem Abschnitt ausschließlich mit der Reduzierung der Dateigröße, weil diese oftmals schon bei moderatem Aufwand spürbare Ergebnisse bringt.

CSS, HTML & JS minifizieren

Der meiste Webseitencode wird während der Entwicklung der Webseite mit dem Anspruch der guten Lesbarkeit geschrieben.

Denn Absätze und Kommata erleichtern Enwicklern das Lesen und Verstehen des Codes, falls in Zukunft etwas abgeändert werden soll.

So sieht ein typischer CSS-Schnipsel bei mir aus:

// home page hero section
.home h1 {
  color: #fff;
  font-size: 3rem;
}

.home wf_hero_sub_heading {
  color: #ededed;
  font-size: 1.9rem;
}

Nach der Minifizierung sind nicht notwendige Kommata, Kommentare und Leerzeilen aus dem Code entfernt, sodass weniger Daten per Internet übertragen werden müssen und die Seite schneller lädt.

Code nach der Minifizierung:

.home h1{color:#fff;font-size:3rem}.home wf_hero_sub_heading{color:#ededed;font-size:1.9rem}

Ich denke das Prinzip ist klar.

Zur automatisierten Minifizierung auf WordPress Webseiten empfehle ich dir im Plugin-Verzeichnis nach Minify zu suchen.

Die meisten Caching-Plugins beinhalten ebenfalls Minifizierungsfunktionen.

Falls dein Caching-Plugin solch eine Funktion besitzt, dann aktiviere sie lieber dort und spare dir ein separates Minify-Plugin.

Prüfe die Funktionsfähigkeit deiner Webseite nach der Minifizierung unbedingt in einem Inkognito-Fenster, um die Webseite wie ein Erstebsucher zu erleben.

Fotos optimieren

Bilder, Fotos und Grafiken machen einen Hauptteil der Seitengröße aus. Bei nicht oder nur schlecht optimierten Seiten machen Fotos meist mehrere MB an Downloadgröße aus.

Dementsprechend kann mit der richtigen Optimierung der Fotos tonnenweise Seitengröße und damit massig wertvolle Ladezeit gespart werden.

Vorbereitung: Fotos sinnvoll skalieren

Die tatsächliche Größe eines Fotos ist ausschlaggebend für die spätere Dateigröße.

Soll heißen: Wenn ich auf der Kontaktseite ein Foto von mir nutzen will, dass über die halbe Inhaltsbreite geht, dann lade ich das Foto bestenfalls in halber Seitengröße in die Mediathek rein.

Die Rechnung dahinter:

Prozentuale Breite des Fotos x Inhaltsbreite = Optimale Bildgröße

0.5 x 800 = 400

Das Bild sollte 400px Breit sein, um möglichst wenig Bandbreite zu verschwenden.

Tipp: Skaliere auch dein Logo auf die kleinstmögliche Größe. Bei einer klassischen Navigationsleiste bietet sich als Maßstab zur Skalierung folgende Rechnung an:

Höhe der Navigationsleiste – Innenabstand (oben und unten) vom Logo zur Navigationsleiste = Höhe des Logos

Fotos komprimieren

Um die Dateigröße des vorbereiteten Fotos nun optimal zu reduzieren, wird das Foto komprimiert.

Mit der Komprimierung geht in gewissem Maße eine Qualitätsminderung einher. Da diese beim Einsatz im Web kaum auffällt, nehme ich sie gerne ich kauf.

Je nach WordPress Setup und Workflow kann die Komprimierung automatisiert oder auch manuell durchgeführt werden.

Webseiten zur manuellen Komprimierung

WordPress Plugins zur Bildkomprimierung

Hero Images mit <img srcset=“ “ /> oder CSS Media Queries gezielt ausliefern

Fotos, die über die gesamte Bildschirmbreite gehen, sind oft ein Hingucker und halten den Besucher bei Laune.

Gleichzeitig machen sie in der Regel einen Großteil der Webseitengröße aus und sollten deshalb optimiert werden.

So gehe ich bei der Optimierung von full width hero images vor.

Szenario 1: Das Foto befindet sich im <img />-Tag

Wenn sich das Foto in einem <img />Tag befindet, dann können wir über das zusätzliche Attribut srcset verschiedene Bilder für selbst definierte Bildschirmgrößen festlegen.

Mit sinnvoll gewählten Breakpoints erhalten Webseitenbesucher somit immer ein Foto, das nah an ihrer tatsächlichen Bildschirmauflösung dran ist und das beste Verhältnis zwischen Qualität und Ladezeitersparnis garantiert.

Erfahrungsgemäß sind 150 bis 250KB Unterschied zwischen einem Fullwidth (1920px Breite) und einem mobilen (bis 700px) drin.

Ein Beispiel-Code

<img sizes = "(max-width: 3840px) 100vw, 3840px"
srcset = "
          /wp-content/uploads/hero/product-small.jpg 500w,
          /wp-content/uploads/hero/product-medium.jpg 1533w,
          /wp-content/uploads/hero/product-large.jpg 2065w,
          /wp-content/uploads/hero/product-extra-large.jpg 3840w"
src = "/wp-content/uploads/hero/product-full.jpg"
alt = "Produkt XYZ kaufen"
">

Code-Erklärung

srcset sagt, dass der Browser bis zur einer Viewport-Breite von 500px das dazugehörige Foto ’small‘ laden soll. Falls der Viewport größer als 500px ist, dann wir die nächste Bedingung geprüft.

Wenn der Bildschrim größer als 3840px ist, dann ist keine der obenstehenden Bedingungen erfüllt, sodass auf das reguläre src-Attribut zurückgegriffen wird und das Foto in voller Auflösung geladen wird.

Bonustipp:

WordPress setzt das srcset-Attribut beim Bild-Block bereits automatisch und verwendet die vom Theme konfigurierten image sizes

Füge also sinnvolle image sizes in die functions.php deiner WordPress Webseite, damit du bei der zukünftigen Verwendung von Fotos die Auslieferung optimierst.

Um das srcset-Attribut in bestehenden Beiträgen zu nutzen, kannst du zudem die Thumbnails wiederherstellen und die Fotos noch einmal manuell in die jeweiligen Beiträge einfügen, damit die neuen Bildgrößen angewendet werden.

Szenario 2: Das Foto wird als CSS-Background genutzt

Um CSS Background Images möglichst passend auszuliefern können wir Media Queries nutzen.

Media Queries werden meist eingesetzt, um das Layout bei bestimmten Bildschirmauflösungen zu optimieren. Doch auch die gezielte Auslieferung von Fotos ist möglich.

Ein Beispiel-Code

.wf_hero_image_container {
    background-image: url(/wp-content/.../hero/product_w_500.jpg)
}

@media (min-width:500px) {
    .wf_hero_image_container {
        background-image: url(/wp-content/.../hero/product_w_753.jpg)
    }
}

@media (min-width:753px) {
    .wf_hero_image_container {
        background-image: url(/wp-content/.../hero/product_w_1300.jpg)
    }
}

@media (min-width:1599px) {
    .wf_hero_image_container {
        background-image: url(/wp-content/.../hero/product_w_1973.jpg)
    }
}

@media (min-width:1973px) {
    .wf_hero_image_container {
        background-image: url(/wp-content/.../hero/product_w_2518.jpg)
    }
}

@media (min-width:2518px) {
    .wf_hero_image_container {
        background-image: url(/wp-content/.../hero/product_w_3000.jpg)
    }
}

Code-Erklärung

Wie auch beim mobile first Design wird zuerst eine Standardquelle für das Foto auf kleinen Bildschirmen festgelegt.

Anschließend werden über die Media Queries weitere Quellen für bestimmte Bildschirmgrößen festgelegt.

SVG anstelle von PNG für Grafiken nutzen

Infografiken und dekorative Icons sind heutzutage auf beinahe jeder Website vorzufinden.

Häufig wird dafür das Format PNG genutzt, weil es sich über die Jahre etabliert und bewährt hat.

Um weitere Ladezeit zu sparen bin ich, zumindest für einfachere und selbsterstellte Grafiken, auf das Format SVG umgestiegen.

Denn SVGs können verlustfrei in beide Richtungen (groß nach klein, klein nach groß) skaliert werden und sind nach der Komprimierung teilweise 20 bis 30% kleiner als das ebenfalls komprimierte PNG Äquivalent.

SVGs im Web verwenden

  1. <img />-Tag
    SVGs können wie Fotos über das <img /> Tag in die Webseite und den bestehenden Workflow integriert werden.
  2. Inline HTML
    SVGs können bei der inline-Verwendung wie auch jedes andere DOM-Element manipuliert werden. Mit Inline SVGs sind somit Interaktionen möglich.

Da SVGs theoretisch Schadcode beinhalten können, muss der SVG-Upload in die Mediathek manuell in der functions.php oder mit einem Plugin wie Safe SVG freigeschaltet werden.

Weitere Infos zum Einsatz von SVGs im Web (engl.)

Auf Modulare Themes und Plugins setzen

Themes und Plugins werden immer dynamischer und bieten teilweise hunderte Einstellungsmöglichkeiten, mit denen bereits gesamte Webseiten ohne jegliche Kenntnisse von HTML, CSS und JS aufgebaut werden können.

Diese Möglichkeiten sind beeindruckend und zugleich ein riesiger Ladezeitenkiller vieler WordPress Webseiten.

Warum ich Multipurpose-Themes und Page Builder mittlerweile meide:

Ausblick in die Zukunft

Wenn wir in Deutschland endlich flächendeckend schnelles Internet erhalten, dann sind Page Builder und Co. vermutlich problemlos nutzbar, weil der Ladezeitenunterschied bei einer Downloadgeschwindigkeit von 100Mbit/Sekunde wahrscheinlich nicht mal mehr auffällt.

Enqeue-Management

Die meisten Themes und Plugins lassen das CSS und JavaScript einfach auf jeder Seite laden.

Als fortgeschrittener Nutzer, der weiß, was auf der eigenen Webseite vor sich geht, und welche Plugins voneinander abhängig sind, versuche ich diesen Zustand jedoch zu vermeiden.

  1. Dazu prüfe ich im Quelltext meiner Webseite, welche CSS und JS Dateien eingebunden werden und mache mir eine Excel Tabelle mit dem Grund der Einbindung
    (z.B. gehört zum Theme, Kontaktformular, Sharing Plugin, etc.)
  2. Dateien festlegen, die nur geladen werden sollen, wenn der dazugehörige Shortcode auf der Seite verwendet wird
    (z.B. /contactform.js benötigt [contactform id=“797“])
  3. Suche ich unter Design -> Theme Editor und Plugins -> Plugin-Editor nach den dazugehörigen $handler-Bezeichnungen der JS-Dateien. Die $handler der CSS-Dateien entnehme ich der stylesheet-id im Quelltext
    (z.B.: stylesheet id=“contactform-css“ hat den $handler „contactform“ (das ‚-css‘ hängt WordPress automatisch an)
  4. Anschließend werden die festgelegten Bedingungen in der functions.php definiert
    • Bei Shortcode Abhängigkeiten
    • Bei CSS-Klassen Abhängigkeiten
    • Bei page-id Abhängigkeiten
function wf_contactform_enqueue_management() {

  if( is_singular() ) {
        global $post;
    	$post = get_post();

    if( !has_shortcode($post->post_content, 'contactform') ) {
      //wenn der shortcode 'contactform' nicht im content ist
      wp_dequeue_script( 'contactform' );
      wp_dequeue_style( 'contactform' );
    }

    if ( false !== strpos( get_queried_object()->post_content, '<button class="wf_accordeon' ) ) {
      //wenn das akkordion im content ist
      wp_enqueue_script('wf_accordeon_js');
    }

    if (  is_front_page() || is_page(4065)  ) {
      //wenn startseite oder id der landing page
      wp_enqueue_style('wf_home_hero');
    }

  }

}

add_action( 'wp_enqueue_scripts', 'wf_contactform_enqueue_management', 99 );

Tipp: Viele Themes und Plugins laden Font Awesome in die Webseite und nutzen dafür verschiedene $handler. Das Ergebnis ist, dass Font Awesome in der Regel mehrmals in die Seite eingebunden und somit auch vom Nutzer heruntergeladen wird. Ein einfacher Optimierungsschritt ist es also dafür zu sorgen, dass die Icon Bibliothek nur einmal geladen wird.

Wichtig: Beim Filtern nach CSS-Klassen und Shortcodes muss der Content in der Datenbank sein. Inhalte, die mit dem the_content-Filter (engl.) zu einem Beitrag hinzugefügt werden, werden bei den oben gezeigten Code Beispielen nicht berücksichtigt.

Seitenaufbau beschleunigen

Weiterleitungsketten in .htaccess reduzieren

URL Weiterleitungen sind wichtig, damit Nutzer nach dem Umzug einer Domain, der Löschung einer Unterseite oder bei Tippfehlern in der Adressleiste trotzdem ans Ziel gelangen.

Typische Weiterleitungen sind:

Anstatt von http://webseite.de auf http://www.webseite.de/ und dann per globaler Regel von HTTP zu HTTPs weiterzuleiten bietet es sich an direkt von http://webseite.de/ nach https://www.webseite.de/ weiterzuleiten.

Caching Plugin verwenden

Um den Seitenaufbau selber zu beschleunigen, nutze ich gerne Caching-Plugins.

Wobei die meisten aufgrund der Funktionsvielfalt mittlerweile eher Performance als reine Caching Plugins sind.

Zurück zum Thema.

Mit einem Caching Plugin wird der Seitenaufruf simuliert, um den Quelltext der Seite zu erhalten und in einem separaten Dokument zu speichern.

Der große Vorteil, wenn wir dem Nutzer die gecashte Version anbieten, ist dass dieser direkt die fertige Seite erhält anstatt auf die ohne Caching im Hintergrund ablaufenden Prozesse zur Zusammenstellung der Seite zu warten.

Anstatt die Seite also Schritt für Schritt zusammenzustellen ist diese schon bereit.

Zusätzlich dazu setzen meine Lieblings Performance Plugins WP Rocket und Borlabs Cache Ablaufdaten für die verschiedensten Dateiformate in der .htaccess.

Dadurch werden bereits geladene Dateien bei einem erneuten Seitenaufruf nicht noch einmal heruntergeladen, was besonders wiederkehrenden Nutzern hilft.

LazyLoad nutzen

LazyLoad ist besonders bei visuellen Webseiten der Gamechanger, weil Fotos, iFrames etc. erst geladen werden, wenn sie im Sichtbereich des Nutzers sind.

Die am Ende der Seite platzierten Vorschaubilder für relevante Beiträge in Online Magazinen würden also erst geladen, wenn der Nutzer am Ende des Artikels angekommen ist.

Dadurch können wir unseren Nutzern tonnenweise Requests und Downloadgröße beim Seitenaufbau ersparen.

Neuigkeit vom 06.08.2019
Google Chrome wagt einen Vorstoß und experimentiert mit einem nativen Browser-Support für das verzögerte Laden von Fotos und iFrames.
Weitere Infos zum nativen LazyLoad-Feature auf web.dev

Requests reduzieren

Fotos, CSS- und JS-Dateien, externe Schriften, Tracking, eingebettete Videos und Maps sind nur einige Beispiele von Verbindungen, die beim Webseitenaufruf hergestellt werden müssen.

Für mich (als nicht Servertechniker) klingt es sinnvoll kaum genutzte Dienste von der eigenen Webseite zu verbannen, um auch die Wartezeit zu reduzieren, die mit jedem Request einhergeht.

Meine Vorschläge für weniger Requests beim Seitenaufbau

WordPress Plugins für eine bessere Ladezeit

  1. WP Rocket (Premium)
  2. Borlabs Cache (kostenlos und Premium)
  3. W3 Total Cache (kostenlos)
  4. Cache Enabler (kostenlos)

Einige der oben genannten Premium WordPress Hoster nutzen intern bereits intelligente Caching-Systeme, sodass kein externes Caching Plugin benötigt wird.

WP Rocket

WP Rocket ist derzeit mein liebstes Performance Plugin für WordPress.

Denn WP Rocket

Was mir an WP Rocket jedoch fehlt und meiner Meinung nach schleunigst kommen sollte, ist eine Funktion zum HTTP/2 Server Push.

Hierbei sollten jedoch nicht einfach alle Dateien wahllos gepusht werden, sondern lediglich vom Nutzer ausgewählte.

Denkbar wären beispielsweise mein Webseitenlogo, die CSS Datei der Navigationsleiste und das JavaScript zur Erkennung der Bildschrimbreite für die alignfull-Klasse des Gutenberg-Editors.

Borlabs Cache

Borlabs Cache habe ich letztens auf einer kleineren Kundenseite verwendet, um herauszufinden, wie das Plugin mit weniger erfahrenen Nutzern funktioniert.

Borlabs Cache

Borlabs Cache ist ein sehr interessantes Plugin, wenn es um wirklich langsame Webseiten geht.

Doch weniger erfahrene Anwender können schnell mit der Fülle an Einstellungsmöglichkeiten überfordert sein.

Ebenso stört mich die Preload-Begrenzung wahnsinnig stark.

Ich denke, dass Borlabs Cache technisch gesehen das Zeug dazu hat WP Rocket den Rang abzulaufen.

Da die Bedienoberfläche jedoch alles andere intuitiv ist und die Preload-Begrenzung vor allem bei größeren Seiten schnell ein Hindernis darstellt, hat WP Rocket zumindest für mich (noch) die Nase vorn.

W3 Total Cache

W3 Total Cache ist eines der beliebtesten Caching Plugins im WordPress Kosmos.

Bei über einer Million aktiver Installationen musste ich dieses Plugin der Vollständigkeit halber in diese Liste aufnehmen.

Meine eigenen Erfahrungen mit W3 Total Cache sind durchwachsen.

Cache Enabler

Ein ebenfalls kostenloses Caching-Plugin für WordPress ist der Cache Enabler.

Das Besondere an diesem Plugin ist die WebP-kompatibilität.

Auf der Plugin-Seite steht dazu folgendes:

Cache Enabler is the first WP plugin to allow you to serve WebP images without JavaScript and also fully supports srcset since WP 4.4. WebP is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs.

https://wordpress.org/plugins/cache-enabler/

4 Ideen, wenn deine Seite immer noch langsam ist

Wenn die Ladezeit deiner WordPress Webseite auch nach der Aktivierung von Caching, LazyLoad und selbst bei einem guten Hoster noch über 3 Sekunden lädt, dann habe ich hier 4 letzte Ideen für dich.

Ersetze ressourcenfressende Plugins

Optimiere deine Inhalte

Wähle ein schlankes Theme

Case Study: WordPress Theme entwickeln und Ladezeit reduzieren

Wie ich den Speed Index meiner WordPress Webseite mit einem individuellem Theme um über 50% reduzierte.

AMP by Google

Wenn du wirklich alle Tipps des Tutorials angewendet hast, dann sollte dieser Schritt keinesfalls nötig sein.

Dennoch ein kleiner Tipp für alle, die nicht alles umsetzen dürfen, können oder wollen:

Es gibt ein AMP Plugin für WordPress. AMP ist eine Speed-optimierte HTML Version von Google.

Hier muss jeder für sich selber entscheiden, inwiefern es vertretbar und ziel-dienlich ist eine Webseite aufzubauen, die so langsam ist, dass nur noch Googles neueste Technik die Seite benutzbar macht…

Einige Einblicke in die Funktionsweise von AMP inklusive interessanter Kommentare gibt es auf KrautPress. Zum Artikel: Ist AMP die Zukunft?