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:

• webpagetest.org
• PageSpeed Insights (von Google)

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.

• HTTPS-Unterstützung (viele Anbieter bieten das kostenfreie SSL-Zertifikat von Let’s Encrypt an)
• HTTP/2, am besten mit Server Push
• PHP-Version 7.3 oder höher
• MySQL-Version 5.6 oder höher ODER MariaDB-Version 10.1 oder höher.
• Gzip oder brotli Komprimierung
• Hohe Uptime (jeder Systemausfall verärgert deine Besucher)
• 24/7 Support
• Zugriff auf FTP und Datenbanken

Häufige Fragen

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

• die Seite häufig langsam lädt oder gar ausfällt
• Nutzer verärgert werden und zur Konkurrenzseite wechseln
• deine Umsätze stagnieren oder gar sinken

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

• Raidboxes (deutscher Anbieter)
• Kinsta
• WP Engine

Deutsche Anbieter für den schmaleren Geldbeutel

• ALL-INKL
• webgo
• Mittwald

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:

• Medien, wie Fotos, Grafiken und Videos
• CSS und JavaScript-Dateien
• Fonts (Schriften)
• HTML-Dokument

Draus ergeben sich folgende Hebel zur Seitenoptimierung:

• Dateigröße von Quelltext, Fotos, CSS und JS reduzieren
• Lade- und Ausführungszeitpunkt benötigter Ressourcen steuern.

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.

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

• tinypng.com
• compressjpeg.com

WordPress Plugins zur Bildkomprimierung

• Compress JPEG & PNG Images
• EWWW Image Optimizer
• WP Smush
• Optimus

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.

• Ist der Viewpoort größer 500px und kleiner 1533px, dann lade ‚medium‘.
• Ist der Viewpoort größer 1533px und kleiner 2065px, dann lade ‚large‘.
• Ist der Viewpoort größer 2065px und kleiner 3840px, dann lade ‚extra-large‘.

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:

• Premium Theme XYZ bietet 10 verschiedene Styles für die Menüleiste
• Der Nutzer will Stil 2 verwenden und aktiviert diesen in den Theme-Einstellungen
• Das CSS des Themes beinhaltet jedoch alle Menü-Styles in einer Datei, sodass am Ende alle 10 Menü-Style geladen werden
• Bei vielen Einstellungsmöglichkeiten kann es gut und gerne dazu kommen, dass mehrere 100 KB unbenutztes CSS und JS die Downloadgröße der Seite unnötig erhöhen
• Als Nutzer können wir nichts dagegen tun außer die Software zu wechseln

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:

• http://webseite.de zu http://www.webseite.de
• HTTP zu HTTPS

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

• Maximal 2 -3 externe Schriftarten
• Weniger Tracking Services (bzw. Google Tag Manager bei vielen Trackern nutzen)
• LazyLoad für iframes und eigene Medien, wie Fotos

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

• Ist intuitiv bedienbar
• Erzielt solide Ladezeitenreduziereungen
• Hat eine öffentliche Roadmap in einem Trello Board

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

• Hat viele Einstellungsmöglichkeiten für Fortgeschrittene Anwender
• Konnte CSS und JS bisher ohne Probleme combinen
• Kann JavaScript im Footer laden

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.

• Deutliche Reduzierung der Seitengröße
• Minifizierung und combining von CSS und JS klappte problemlos
• Die Menge an Einstellungsmöglichkeiten hat mich zu Beginn überfordert

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

• Page Builder löschen und Gutenberg-Editor nutzen, ggf. um ausgewählte Blöcke erweitern.
• Slider Plugins löschen und statische Hero Sections mit dem HTML Block und eigenem CSS erstellen, alternativ Cover Block nutzen.

Optimiere deine Inhalte

• Verzichte auf Slider, damit die Ladezeit geringe bleibt anstatt riesige Fotos zu laden und zahlreiche Animationen auszuführen.
• Vermeide Content-Animationen auf mobilen Geräten, um ein ablenkungsfreies Nutzererlebnis zu bieten.

Wähle ein schlankes Theme

• Selber programmieren ist vermutlich das Beste für die Ladezeit.
• Alternativ ist der Umstieg von einem 100+ Funktionen Mehrzweck-Theme zu einem minimalistischen Theme denkbar. Elmastudio, dessign.net oder vllt Studiopress

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?