WordPress schneller machen – 911 Turbo Guide

Porsche 911 Turbo S
Für den Standardsprint von 0 auf 100 km/h gibt Porsche für den 911 Turbo S offiziell gerade einmal 2,7 Sekunden an. Schafft es deine Webseite auch unter 3 Sekunden zu bleiben?

Inhaltsverzeichnis

Zunächst einmal ein paar Fakten!

Laut einer Studie von Akamai kann eine 2 sekündige Verzögerung der Ladezeit die Absprungrate tatsächlich um mehr als 100% erhöhen.

53% der mobilen Website-Besuche werden abgebrochen, wenn das Laden von Seiten länger als 3 Sekunden dauert.

Nutzer würden nicht zu Websites zurückkehren, die länger als vier Sekunden zum Laden brauchten. Außerdem führe das zu einer “negativen Wahrnehmung” eines Unternehmens und sie würden ihrer Familie und ihren Freunden von ihren negativen Erfahrungen berichten.

In Brian Dean´s Analyse von 5,2 Millionen Seiten beträgt die durchschnittliche Desktop-Geschwindigkeit (Time to First Byte, TTFB) 1,286 Sekunden auf dem Desktop und 2,594 Sekunden auf mobilen Geräten. Die durchschnittliche Zeit, die benötigt wird, um eine Webseite vollständig zu laden, beträgt 10,3 Sekunden auf dem Desktop und 27,3 Sekunden auf Mobiltelefonen.

Liegst du über dem Durchschnitt?

Teste es doch gleich einmal aus! Aussagekräftige Seitengeschwindigkeits-Tools findest du hier:

Liegt deine Ladezeit über 3 Sekunden, ist dieser Guide genau das richtige für dich.

Um dir zu veranschaulichen welche Maßnahmen am wirksamsten sind, habe ich unsere eigene Domain UTDigital.de als Fallbeispiel gewählt. Alle Schritte sind gut dokumentiert.

Bitte niemals die Erstreaktionszeit des Servers unterschätzen. Ein schneller Hoster kann wahnsinnig viele Fehler begleichen. Bei einen langsamen Hoster hingegen hilft auch noch so viel Optimierung nichts mehr. Das billigste Hosting ist meistens Shared Hosting.

Shared Hosting: Shared Hosting ist laut Definition ein Modell, bei dem eine Vielzahl von Websites auf einen gemeinsamen Pool von Server-Ressourcen zurückgreift. Dabei werden Speicherkapazität, RAM und CPU der physischen Maschine, die als Hosting-Grundlage dient, auf die Gesamtheit der Nutzer aufgeteilt. Kurz gesagt, es ist zu erwarten das diese Option nicht die schnellste ist.

Dedicated Hosting: Dediziertes Hosting ist eine Option, bei der ein physischer Server (oder mehrere Server) für einen einzelnen Kunden zur Verfügung steht. Der Kunde hat die vollständige Kontrolle über die Maschine, so dass er sie für seine individuellen Anforderungen, einschließlich Leistung und Sicherheit, optimieren kann.

CDN: Ein Content Delivery Network (CDN) ist ein Netz von Servern in verschiedenen Rechenzentren auf der ganzen Welt. Ein CDN ermöglicht die schnelle Übertragung von Assets, die zum Laden von Internet-Inhalten wie HTML-Seiten, Javascript-Dateien, Stylesheets, Bildern und Videos benötigt werden. Ein CDN hostet zwar keine Inhalte und kann die Notwendigkeit eines ordnungsgemäßen Web-Hostings nicht ersetzen, aber es hilft dabei, Inhalte zwischenzuspeichern, was die Leistung der Website verbessert. Viele Websites haben Schwierigkeiten damit, ihre Leistungsanforderungen durch traditionelle Hosting-Dienste zu erfüllen, weshalb sie sich für CDNs entscheiden.

Gemäß dieser Liste sind diese deutschen Webhoster die schnellsten im Vergleich:

Sekunden Angabe gibt die durchschnittliche Ladezeit wieder.

  • Webgo (0.08 Sekunden)
  • Linevast (0.09 Sekunden)
  • Checkdomain (0.13 Sekunden)
  • Hetzner (0.14 Sekunden)
  • All-Inkl (0.17 Sekunden)
  • Dogado (0.17 Sekunden)
  • HostEurope (0.18 Sekunden)
  • Strato (0.47 Sekunden)
  • One (0.57 Sekunden)

Bei den amerikanischen Hostern gelten diese als die schnellsten: 7 Fastest Web Hosting Services

Wir haben uns aufgrund des preisgünstigen Angebots für einen amerikanischen Hoster entschieden.

Hostgator.com – Shared Web Hosting

Um die Ladezeit zu optimieren, musst du dein WordPress Theme sorgfältig auswählen. Das richtige Theme benötigt einen optimierten Code um leichtgewichtig und SEO-freundlich zu sein.

Wenn man nach dem schnellsten Theme googelt erscheinen einen die unterschiedlichsten Ergebnisse.

Hier ist bspw. die Top 10 Liste von Kinsta, im Vergleich dazu behaupten aber englische Seiten das andere Themes schneller wären: Themeisle.com oder Hubspot.com.

Die Wahrheit liegt also irgendwo dazwischen. Ein Theme das auf allen Seiten ganz oben mit aufgeführt wird ist Astra.

Astra Theme

Bisher habe ich bei all meinen Projekten nur mit den großen Themes gearbeitet, Avada, BeTheme, Divi und viele Weitere der meist gekauften Themes.

Bei unserer Seite wollte ich eines der empfohlenen Themes auswählen. Meine Wahl fiel also auf Astra. Wir nutzen nur das kostenfreie Theme von Astra und sind gespannt die Ergebnisse mit Euch zu teilen.

Bevor wir zum nächsten Schritt übergehen, noch eine wichtige Information!

Die meisten Themes kommen mit sogenannten Page Buildern, Avada mit Fusion Builder, Divi mit Divi Builder, BeTheme mit Muffin Builder usw..

Astra empfiehlt den Elementor- oder Beaver Builder.

Doch Vorsicht! Page Builder verlangsamen die Seite. Selbstverständlich bringen sie viele Vorteile mit sich, wenn du den Builder allerdings nicht wirklich brauchst und nur wenige “Extra” Elemente auf deine Seite einbinden möchtest, wie bspw. einen Slider, empfiehlt es sich eher, keinen Builder zu installieren und den Slider über ein Plugin einzubinden.

Ja. Es wäre naiv, nein zu sagen. Das ist kein Mythos.

WordPress Page Builder generieren Code für HTML, CSS, JavaScript, PHP, SQL. Page Builder müssen selbst kodiert werden und sind auf anderen Code angewiesen. Code benötigt Platz, Speicher und Netzwerkkommunikation. All diese Dinge beeinträchtigen die Leistung. Sie benötigen Zeit und Ressourcen.

Sogar die besten WordPress Page Builder wissen, dass sie Wege finden müssen, um die Leistung ihres eigenen Builders zu verbessern. Verantwortungsbewusste Hersteller von Page Builder arbeiten ständig an der Leistungsoptimierung ihrer Produkte.

Schau wir uns doch mal die Ergebnisse der ersten Tests vor der Optimierung an.

Was wurde bisher gemacht? Das Astra Theme wurde installiert und die Seiteninhalte eingefügt. Für die Seiteninhalte wurden folgende Plugins gebraucht:

  • Smart Slider 3 – Zur Darstellung des Sliders
  • WP SVG Icons – Für die verschiedenen Icons auf der Seite
  • WPForms Lite – Kontaktformular

Unabhängig der Seiteninhalte noch diese Plugins:

  • Rank Math – Meiner Meinung nach mittlerweile besser als YoastSEO
  • AMP – Accelerated Mobile Pages, um Blogbeiträge schneller laden zu lassen
  • Really Simple SSL – Mixed Content Fehler für SSL vermeiden
  • CAOS – Google Analytics Tracking Code optimiert einbinden

Und so hat die Seite bei Google und GTmetrix abgeschnitten:

Google Pagespeed - Erster Test
GTmetrix - Erster Test

Das sieht erstmal gar nicht so schlecht aus!

Mit der Gesamtladezeit von 3.6s liegen wir aber leider noch über dem Durchschnitt. Bei Google heißt es 2.9s um die ersten Inhalte zu zeichnen (First Contentful Paint) und eine Mobile Bewertung von 66 / 100 Punkten und Desktop Bewertung 77 / 100 Punkten. Wir sehen also noch Verbesserungspotenzial!

WordPress bietet mittlerweile sehr viele Plugins zur Optimierung der Seitengeschwindigkeit an.

Welche sollten wir also auswählen?

Im Laufe der Zeit konnte ich schon viele verschiedene Caching Plugins, Bildoptimierungstools und Anderes testen. Mittlerweile habe ich die perfekte Kombination von Plugins gefunden, ein eingespieltes Team! Natürlich funktioniert diese Kombination nicht für jedes Theme, in diesem Fall kann man das eine oder andere auswechseln. Diese Plugins sind oft auch mit anderen Plugins kompatibel.

Welche Nutzen wir?

Hier ist die Liste:

  • WP-Optimize – Clean, Compress, Cache – Um die Datenbank sauber zu halten.
  • WP Super Cache – Sehr schnelles Caching-Plugin.
  • ShortPixel Image Optimizer – Optimiert automatisch alle Bilder, durch Kompression und Verkleinerung, konvertiert Bilder zu WebP (NextGen Bildern).
  • Autoptimize – Funktioniert hervorragend mit WP Super Cache. Es beschleuigt deine Website durch Optimierung von CSS, JS, Bildern, Google-Schriftarten und mehr.

Bei diesen Plugins gibt es viele Einstellungen. Die richtigen Settings sind der Schlüssel zur perfekten Optimierung. Ich zeige euch einmal die Einstellungen der beiden wichtigsten Plugins – WP Super Cache und Autoptimize.

Manche Optionen müsst ihr je nach Inhalten und Elementen auf Eurer Seite anpassen, auch andere Plugins können diese Einstellungen beeinflussen. Daher bitte nach und nach testen, ob die volle Funktionalität der Seite weiterhin gegeben ist. Bspw. konnte ich die Google Fonts entfernen, da ich keine verwende, oder jquery bei den ausgeschlossenen Scripten von Autoptimize entfernen.

Wenn du sichergestellt hast das deine Seite weiterhin funktioniert, schau dir jetzt die Ergebnisse der Testtools an.

Google PageSpeed - Zweiter Test

Wie Ihr sehen könnt werden die ersten Inhalte jetzt schon nach 1 Sekunde gezeichnet und Google gibt uns nun einen Score von 82/100 Punkten!

Es gibt immer noch ein paar kleine Verbesserungen bzgl. Bildern, aber darauf legen wir jetzt weniger Wert.

Ein erhebliches Problem sticht aber noch ins Auge und dieses Problem stiehlt uns noch die restlichen 18 Punkte.

1,97 Sekunden – “Erstreaktionszeit des Servers verringern”! Erinnert Ihr euch noch an den Anfang des Artikels? Vorsicht bei der Hosterauswahl! Hier liegt ganz klar das Problem beim Hoster. Wir haben einen amerikanischen Hoster mit Shared Hosting Paket gewählt, an der Stelle können wir mit unseren Ergebnis voll und ganz zufrieden sein.

An dieser Stelle ist die einzige Lösung des Problems ein Hoster Wechsel oder das zwischenschalten einer CDN.

Wie sieht es jetzt bei GTmetrix aus?

GTmetrix - Zweiter Test

Hier hat sich alles verbessert. PageSpeed Score ist von 93 auf 98% hochgeklettert, YSlow Score von 79 auf 91%, Total Page Size von 834KB auf 395KB verringert und 27 Requests auf 14 Requests reduziert! Tolle Leistung der Plugins!

Allerdings sehen wir auch hier ein Dorn im Auge – die ersten Inhalte werden jetzt zur Zufriedenheit des Nutzers und zur Zufriedenheit Googles innerhalb einer Sekunde geladen, allerdings braucht die volle Ladezeit immer noch stolze 3,5 Sekunden. Auch hier können wir leider nichts mehr verbessern, die einzige mögliche Verbesserung zeigt uns GTmetrix auch an:

GTmetrix CDN

Eine CDN ist jetzt noch die letzte Option um eine hervorragende Ladezeit zu erreichen.

Bei der Auswahl der CDN sollte man darauf achten das auch ein Server in Deutschland steht, oder je nach dem für welches Land die Domain effektiv sein soll. Es gibt viele Anbieter, die sich auch preislich stark unterscheiden. Hier haben wir eine Liste der besten CDNs für WordPress:

  • StackPath (nur $10 monatlich)
  • Sucuri ($199.99 im Jahr)
  • KeyCDN ($0.04 pro Monat für die ersten 10TB)
  • Cloudflare (kostenfrei)
  • Amazon CloudFront

Wir haben uns für StackPath entschieden. Hier sind die Ergebnisse:

Kurz zur Information: Zwischen dem letzten Test und diesem, haben wir noch weitere Plugins installiert, die natürlich die Bewertung verlangsamen, aber notwendig waren:

  • Complianz | GDPR/CCPA Cookie Consent – um die DSGVO einzuhalten
  • Sassy Social Share – Social Media Teilen Buttons im Blog
  • SimpleTOC – Table of Contents Block – Inhaltsverzeichnis im Blog

Ohne diese Plugins liegen wir in jedem Test zwischen 90 und 100.

Google PageSpeed - Letzter Test

Die CDN hat nochmal einiges geändert! Die Fehlermeldung “Erstreaktionszeit des Servers verringern” ist komplett verschwunden. Erste Inhalte werden weiterhin nach 1,1 Sekunden gezeichnet, zusätzlich hat sich jetzt aber der Speed Index 2,9 Sekunden reduziert und die gesamte Zeichnung von 2,1 auf 1,8 Sekunden. Insgesamt sind wir jetzt bei einer Wertung 89 / 100 Punkten. Damit können wir vollkommen zufrieden sein.

GTmetrix - Letzter Test

Sowohl PageSpeed Score als auch YSlow Score sind jetzt bei 99%. Volle Ladezeit hat sich auf 2.8 Sekunden verringert – womit wir mit dem Porsche 911 Turbo S auf Augenhöhe sind. Ziel erreicht!

Durch ein paar vorab gut getroffene Entscheidungen lässt sich mit WordPress eine sehr schnelle Webseite einrichten, die in den Google Ergebnissen ganz oben mitspielt. Jede Webseite unter 3 Sekunden befindet sich im sicheren Bereich, unter 2,7 Sekunden und du schlägst den Porsche 911 Turbo S im Rennen! Es lohnt sich also diesen Guide zu folgen und etwas Zeit in die Optimierung der Seitengeschwindigkeit zu stecken!

Hier sind nochmal die wichtigsten Faktoren zusammengefasst:

  • Hoster Auswahl
  • Theme Auswahl
  • Plugins einrichten
  • (Optional) CDN einrichten

Wir hoffen wir konnten Euch mit diesen Guide helfen!

Für weitere Tipps und Tricks, Empfehlungen oder der Umsetzung, kontaktier uns doch einfach!

Teilen

1 Kommentar zu „WordPress schneller machen – 911 Turbo Guide“

  1. Pingback: Wie Sie Ihre Wordpress Ladezeit optimieren

Kommentarfunktion geschlossen.