Eine langsame WordPress Seite schreckt Deine Besucher ab.
Mit jeder Sekunde zusätzlicher Ladezeit verringert sich Dein Umsatz um 7 %!
Du musst also Deine WordPress Ladezeit optimieren, wenn Du kein Geld verlieren willst.
Wir zeigen Dir heute, wie Du Deine Website rasend schnell machst!
Übersicht
Lange Ladezeiten zerstören Dein Business
Wenn Du noch ein wenig Motivation brauchst, um Dein WordPress Optimierung endlich in Angriff zu nehmen, bekommst Du hier ein paar gute Argumente:
- Ladezeit ist ein offizieller Ranking-Faktor: 2018 hat Google die Ladezeit zum offiziellen Ranking-Faktor erklärt. Umso schneller Deine Seite, umso besser Deine Rankings.
- Schnellere Webseiten stellen Nutzer zufrieden: Nichts ist frustrierender, als wenn man sich auf tollen Content freut, aber die Ladezeit einfach im Schneckentempo ist. Eine Studie* hat festgestellt, dass mit jeder Sekunde Ladezeit die Seitenaufrufe um 11 % abnehmen. Anstatt weiterzuklicken und mehr von Deinen Inhalten zu konsumieren, verlassen User enttäuscht Dein Projekt. Wahrscheinlich für immer.
- Durch eine kurze Ladezeit verkaufst Du mehr. Auch weil die Sitzungsdauer zunimmt. Entschlossene Käufer kaufen mit jeder Sekunde kürzerer Ladezeit mit einer 7% höheren Wahrscheinlichkeit bei Dir ein. Daneben erhöhst Du die Wahrscheinlichkeit für einen spontanen Kauf, wenn die Nutzer angenehm “bummeln” können.
- Lange Ladezeiten fressen Dein PPC-Budget auf: Sowohl bei Facebook, als auch bei Google Ads, kosten Deine Anzeigen mehr Geld, wenn Deine Webseite langsam lädt.
Hast Du jetzt verstanden, warum Du das Thema nicht mehr länger auf die lange Bank schieben solltest?
Na dann los!
Wir zeigen Dir in diesem Artikel die wichtigsten Stellschrauben, um Deine WordPress Seite zu optimieren. Nach dem 80 / 20-Prinzip fokussieren wir uns auf die Maßnahmen, die mit überschaubarem Aufwand in überschaubarer Zeit die besten Ergebnisse erzielen. Ein Technik-Fuchs wird wahrscheinlich noch mehr Stellschrauben finden, aber eine 100%-Perfektion ist bei der Ladezeitoptimierung nicht wirtschaftlich.
Wie Du Deine Ladezeiten messen und vergleichen kannst
Es gibt kostenlose Tools, mit denen Du Deine Ladezeit messen kannst. Werfen wir einen Blick auf die drei Wichtigsten:
Google Pagespeed Insights
Das wohl Bekannteste ist ein kostenloses Tool von Google. Du erreichst es mit der folgenden URL aufrufen:
https://developers.google.com/speed/pagespeed/insights/?hl=de
Gib einfach die URL der Webseite ein, die Du untersuchen möchtest und Du bekommst einige hilfreiche Einblicke.
Das Tool zeigt Dir zum Überblick einen Score für Deine Ladezeit von 0 – 100 an.
Unserer Meinung nach sollte ein Score von für Desktop-Seiten ein annehmbarer Wert sein. Wie Du sehen kannst, können wir bei Trustfactory.bz noch etwas tun. Allerdings stammt der Screenshot aus der Zeit kurz nach unserem Relaunch und wir haben hier noch nicht perfektioniert.
Das Tool zeigt Dir anhand verschiedener Metriken, wie Deine Webseite geladen wird und welche Verbesserungen Du vornehmen kannst. FCP zeigt Dir zum Beispiel, wie viel Zeit vergeht, bis die ersten Inhalte Deiner Website geladen werden. FID sagt aus, wie schnell Deine Seite reagiert, wenn ein Nutzer mit ihr interagiert (z.B. mit einem Mausklick).
Weiter unten siehst Du einige konkrete Optimierungsvorschläge.
Insgesamt ist Google Pagespeed Insights ein gutes Tool, dass für die meisten Optimierungsmaßnahmen ausreicht.
Das erweiterte Tool von Web.Dev, basiert auf dem Google Tool. Es bereitet die Ergebnisse von Google jedoch etwas detaillierter auf. (Hier geht es zum Tool: https://web.dev/measure/)
Wenn Du beide Tools kombinierst, verpasst Du keine Stellschraube zur Ladezeitoptimierung.
Pingdom Website Speed Test
Dieses Tool ist ebenfalls kostenlos und hat gegenüber dem Google Tool einen kleinen Vorteil.
Du kannst die Ladezeit einzelner Unterseiten aus verschiedenen Regionen testen:
Das ist besonders vorteilhaft, wenn Deine WordPress Website internationale Besucher anspricht und auf der ganzen Welt gut gefunden werden soll.
Zudem erhältst Du eine ganze Reihe an konkreten Vorschlägen.
Außerdem kannst Du genau nachempfinden, welche Website-Elemente, wie schnell geladen werden und welchen Speicherplatz sie aufbrauchen.
Deine Ladezeit sollte bei Pingdom immer unter zwei, besser noch unter einer Sekunde liegen.
GTMetrix
Wenn Du alles noch ein bisschen genauer wissen möchtest, dann wirf mal einen Blick auf GTMetrix .
Der Nachteil hier ist, dass Du in der kostenlosen Version immer von Vancouver, Kanada aus Deine Webseite testest.
Der Report ist allerdings ziemlich detailliert:
Auch das Wasserfall-Diagramm ist noch etwas aufschlussreicher als bei Pingdom:
Allerdings musst Du bedenken, dass die Ladezeit hierbei immer etwas langsamer dargestellt wird, als sie für deutsche Besucher in Wirklichkeit ist.
Die konkreten Handlungstipps sind aber hilfreich!
Mit 16 Stellschrauben kannst Du WordPress schneller machen
Wir unterteilen die möglichen Stellschrauben in drei übergeordnete Kategorien
- Bilder
- WordPress
- Hosting
Die Optimierungsfelder sind mal mehr, mal weniger technisch. Du musst allerdings kein Programmierer sein, um sie in den Griff zu bekommen.
Wir zeigen Dir, mit welchen Handgriffen oder Plugins Du sie optimieren kannst und wie groß das Aufwand-/Nutzenverhältnis ist (Skala von 1 bis 10)
Bilder können Deine Webseite extrem verlangsamen
Grafiken, Fotos und andere Medien gehören auf jede vernünftige Webseite. Alles andere wäre wohl etwas langweilig.
Die richtigen Bilder können Deine User begeistern, aber auch Deine Seite verlangsamen und Deinen Umsatz schmälern.
Mit den folgenden Ratschlägen kannst Du es verhindern.
Schneide Bilder auf die richtige Größe zu
Oftmals werden Grafiken oder Fotos im Originalzustand auf eine Webseite geladen.
Manchmal sogar mit einer Auflösung, wie 2.100 x1.500 Pixel und mehr! Die Grafiken sind dann gerne mal 5 MB groß.
Das ist Unsinn. Für die meisten Webseiten reicht eine Bildgröße von maximal 1080 x 720 Pixel. Soll sich das Bild in der Breite nicht mal über die ganze Webseite erstrecken, kann es sogar noch kleiner sein.
Schneide Deine Bilder also auf die richtige Größe zu, bevor Du sie in Dein WordPress Backend reinlädst.
Das kannst Du mit diversen kostenlosen Tools machen, wie z.B.
Bereits hochgeladene Bilder kannst Du auch nachträglich mit einem Plugin zuschneiden.
Rating: 10/10
Fazit: Diese Maßnahme ist unerlässlich!
Entferne künstliche Ränder aus den Bildern
Bei Logos oder anderen künstlichen Grafiken entstehen oft überflüssige Ränder.
Sie können transparent oder weiß sein. In jedem Fall solltest Du sie entfernen und die Abstände von Logos und Grafiken zu anderen Elementen über WordPress und CSS steuern.
Die zusätzliche Größe verlangsamt Deine Ladezeit, auch wenn nicht ausschlaggebend.
Dafür eignet sich das kostenlose Grafikprogramm GIMP ganz gut.
Rating: 3 / 10
Fazit: Diese Maßnahme macht Sinn, aber ist kein Muss.
Komprimiere Deine Bilder, ohne Qualität zu verlieren
Du wirst nicht glauben, um wie viel Bytes Du die Größe Deiner Bilder verkleinern kannst, ohne an Qualität zu verlieren.
In Kombination mit den ersten beiden Maßnahmen haben wir ein Bild von 1,5 MB auf 250 KB verkleinert.
Komplexe Grafiken sollten nie größer als 300 KB sein. Am besten ist es, wenn Du 100 KB als Annäherungswert nimmst.
Wenn Du erst mal die Größe der hochzuladenden Bilder angepasst hast, kannst Du sie mit verschiedenen Tools verkleinern:
Doch selbst bereits hochgeladene und veröffentlichte Bilder kannst Du nachträglich mit den richtigen Plugins komprimieren.
Damit kannst Du es umsetzen:
Rating: 10 / 10
Fazit: Die Bildkomprimierung ist keine Option, sondern ein Muss.
Setze PNG und JPG für die richtigen Zwecke ein
Die meisten Webmaster setzen die beiden Dateiformate PNG und JPG vollkommen willkürlich ein.
Dazu ist jedes Format für einen bestimmten Zweck vorgesehen.
Welches Format solltest Du also wofür verwenden?
JPEG
- für komplexe Fotografien
- Grafiken ohne Transparenz
- Grafiken mit vielen verschiedenen Farben
PNG
- Grafiken mit transparenten Hintergründen
- Grafiken, Logos oder Illustrationen
- Grafiken mit wenigen verschiedenen Farben
JPEG
PNG
Du kannst Grafikdateien mit jedem gängigen Grafikprogramm, wie Paint oder GIMP umwandeln, indem Du sie einfach neu speicherst. Bereits hochgeladene Dateien kannst Du nicht mehr ändern (Das musst Du aber nicht, wenn Du die nächste Maßnahme umsetzt).
Nutzen: 7/10
Fazit: Diese Maßnahme ist schon wichtig, aber die nächste Maßnahme macht sie fast überflüssig.
Verwende das moderne WebP-Bildformat
Es gibt mittlerweile ein Bildformat, dass die besten Eigenschaften aus PNG und JPG vereint. Google hat es extra für das Web entwickelt:
WebP.
Es ist klein, kann transparent und animiert sein und glänzt mit hoher Qualität bei kleiner Dateigröße.
Der Nachteil ist, dass noch nicht alle Browser dieses Format wiedergeben können.
Du musst Dich deshalb eines kleinen Tricks bedienen:
Die Grafiken werden klassisch als PNG oder JPG hochgeladen und nur bei den Browsern als WebP ausgespielt, die dieses Format unterstützen. Deine Webseite speichert beide Dateiformate ab.
Für diesen Prozess gibt es einige Plugins, die Dir die Arbeit dafür abnehmen. Du kannst auch bereits hochgeladene Grafiken nachträglich in WebP konvertieren.
Damit kannst Du es umsetzen:
Nutzen: 10/10
Fazit: Wer Seine WordPress Ladezeit optimieren möchte, kommt um WebP nicht herum!
Diese Maßnahmen kannst Du direkt bei WordPress umsetzen
Begeben wir uns nun in das WordPress Backend. Eine frisch installierte WordPress Website muss weitläufig optimiert werden, um annehmbare Ladezeiten zu ermöglichen.
WordPress Caching für einen schlanken Ladeprozess
Jedes Mal, wenn Deine WordPress Webseite aufgerufen wird, muss die HTML-Datei erstellt und von Deinem Server geladen werden. Sie durchläuft dabei etliche Instanzen, wie Dein Theme, die Plugins und die Content-Datenbank. Das kostet Zeit.
Du kannst den Prozess aber verkürzen, indem Du WordPress Caching aktivierst. Dabei wird eine statische HTML-Datei gespeichert und bei einem Aufruf geladen. Sie muss nicht erst erstellt werden.
Nimmst Du eine Änderung an der Seite vor, musst Du den WordPress Cache einmal leeren.
Damit kannst Du es umsetzen:
Nutzen: 10/10
Fazit: Diese Maßnahme geht schnell und ist Pflicht!
Browser Caching für wiederkehrende Besucher
Mit Browser Caching kannst Du Deine Webseite bei Deinen Besuchern im Browser speichern. Kehren sie zurück, wird die Seite von Ihrem Rechner und nicht von Deinem Server geladen.
Das verkürzt die Ladezeit extrem!
Damit kannst Du es umsetzen:
Nutzen: 9/10
Fazit: So machst Du Deine Community happy!
HTML, CSS und Javascript minifizieren - Weg mit dem unnötigen Code!
Programmierer schreiben Code in einer anschaulichen Form, damit sie für andere Programmierer nachvollziehbar sind. Genau so, wie wir diesen Text formatiert haben.
Computer brauchen diese Formatierung nicht. Sie kosten Speicherplatz und verlangsamt dementsprechend die Webseite.
Mit der Minifikation hebst Du die Formatierung auf und komprimierst den Code so weit wie möglich.
Damit kannst Du es umsetzen:
Nutzen: 8/10
Fazit: Mit den richtigen Plugins ist dieser Schritt kein Problem. Google freut sich!
Führe CSS und Javascript zusammen
Analog zum vorherigen Schritt werden hierbei die unzähligen einzelnen Dokumente für die grafische Gestaltung (CSS) und die dynamische Interaktion (Javascript) in einem Dokument zusammengeführt.
Da der Browser den Code nun schneller lesen kann, weil er nur ein Dokument scannen muss, entstehtdie Website schneller.
Damit kannst Du es umsetzen:
Nutzen: 7/10
Fazit: Gerade bei komplexen und großen Webseiten ist diese Maßnahme empfehlenswert.
Beseitige Ressourcen, die das Rendering blockieren
An der Beseitigung dieser Meldung bei Google Pagespeed Insights haben viele Webmaster zu knacken.
Dabei ist das in der Praxis schwer bis unmöglich.
Bestimmte Code-Typen werden immer das Rendern blockieren, wie HTML oder CSS. Solltest Du sie entfernen, wird Deine Website nicht richtig dargestellt.
Javascript hingegen kannst Du in den Footer verfrachten, um Deine Ladezeit zu optimieren.
Lass das aber ein Plugin übernehmen.
Damit kannst Du es umsetzen:
Nutzen: 6/10
Fazit: Wenn es schnell und einfach geht, dann mach es.
Lösche alle unnötigen Plugins
Plugins sind das Schöne an WordPress.
Es gibt für fast jede vorstellbare Funktion ein professionelles Plugin. Allerdings solltest Du es nicht übertreiben, wenn Du an schnellen Ladezeiten interessiert bist.
Lösche alle unnötigen Plugins und prüfe immer, ob es nicht eine Möglichkeit gibt, die gewünschte Funktion manuell umzusetzen.
Teilweise tun die nämlich nichts anderes, als ein Stück Code in die HT-Access-Datei einzufügen. Das kannst Du über Deinen FTP-Server auch einfach selber machen.
Nutzen: 7/10
Fazit: Prüfe jedes Plugin auf seine Notwendigkeit und suche manuelle Alternativlösungen.
Installiere LazyLoad
LazyLoad ist eine der intelligentesten Lösungen zur Verkürzung der Ladezeit.
Anstatt alle Inhalte direkt beim Aufrufen zu laden, werden sie erst geladen, wenn der User sie zu Gesicht bekommt.
Es wird also nur der Above The Fold-Inhalt geladen. Das ist der Inhalt, den der User ohne zu scrollen sieht.
Bei uns sieht das beispielsweise so aus:
Wenn Du auf der Trustfactory-Startseite nach unten scrollst, wirst Du merken, wie die Inhalte erst nach und nach erscheinen.
Das ist LazyLoad.
Damit kannst Du es umsetzen:
Nutzen: 10/10
Fazit: Weil die Installation so einfach und der Nutzen so groß ist, solltest Du nicht darauf verzichten.
Diese Plugins machen Dir Dein Leben leicht
Du hast jetzt eine Menge über die WordPress-Optimierung gelernt.
Vielleicht erscheint es Dir nach viel Arbeit.
Es gibt glücklicherweise einige hervorragende Lösungen, mit denen Du Deine Ladezeiten mit minimalem Aufwand verkürzen kannst.
Sie decken die oben genannten Maßnahmen ab.
WordPress Autoptimize
Autoptimize ist ein hervorragendes Plugin, dass es in einer kostenlosen und Premium-Version gibt. Wenn Du es mit dem nächsten Plugin kombinierst, kannst Du fast alle wichtigen Maßnahmen umsetzen.
W3 Total Cache
W3 Total Cache ist ebenfalls kostenlos. Wie der Name erahnen lässt, hat es effiziente Caching-Funktionen. Doch auch die Minifizierung von Code oder LazyLoad lassen sich hiermit umsetzen.
CrazyLazy
CrazyLazy ist ein einfaches, kostenloses Plugin, das per Klick die LazyLoad-Funktion aktiviert.
WebPExpress
WebPExpress ist eine effektive und zeitsparende Lösung, um bestehende Bilder in WebP umzuwandeln und bei Kompatibilität des Browsers ausspielen zu lassen. Es ist kostenlos.
Optimus
Optimus ist eines der besten Bildoptimierungs-Plugins für WordPress. Allerdings ist es nicht kostenfrei. Du zahlst hier 29 $ pro Webseite. Ist Dein Projekt allerdings bilderlastig, kann es sich lohnen.
WP Rocket
Wenn Du eine zeitsparende Komplett-Lösung suchst, um WordPress Website zu optimieren und bereit bist 49 $ pro Jahr auszugeben, dann nimm WP Rocket.
Das Plugin kann alle WordPress-relevanten Maßnahmen, die wir oben aufgeführt haben, und mehr per Klick effizient umsetzen. Wenn Du das Budget hast, dann suche nicht weiter.
Verpass Deinem Projekt mit Server-seitigen Optimierungen den letzten Schliff
Diese Maßnahmen musst Du bei Deinem Host anfragen oder im FTP-Server umsetzen.
gZIP-Komprimierung und Deflate
gZIP und Deflate umschreibt den Prozess, die Daten Deiner Webseite für Übertragung vom Server zum Browser in einer Datei zu verpacken und anschließend wieder zu entpacken.
Dafür musst Du einen Code in Deine HT-Access-Datei einfügen.
Bei einem Apache-Server:
# Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml
Sei aber vorsichtig und mach vorher eine Sicherung. Ob es geklappt hat, kannst Du mit einem der oben genannten Tools überprüfen.
Nutzen: 8/10
Fazit: Etwas komplizierter, aber dafür umso effektiver!
PHP 7 und Opcache
Stell sicher, dass Dein Host die neuste PHP-Version für Dich installiert und OpCache aktiviert hat.
PHP ist die Programmiersprache der WordPress-Datenbank.
OpCache ist eine Funktion, die den Arbeitsspeicher Deines Servers verbessert.
Die PHP-Code-Abschnitte werden in einem Zug und nicht einzeln geladen.
Frag dafür am besten Deinen Hosting-Provider!
Nutzen: 8/10
Fazit: Der Aufwand ist minimal und es lohnt sich!
HTTP/2
HTTP/2 ist das aktuelle Übertragungsprotokoll für Webseiten. Ähnlich wie gZIP werden die Daten in einem Datenstrom und nicht in zahlreichen übertragen.
Für die Aktivierung musst Du Deinen Webhost fragen. Allerdings solltest Du darauf bestehen und ansonsten den Host wechseln.
Nutzen: 9/10
Fazit: Ein absoluter Muss. Du willst doch auch nicht mit einem veralteten Betriebssystem arbeiten oder?
Investiere in Premium-Hosting
Mit günstigen Shared Hosting-Angeboten wird Deine WordPress Seite nur schwerfällig schnell werden.
Prüfe lieber mal, ob Du Dir ein WordPress Hosting leisten kannst. Der Unterschied ist kaum zu verkennen. Dank der perfekten Einstellung und Ausrichtung auf WordPress, wird Dein Projekt rasend schnell.
Die besten Anbieter dafür sind:
Denk daran, dass dir jede Sekunde Ladezeit 7% mehr Umsatz bringt. So macht sich die Investition schnell bezahlt.
Nutzen: 10/10
Fazit: Das lohnt sich auf jeden Fall!
Exkurs: Frontity
Frontity ist ein React-Framework, das die Art WordPress Webseiten zu bauen vollkommen revolutioniert .
Dank der Trennung von Content und Layout ist es möglich, eine statische Website im Browser zu laden. Nur die Inhalte sind dynamisch.
Bei klassischen WordPress Websites wird jede Unterseite einzeln geladen. Mit Frontitiy ist das Layout quasi statisch und wird nur durch neue Inhalte ersetzt, wenn ein User eine neue Unterseite betritt.
Das Prinzip ist phänomenal und wird die WordPress-Enwicklung nachhaltig verändern.
Schau Dir doch mal unsere Präsentation dazu an:
Fazit: Mit einer schnellen WordPress Seite machst Du mehr Umsatz
Wenn Du profitorientiert Webseiten baust, musst Du Deine Ladezeit in den Griff bekommen. Mit dem was Du heute gelernt hast, steht dem aber nichts mehr im Wege.
Brauchst Du Unterstützung mit Deiner SEO? Wir sind auch Full Service Dienstleister mit Erfolgsgarantie! Vereinbare ein kostenloses Erstgespräch.
