High Speed: Was WordPress-Websites wirklich schnell macht – [#1]

Hast du dir schon mal die Frage gestellt, warum es WordPress-Websites mit sehr vielen Bildern auf der Startseite gibt, die trotzdem deutlich unter einer Sekunde laden? Richtig gelesen. Deutlich unter einer Sekunde Ladezeit. Das ist durchaus möglich und machbar, allerdings erfordert es sehr viel Sachkenntnis und vor allem Arbeit. Es kann zum Beispiel kein Theme genutzt werden, welches sich automatisch aktualisieren soll. Auch ein Child-Theme entfällt, weil an zu vielen Schrauben gedreht werden muss. Doch der ganze Aufwand lohnt sich, denn für Google ist eine solch schnelle Seite ein echter Grund, sie höher zu ranken. Deshalb beschäftigen wir uns in dieser kleinen Serie nicht mit den 100 von 100 Punkten bei Google Page Speed, sondern mit der Frage, wie man Websites so richtig schnell macht.

High Speed: Was WordPress-Websites wirklich schnell macht - [#1]

Websites rasend schnell machen

Normalerweise wird man für eine solche Serie, wie wir sie mit diesem Beitrag anfangen, immer eine Testseite einrichten. Doch eine Testseite ist schnell optimiert, denn es sind kaum Plugins installiert, es werden wenig CSS- und JavaScript-Dateien geladen und es sind sehr wenig Bilder auf der Startseite eingebunden. Wir wollen jedoch anhand einer echten Live-Website mit 28 zum Teil großformatigen Bildern aufzeigen, dass es absolut funktioniert, auch eine solche Website rasend schnell zu machen. Die Website, um die es sich handelt, ist meine Democratic Post. Übrigens ist die Endgeschwindigkeit einer Website oftmals Fleissarbeit, denn es greifen viele – auch manchmal sehr kleine – Optimierungen ineinander.

Erster Test:

Der erste Test

Zweiter Test:

Der zweite Test

Warum wir Google Page Speed nicht beachten

Google Page Speed Insights ist ohne Frage ein sehr gutes Werkzeug für die Geschwindigkeitsoptimierung von Websites. Allerdings sind manche Regeln nicht nur fraglich, sondern verhindern sogar weiteres Geschwindigkeitspotenzial. Besonders das CSS, welches Google gerne als Inline-CSS (den Teil des CSS, der für die Darstellung des sichtbaren Bereichs verantwortlich ist) sehen möchte, verhindert schnellere Ladezeiten bei manchen Themes. Eine verlinkte CSS-Datei, die sich hervorragend cachen lässt, ist grundsätzlich schneller, wenn vielleicht auch nur beim Aufruf einer weiteren Seite. Zudem meckert Google noch gern an seinen eigenen Dateien herum, weil diese sich nur eine kurze Zeit cachen lassen. Daher legen wir unser Hauptaugenmerk auf reine Geschwindigkeit, auf messbare Performance.

High Speed Tipp #1 – Die Wahl des richtigen Hosters

Die Wahl des richtigen Webhosters mit einer passenden Lösung für das Hosting ist sehr wichtig. Denn die Geschwindigkeit beginnt bereits hier. WordPress läuft bereits auf günstigen Shared-Hosting-Paketen, doch das ist die falsche Wahl, wenn du Geschwindigkeit willst. Denn auf diesen günstigen Webhosting-Paketen teilen sich zum Teil weit über 100 Websites einen virtuellen Server. Haben andere Websites auf diesem Server viel Traffic, wirst du es zu spüren bekommen. Du brauchst also eine vernünftige Lösung, die jedoch tatsächlich nur einige Euro mehr kostet. Empfehlenswert sind hier zwei bezahlbare Lösungen, die ich beide kurz vorstelle.

Managed WordPress Hosting

Raidboxes - Premium WordPress Hosting aus Deutschland

Raidboxes bietet Premium WordPress-Hosting aus Deutschland. Das Hosting ist ein Managed WordPress-Hosting. Das bedeutet, dass du dich um nichts kümmern musst. Ab dem Paket „Starter“ ist ein eigener virtueller Server inklusive, den du dir mit niemandem teilen musst. Wichtig bei der Auswahl des richtigen Hosters ist, ob dieser die Websites auf SSDs oder normalen HDDs speichert. Deine Wahl für mehr Geschwindigkeit muss zwingend immer SSD sein. Raidboxes bietet dir grundsätzlich nur SSDs an. Das „Starter Paket“ kostet monatlich 17,85 Euro inklusive MwSt. Dafür bekommst du zusätzlich einen guten Support, der sogar deine Website für dich kostenlos umzieht. Du kannst das Managed WordPress Hosting bei Raidboxes 14 Tage kostenlos testen. Diese Art des Hosting ist richtig für dich, wenn du wenig Ahnung von Server-Konfiguration hast.

Managed-Root Cloud Server von hostNET

Managed-Root-Cloud Server von hostNET

Der Managed-Root Cloud Server der deutschen Firma hostNET ist meine Wahl. Alles was die Sicherheit und grundsätzliche Konfiguration des Servers angeht, wird durch hostNET erledigt. Wenn jedoch zusätzliche Dinge installiert werden müssen, musst du das selbst erledigen. Der Root-Cloud Server stellt dir eine SSD zur Verfügung, die in einem RAID5 System mit Hot-Spare und zusätzlichem HA-Failover-Cluster abgebildet werden. Das schafft einen richtigen Performance-Schub. Zusätzlich – als kleinen Service – bekommst du noch eine eigene IP-Adresse dazu. Das wirklich Interessante an dieser Hosting-Möglichkeit ist jedoch, dass sie mit deiner Website und den Anforderungen mit wächst. Denn du kannst den Speicherplatz, die CPU-Anzahl und den Arbeitsspeicher jederzeit selbst erhöhen und auch wieder verringern, wenn es nötig wird. Abgerechnet wird sekundengenau. Der Root-Cloud Server kostet ab 14,88 Euro inklusive MwSt. im Monat. Sieben Tage lang kann der Server kostenfrei getestet werden. Wir haben den Service bei Dr. Web schon ausführlicher vorgestellt.

High Speed Tipp #2 – Auf HTTP/2 bei der Hosterwahl achten

HTTP/2 ist die Zukunft des Internets. Dieses Protokoll – der Nachfolger von HTTP 1.1 – wurde für moderne und komplexe Websites von heute entwickelt. Die Vorteile liegen darin, dass das neue Protokoll dem Browser ermöglicht, viele verschiedene Dateien gleichzeitig zu laden, und nicht mehr nacheinander, wie es bei HTTP 1.1 noch der Fall war. Denn HTTP 1.1 musste für jede Anfrage (Request) eine Verbindung öffnen, während der Browser mit HTTP 2.0 auf einer TCP-Verbindung mehrere Ressourcen gleichzeitig laden kann. Das verschafft einen großen Geschwindigkeitsvorteil. Während Raidboxes noch mit dem „Vorläufer“ SPDY 3.1 arbeitet, setzt hostNET bereits HTTP/2 ein. Mit diesem Online-Tool kannst du selbst testen, auf welcher Website HTTP2 bereits eingesetzt wird.

Info: Die Vorteile von HTTP/2 können nur mit einem HTTPS-Zertifikat genutzt werden, weil die meisten Browser dies erfordern.

High Speed Tipp #3 – Die Plugins ausmisten

Plugin Performance Profiler Ergebnis

Die meisten Menschen haben viel zu viele Plugins aktiviert und im Einsatz. Jedes zusätzliche Plugin verlangsamt die Website ungemein. Deshalb miste die Plugins aus und lasse nur die absolut nötigen aktiviert und installiert. Auch Plugins, die du nur ab und an benötigst und die deaktiviert sind, können dein WordPress immer noch langsam machen, deshalb lösche sie. Mit dem Plugin P3 (Plugin Performance Profiler) kannst du sehr schnell feststellen, welche Plugins die Performance-Fresser sind. Die müssen dann unbedingt raus. Yoast SEO ist einer der Kandidaten, die eine Website langsam werden lassen. Das schnellste SEO-Plugin ist übrigens wpSEO, welches jedoch kostenpflichtig ist. Es kostet dich einmalig ab 23,79 Euro inklusive Steuer. Um Premium-Plugins wirst du indes nicht herumkommen, wenn dir die Geschwindigkeit deiner Website am Herzen liegt.

Den Quellcode deiner Website prüfen

Um wirklich kompetent entscheiden zu können, welche Plugins rausfliegen, schaue dir den HTML-Quellcode deiner Website genau an. So findest du heraus, welche Plugins wie viel zusätzliches CSS und JavaScript laden. Auch hier gilt wieder: weniger ist mehr. Wenn jedoch Plugins dabei sind, die du unbedingt behalten musst, dann schreibe sie dir auf. Später zeige ich dir, wie die Dateien nur dort geladen werden, wo es wirklich sein muss.

High Speed Tipp #4 – Code ausmisten im WordPress-Theme

Je nachdem, welches Theme sich im Einsatz befindet, ist es entweder gut oder schlecht programmiert worden. Viele Themes schleppen einen Overhead an Quellcode mit sich rum, der sie langsam macht. An diesem Punkt ist Fleissarbeit angesagt, denn es geht darum, den unnötigen Quellcode zu entfernen und mal richtig auszumisten. Dazu kannst du alle Templates des Themes kontrollieren und schauen, was unnötig ist und gelöscht werden kann. Gerade die teuren Premium-Themes sind oftmals viel zu überladen, daher sollte man vielleicht auf ein wirklich gut entwickeltes, kostenloses Theme umsteigen. Eine hohe Code-Qualität und Ausnutzung bieten dir etwa Themes von Automattic und Anders Norén.

High Speed Tipp #5 – Den Header von WordPress ausmisten

Früher gab es mal einige wenige Links im WordPress-Header, heute sind eine ganze Palette davon zu finden, die je nach Seite angezeigt werden. Zudem kommt noch der Code für die Emojis dazu, eine Art Smileys. Seit WordPress 4.2 sind diese Emoji im Core verankert. Deren Scripte werden bei jedem Seitenaufruf sowohl im Backend wie im Frontend geliefert. Völlig egal, ob man diese Emoji irgendwo genutzt hat oder nicht. Also gehört auch dieser Code deaktiviert, denn er frisst nur Performance.

Ein Klick öffnet das Gist bei GitHub
Den Headerbereich von WordPress aufräumen

Fazit des ersten Teils

Wenn du jeden Bereich beachtet hast, besonders den Bereich mit dem Ausmisten der Plugins, dann sollte deine Website jetzt bereits merklich schneller sein als zuvor. Als ich von einem Shared-Hoster zu hostNET wechselte, war meine Website bereits ohne jede Optimierung so schnell wie zuvor mit Optimierungen. Vielleicht ist dir noch nicht klar, warum du auch auf so kleine Dinge, wie dem Ausmisten von HTML-Quellcode und dem Bereinigen des Headers Wert legen solltest. Doch ich versichere dir, dass sich die vielen kleinen Optimierungen summieren werden und einen guten Teil zur Ladegeschwindigkeit beitragen werden. Denn alle Arbeiten greifen letztendlich ineinander.

WordPress-Websites wirklich schnell: die Serie

Links zum Beitrag:

(dpe)

ist freier Journalist, Spezialist für WordPress und WordPress Sicherheit und ist im Internet unterwegs, seit es in Deutschland existiert. Seit 2012 schreibt er für DrWeb. Nebenbei ist er Autor mehrerer E-Books zu den Themen Lebenshilfe, Marketing und WordPress.

Sortiert nach:   neueste | älteste | beste Bewertung
Achim Schmidt
Gast
Achim Schmidt
2 Monate 16 Tage her

Hallo,
gibt es eigenlich ein Tool, mit dem ich sehen kann, welchen Speicherbedarf ein Plugin hat oder eine andere Methode, die zu erfahren?

Schöner Artikel, freue mich auf die nächste Folge.

trackback

[…] ersten Teil unserer Serie haben wir die Wichtigkeit der richtigen Webhosting-Lösung angesprochen. Dabei haben wir Fragen […]

Achim Schmidt
Gast
Achim Schmidt
2 Monate 9 Tage her
Also irgenwie paßt das nicht so recht. Ich habe, um es mal auszuprobieren, mir einen Account bei hostnet geholt und eine Site installiert. Vollkommen nackt, ohne Content und Plugins lag die Site bei72/100 und war damit schneller als 83 % aller getesteten Seiten. Dann habe ich mal das Theme gewechselt (DIVI – elegantThemes) und 80 Plugins eingespielt und aktiviert. Der Unterschied war nicht so bedeuten. Im schlechtesten Fall war die Site immer noch besser als 40 & der getesteten Seiten und kurz daruuf (ein/wei Klicks später, nichts an der Site geändert) besser als 73 und 75 % aller getesteten Seiten.… Read more »
Konrad Bauckmeier
Gast
2 Monate 8 Tage her

Hallo Andreas,
danke für deine Artikelserie. Ich beziehe mich auf deinen Satz „Später zeige ich dir, wie die Dateien nur dort geladen werden, wo es wirklich sein muss.“ Dazu habe ich weder hier noch im zweiten Teil etwas gefunden. In meinem Fall habe ich ein Kartenplugin und ein Kontakt-Form-Plugin installiert (wp-geo und contact form 7) und festgestellt, dass die scripte auch geladen werden, wenn sie nicht gebraucht werden (z.b. auf der Startseite gibt es weder ein Kontakt-formular noch eine Karte)

Kann ich da was machen? Könnte der Plugin-author dagegen etwas tun?
Gruß Konrad

Jan Wiedemann
Gast
1 Monat 24 Tage her

Hallo Konrad,
ohne Andreas jetzt vorgreifen zu wollen habe ich erste Erfahrungen mit dem WP-Plugin „GONZALES“ gemacht. Das Tool koststet nicht die Welt und funtioniert gut. LG

trackback

[…] und dabei in den Millisekundenbereich der Ladezeit vordringen. Den Grundstock haben wir bereits im ersten und im zweiten Teil […]

Achim Schmidt
Gast
Achim Schmidt
1 Monat 29 Tage her
Sorry, ich bin voelleicht ein bißchen blöd, aber ich verstehe es nicht. Ich habe hier einen ersten Test (Chrome) und einen zweiten, kurz danach (Firefox). Jetzt gehe ich mal dsvon aus, dass der Browser, in dem der Test gestartet wird, nixhts zu sagen har. Dann habe ich im ersten Test eine Ladezeit von 3,99 Sec. und bin damit schneller als 42% aller getesteten Website. 5 Minuten später hat die selbe Site 5,72 Sekunden Ladezeit und ist trotzdem besser als 72% aller Site. Irgendwie verstehe ich den Zusammenhang nicht: Wie kann eine Site, die eund 2 Sekunfden langsamer ist, besser ranken?… Read more »
hofpils
Gast
hofpils
1 Monat 28 Tage her

Bei welchem Hoster befindet sich eigentlich democraticpost? Hostnet?

Jan Wiedemann
Gast
1 Monat 24 Tage her

Hallo Andreas,
echte Performance-Fresser sind ja die von vielen eingesetzten Slider und Gallery-Plugins. Manche dieser Tools kommen gleich mit meheren .js- und .css-Dateien daher. Kannst du all denen unter uns, die hierauf nicht verzichten wollen, einen Tipp geben?
LG

Michael
Gast
1 Monat 2 Tage her

Auf alle Fälle ein sehr interessanter Artikel. Genau daran muss ich arbeiten…

Alfred
Gast
21 Tage 23 Stunden her

Hallo Andreas,
macht Deiner Meinung nach ein SEO Tool überhaupt Sinn? Die sprechenden URL’s sind ja schon weggefallen. Und Geschwindigkeit kosten sie auch.
VG
Alfred

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen