So machst du WordPress 314% schneller

Egal, wie schön deine Website ist, die Geschwindigkeit mit der sie lädt, spielt eine große Rolle… In diesem Blogpost erfährst du, wie du deine WordPress-Webseite schneller machen kannst.

Schnelle Webseiten werden nicht nur von Suchmaschinen (Google & Co.) bevorzugt, sondern auch von echten Menschen.

Ernsthaft, kannst du dich daran erinnern, wann du das letzte Mal 10 Sekunden gewartet hast, bis eine Website fertig lädt?

Ich bin ungeduldig und ich will nicht (all zu lange) darauf warten müssen bis ein Blogpost oder eine Webseite angezeigt wird — es ist immerhin 2018.

Einer Statistik nach warten 40% der Nutzer nicht länger als 3 Sekunden darauf, dass eine Website lädt. Je länger es dauert, umso mehr Besucher verlierst du. 47% erwarten sogar, dass eine Website in unter 2 Sekunden lädt.

Dabei ist es egal, ob es ein Online-Shop ist, ein Blog oder eine Hochzeitswebseite.

Ich bin ein Speed-Fanatiker, wenn es um meine eigenen Websites geht.

Deswegen habe ich mir vorgenommen, die Ladezeit des Blogs dauerhaft unter zwei Sekunden zu halten. 2 Sekunden Ladezeit — maximal.

Utopisch? Vor allem für Blogs mit vielen Bildern? Nö. Total machbar. Bei Pingdom kannst du die Geschwindigkeit deiner Website messen und falls nötig, zeigt dir dieser Artikel, wie du WordPress schneller machen kannst.

Für ein realistisches Ergebnis wählst du den Testserver in Stockholm aus, drücke auf Start Test und nach ca. 10–15 Sekunden erhältst du dein Ergebnis.

Welches Ergebnis hast du als Ladezeit bekommen? Unter 2 Sekunden  —  Glückwunsch!

Über 3 Sekunden? Nicht so gut…

Kein Grund auszuflippen, aber da muss etwas gemacht werden! Dringend.

Zum Glück gibt es ein paar simple Tricks, mit denen du deine Website schneller machen kannst.

Das Hosting – die Basis einer schnellen Webseite

Dein Blog, bzw. deine Website, liegt gerade auf irgendeinem Server. Gerade am Anfang der Karriere Online ist oft kein Budget für Premium Hosting vorhanden.

Deswegen begnügen sich viele Einsteiger mit einem Hostingtarif, der 5–10 Euro im Monat kosten, oder noch weniger. Verstehe ich, ging mir genau so.

Das Problem mit diesen Tarifen ist jedoch meist, dass deine Website dann auf einem Server liegt ist, den es sich mit anderen Seiten teilen muss.

Das bremst deine Webseite erheblich aus und es kann bei erhöhten Besucherzahlen zu einem „Stau“ und einer Überlastung des Servers führen, was die Ladezeit erhöht.

Am Anfang der Online-Karriere ist es völlig in Ordnung so einen Tarif zu wählen. Sobald du aber beständige Besucherzahlen auf deiner Website hast und mehr investieren kannst, solltest du das tun.

Wenn du dein Google Ranking verbessern willst, solltest du unbedingt in eine schnelle Webseite investieren.

Zu einem zuverlässigen Host zu wechseln macht definitiv Sinn. Eine schnellere Ladezeit macht deine Besucher glücklicher, bringt dir auch auf Dauer auch eine größere Zahl an Besuchern (SEO & Usability Vorteile) und lässt dich schneller & effektiver wachsen.

Richtige Profiserver fangen ab ca. 25€ pro Monat an. Es gibt aber auch preiswertere Alternativen, die mit dir und deiner Website wachsen können.

Viele meiner Webseiten liegen auf den Servern meines ehemaligen Favoriten WebGo. Meiner Meinung nach stimmt hier alles: Preis/Leistung ist top und der Support ist sehr hilfreich*.

*Update: Mittlerweile bin ich großteils zu Siteground umgezogen, da es meiner Meinung nach noch besser ist. Einziger Haken: Alles ist auf englisch…

Falls du dich entscheidest mit deiner Website umzuziehen, frage bitte jemanden um Hilfe, der sich damit auskennt oder schau dir ein Tutorial an, damit deine Daten sicher von A nach B kommen.

In Punkt 6 verrate ich dir, wie du WordPress schneller machen kannst, trotz preiswertem Hosting und so die Ladezeit deiner Website innerhalb von 5 Minuten extrem verbessern kannst.

Das Theme. Schön anzusehen & schnell?

25% der Internetseiten verwenden WordPress, mit großer Wahrscheinlichkeit auch deine Website. Denn WordPress ist einfach: Anfänger können sich schnell Ihre eigene Website erstellen und mit dem bloggen beginnen.

Einfach ein Theme (dt.: Thema) installieren und loslegen. So ist die Theorie. Aber es gibt tausende Themes, kostenlose und kostenpflichtige, schöne und nicht-so-schöne, schnelle und langsame.

Tendenziell solltest du darauf achten, dass ein Theme SEO optimiert und schnell ist. Denn das bedeutet meist, dass der Designer des Themes Faktoren, wie z.B. die Geschwindigkeit, bei der Erstellung im Kopf hatte. Es gibt jedoch keinen Grund in Panik zu verfallen, wenn du bei deinem ersten Theme nicht darauf geachtet hast.

Bei meiner ersten Website, habe ich mich auch nur nach dem Aussehen orientiert und nicht auf SEO oder andere Faktoren geachtet.

An guten Tagen hatte die Website eine Ladezeit von 7,4 Sekunden, sah dafür aber toll aus… Nicht gerade Optimal!

Falls du die Muße hast, dein Theme zu ändern und gegen ein optimierteres zu tauschen, mach bitte ein BackUp.

So hast du nämlich eine Version, auf die du zurück greifen kannst, auch wenn ein Unglück passiert und verlierst nicht sämtliche Daten.

Mein Lieblingsdesigner für kostenlose, minimalistische Themes ist Anders Norén oder Independent Publisher  — für alle, die mehr Designmöglichkeiten haben wollen, empfehle ich Divi 3.0 oder Minimall von ttfb (darauf läuft dieser Blog).

Die Homepage — Willkommen auf deiner Webseite

Die Homepage ist die Seite, auf der deine Besucher landen, wenn sie die Adresse deines Blogs eingeben. Quasi die Willkommens-Seite.

In den meisten Fällen liefert die Homepage direkt Informationen, zeigt die neusten Blogpost und begeistert Besucher. Achte trotzdem darauf, sie nicht zu überladen.

Slider

Slider trifft man auf so gut wie jedem Blog. Sie sind hübsch und bieten eine kleine Übersicht ausgewählter Beiträge.

Wenn wir aber mal ehrlich sind, verursachen animierte Slider immer irgendwie Kopfschmerzen. Manche sliden zu schnell, manche zu langsam. Zusätzlich müssen direkt 3–5 Bilder geladen werden, bevor der Content unter dem Bild angezeigt wird. Auch das verlangsamt die Seite.

Mein Tipp: Verzichte auf die Slider und positioniere deine Post klassisch untereinander. So kann dein Blog im Fluss von oben nach unten laden, ohne direkt ein paar Bilder auf einmal bereitstellen zu müssen.

Für den Fall, dass du deinen Slider unbedingt behalten willst, dann solltest du zumindest die automatische Animation ausstellen.

Dann können Besucherinnen und Besucher selbst entscheiden, ob sie durch die Slides klicken wollen oder nicht. Das anteaserndes nächsten Slide ist eine tolle Möglichkeit, dies zu erreichen.

Posts

Zu viele Post auf der ersten Seite zu haben, erhöht die Ladezeit deiner Homepage. Die Anzahl der Blogposts zu reduzieren, pro Kategorie nur zwei oder drei vorzustellen und stattdessen ein mehr Entdecken-Button zu setzen, schadet definitiv nicht.

Die meisten deiner Besucher kommen über einen Beitrag auf deine Seite und nutzen die Homepage, bzw. das Menu, nur als weitere Orientierung. Um die Besucher auf dem Blog zu halten, kannst du am Ende des Beitrags den nächsten Beitrag anteasern. Manche Themes schlagen am Ende des Posts automatisch einen thematisch passenden Beitrag vor.

Viele Besucher fühlen sich von zu viel Auswahlmöglichkeiten erschlagen. Die neusten oder besten Artikel sollten deswegen im Vordergrund stehen. An einem Beispiel:

Auf dem Cover der Vogue sind nur 4–7 Stories angeteasert und nicht das ganze Inhaltsverzeichnis abgedruckt.

Weniger ist mehr — stell dir deine Homepage, wie das Cover eines Magazins vor. Welche Beiträge und Bilder laden deiner Meinung nach am meisten zum Lesen ein? Große Bilder mit einem interessanten Textausschnitt oder Überschrift funktionieren am besten.

Widgets

Mit Widgets kann man so gut wie alles auf seinen Blog packen. Den Instagram-Feed, die Facebook-Like-Box, den Snapchat-QR-Code, Besucherzahlen, und so weiter. Auch hier gilt wieder „weniger ist mehr“. Jedes Widget muss erstmal Verbindung zu der Quelle herstellen (Insta, FB, etc.) bevor es etwas darstellen kann.

Und du ahnst es bestimmt schon: Das verlangsamt deinen Blog!

Was ist also deine wichtigste Social Media Plattform? Ist es Instagram oder Snapchat? Bevorzuge das Plattform-Widget von deiner liebsten App. Keine Angst, die Verlinkungen zu deinen verschiedenen Social-Media-Profilen als Links auf deiner Seite stellen kein Problem dar.

Die meisten Widgets, z.B. die Facebook-Like-Box, lassen sich auch bequem per Code auf deine Seite einfügen.

Die Bilder auf deiner Webseite

Nach gutem Content sind Bilder das wichtigste auf einem erfolgreichen Blog. Wer will schon einen #ootd-Post, einen Reisebericht lesen oder ein neues Rezept entdecken, wo kein einziges Bild zu sehen ist.

Ein kleiner Tipp am Rande, wenn du Bilder benennst, solltest du auf Sonderzeichen (ö,ü,ä,…) verzichten, da ein paar Browser (z.B. Safari) Probleme haben können, Bilder mit solchen Dateinamen darzustellen.

Da Bilder in schlechter Qualität niemanden Spass machen, ist jeder Blogger bemüht, die Fotos auf der eigenen Seite in möglichst toller Qualität hochzuladen. Problematisch wird es jedoch, wenn du deine Outfit-Bilder, die mit der LSR aufgenommen wurden, direkt in deinen Blogpost einfügst.

Bitte mach das nicht, denn das Resultat sind riesige Bilder mit einer Auflösung von 5500×3600 Pixeln und einer Dateigröße von 7,5MB, die ewig brauchen, um dargestellt zu werden.

Eine schnellere Ladezeit von Bildern lässt sich jedoch erstaunlich einfach erreichen.

Skaliere die Bilder runter

Anstatt also die Bilder in einer Größe von 5500×3600 auf deinen Blog zu laden, kannst du in das Bild in Grafikprogrammen, wie Photoshop, Gimp oder auch mit Browserprogrammen (z.B. picresize.com) auf ein sinnvolleres Format verkleinern.

Bei dem Haupt-Beitragsbild ist eine Größe von ca. 1900×1080 Pixeln zu empfehlen, bei den Fotos im Beitrag reicht eine ungefähre Größe von 1280×720. Diese Bildgrößen sehen auf 99% der Geräte immer noch gestochen scharf aus und liefern eine hohe Bildqualität.

Reduziere die Bildgröße

Das Skalieren der Bilder sollte die Dateigröße schon reduziert haben. Die optimale Größe einer Bilddatei ist weniger als 500kb. Deswegen ist es eventuell nötig, die Größe der Bilddatei noch weiter zu reduzieren.

Ein nützliches Online-Tool, welches ich vor kurzem entdeckt habe, ist: compressor.io.

Ich weiß nicht, wie es Stephane, der Entwickler des Tools, es macht. Aber es funktioniert.

Und ist dabei noch sehr einfach. Bild hochladen, Lossy oder Lossless auswählen (Bei Lossy leidet die Qualität, verspricht aber eine kleinere Dateigröße), kurz warten und das verkleinerte Bild herunterladen.

Bei dem Testbild kam ich auf eine Bildgröße von 453 kB, vorher war es über 1,7 MB groß.

Wenn dein Anzahl von Blogposts und Bildern noch überschaubar ist, ist es empfehlenswert, diese nachträglich zu optimieren. Bei einer großen Anzahl von vorhandenen Bildern kann die Zeit für die manuelle Optimierung mehrere Stunden betragen.

Zum Glück gibt es da Plugins, die Bilder automatisch verkleinern und dir bei diesem Problem ordentlich Zeit sparen. Mehr dazu im nächsten Abschnitt.

Die PlugIns, die alles ändern

Plugins können dir bei dem Design deiner Website helfen, deine Besucherzahlen aufzeichnen und vieles mehr. Neue Plugins zu entdecken und neue Funktionen zu deiner Website hinzuzufügen macht Spass. Aaaaber, umso mehr Plugins du aktiviert hast, desto mehr Code muss dein Besucher verarbeiten.

Deswegen bitte ich darum, deine installierten Plugins sehr kritisch unter die Lupe zu nehmen.

Plugins, ..

  • die du nicht benutzt, aber aktiviert sind,
  • die du nicht benutzt und deaktiviert sind,
  • die du gar nicht brauchst,
  • die du ohne großen Aufwand ersetzen kannst (Youtube Embeds, Facebook-Box, etc.),

können komplett gelöscht werden.

Manche Plugins können deinen Blog aber auch schneller machen, sogar ganz ohne Coding-Kenntnisse.

Vier Plugins, die auf keiner WordPress-Seite fehlen sollten, sind:

Short Pixel Image Optimizer

Dieses Plugin automatisiert die Schritte in Abschnitt 4 für dich. Jedes Bild, das du hochlädst, wird optimiert, indem überflüssige Informationen aus der Bilddatei entfernt werden. Praktischerweise optimiert Short Pixel sogar alle Bilder, die schon auf deinem Blog sind (in der Premium Version).

Ich benutze die Premium-Version auf allen meinen Webseiten, nachdem mich das Plugin völlig überzeugt hat.

BJ Lazy Load

Das Plugin BJ Lazy Load könnte kaum simpler in der Benutzung sein — installieren, aktivieren und das wars. Es gibt keine komplizierten Einstellungen, nach der Aktivierung funktioniert es einfach.

Diese WordPress-Erweiterung sorgt dafür, dass Bilder erst geladen werden, wenn sie in den sichtbaren Bereich kommen. Bilder am Ende oder in der Mitte des Blogposts werden also erst später geladen, wenn der Leser sie auch sehen kann — nicht vorher. Das beschleunigt die erste Darstellung der Seite noch einmal deutlich.

WP Super Cache

Dieses Plugin sorgt dafür, dass neue Besucher eine statische Version, mit kleinerer Größe, deines Blogs gezeigt bekommen, die von dem Cache-Plugin erzeugt wurde. Zusätzlich werden bestimmte Daten im Cache des Besuchers gespeichert werden und nicht immer wieder neu abgerufen.

Anstatt den gesamten Blog also immer wieder neu zu laden, wird ein Teil der Website im Browser gespeichert. Und das spart Ladezeit.

WP Super Minify

Nochmal 10% schneller. Ohne zu sehr in die technischen Details zu gehen, die dieses Plugin bereitstellt:

Super Minify minimiert den HTML Code, CSS und Javascript. Also alles das, woraus deine Website besteht.

WordPress schneller machen mit Hilfe eines CDNs

…bedeutet Content Delivery Network.

Ein CDN ist eine tolle Sache und vielleicht mein Lieblingspunkt auf der Speed-Liste. Denn es es erstellt ein Abbild von deiner Website auf verschiedenen Servern weltweit.

Es ist also egal, ob Besucher deinen Blog aus Deutschland, Amerika oder Costa Rica aufrufen — ein Server, mit dem Abbild eures Blogs, steht in der Nähe und verkürzt somit die Ladezeit. Gewaltig

Der Anbieter Cloudflare stellt mehrere Optionen zur Verfügung — auch eine kostenlose :). Zusätzlich optimiert Cloudflare die Ladegeschwindigkeit von Plugins und Widgets, bietet Schutz vor DDOS-Attacken und schaltet eine Firewall vor deine Website.

Die Aktivierung dauert ca. 5 Minuten und ist sehr leicht, da du Schritt für Schritt durch die Installation geführt wirst.

Für den Fall, dass du bei deinem Host nicht direkt auf deine Nameserver zugreifen kannst, kontaktiere einfach den zuständigen Support und bitte darum, die Nameserver manuell ändern zu lassen.

Das Fazit

Am Enden noch eine Warnung. Bevor du Veränderungen/Optimierungen durchführst, sollte ein BackUp gemacht werden, damit wirklich nichts verloren gehen kann.

Außerdem sollte nach jeder De-/Installation eines Plugins einen Websitecheck durchgeführt werden.

Öffne deinen Blog also mal in einem Privaten Fenster im Browser, um zu überprüfen, ob zum Beispiel die Bilder und Widgets richtig dargestellt werden.

Es lohnt sich immer, die Geschwindigkeit des Blogs mit Tools, wie Pingdom, zu überprüfen, da:

  1. Erfolge direkt sichtbar werden &
  2. direkt gehandelt werden kann, falls ein Plugin die Ladezeiten erhöht, obwohl es das Gegenteil erreichen sollte

Wenn du diese Tipps befolgst, sollte dein Blog sehr, sehr viel schneller laden und du mehr glückliche Besucher auf deiner Website willkommen heißen können.

Viel Spass beim Optimieren!

Wie schnell ist deine Seite geworden nachdem du die Tipps angewandt hast? Hast du noch andere Tipps, wie man WordPress schneller machen kann? Lass es mich in den Kommentaren wissen

Beste Grüße,
Dan

P.S.: Wenn dir gefällt, was ich schreibe und du etwas Neues gelernt hast, empfehle ich dir, dich in meine Mailing-Liste einzutragen.

So bleibst du immer auf dem Laufenden & wirst benachrichtigt, sobald ich einen neuen Beitrag veröffentlicht habe.

P.P.S: Du kriegst auch einen exklusiven, geheimen Bonus, der nur für Menschen in meiner Mailing-Liste gedacht ist. Wenn das mal kein Anreiz ist!

Schreibe einen Kommentar


Passend zum Thema:

In dieser ausführlichen Anleitung zeige ich dir, wie du dein Google Ranking nachhaltig verbessern, dich so von deiner Konkurrenz abheben und neue Kunden gewinnen kannst! weiterlesen…