Pace Up Your WordPress Web site in 20 Minutes

Jeder weiß, dass die Seitengeschwindigkeit wichtig ist. Dies ist ein bestätigter Google-Ranking-Faktor für Desktop- und Mobilgeräte, wirkt sich auf die Nutzererfahrung aus und kann sich direkt auf Ihr Endergebnis auswirken.

Langsame WordPress-Websites sind jedoch ein häufiges Problem.

Hier ist die mobile Punktzahl für eine Seite von mir in PageSpeed ​​Insights.

Vor der Optimierung.

Wenn wir die gesamte Website über Ahrefs ‘Site Audit ausführen, bei dem die Ladezeit der Seiten für alle Seiten angezeigt wird, stellen wir fest, dass dies auch nicht die einzige langsam ladende Seite ist. Keiner von ihnen wird mit einer durchschnittlichen Ladezeit von 570 ms massiv schnell geladen.

Vor der Optimierung.

Hier ist dieselbe Seite nach ungefähr 20 Minuten Optimierung der Seitengeschwindigkeit:

Nach der Optimierung.

Und der Rest der Seiten in Site Audit:

Nach der Optimierung.

Der Unterschied ist Tag und Nacht. Die Punktzahl von PageSpeed ​​Insights ist nahezu perfekt und jede Seite wird ziemlich schnell geladen.

In diesem Handbuch werde ich Ihnen in wenigen einfachen Schritten genau zeigen, wie ich das gemacht habe.

  1. Entfernen Sie nicht verwendete Plugins
  2. Schalter DNS Anbieter von Cloudflare
  3. Installieren Sie ein Caching-Plugin
  4. Minimieren Sie Ihren Code
  5. Kombinieren CSS und JavaScript-Dateien
  6. Beseitigen Sie Render-blockierende Ressourcen
  7. Lazy-Load-Bilder und -Videos
  8. Optimieren Sie Google Fonts
  9. Aktivieren Sie das Vorladen
  10. Benutze einen CDN
  11. Optimieren Sie Ihre Bilder

wichtig

Viele der unten empfohlenen Optimierungen verwenden WPRocket, ein kostenpflichtiges Plugin zur Beschleunigung Ihrer WordPress-Website. Ich habe nach Möglichkeit kostenlose Alternativen aufgelistet, aber es ist wichtig zu beachten, dass Plugins manchmal miteinander in Konflikt stehen und Probleme verursachen können. Sie sollten immer testen, wie sie sich auf Ihre Site in einer Staging-Umgebung auswirken, bevor Sie Änderungen an Ihrer Live-Site vornehmen. Hier erfahren Sie, wie Sie eine Staging-Site einrichten.

Schritt 1. Entfernen Sie nicht verwendete Plugins

Wenn Sie keine brandneue WordPress-Website haben, haben Sie wahrscheinlich eine Reihe von Plugins installiert, die Sie im Laufe der Jahre nicht verwenden. Einige davon können sich auf die Seitengeschwindigkeit auswirken. Es lohnt sich daher, alles zu deaktivieren und zu deinstallieren, was Sie nicht als Ausgangspunkt benötigen.

Sei einfach vorsichtig, wenn du das tust. Wenn Sie nicht sicher sind, ob etwas benötigt wird, lassen Sie es dort.

Schritt 2. Wechseln DNS Anbieter von Cloudflare

Websites sind Dateien auf Festplatten (Servern), die mit dem Internet verbunden sind. Und jedes mit dem Internet verbundene Gerät hat eine IP Adresse (z. B. 123.123.12.1).

weil IP Adressen sind schwer zu merken, Domainnamen sind zugeordnet IP Adressen mit DNSsteht für Domain Name System. Sie können sich dies als das Telefonbuch des Webs vorstellen. Wenn Sie eine Domain in Ihren Browser eingeben, a DNS Es wird nachgeschlagen, um den Server zu finden IP Adresse.

Aber hier ist die Sache: Die meisten Leute nutzen das kostenlose DNS Anbieter von ihrem Domain-Registrar, was normalerweise langsam ist.

Wenn Sie es sind, wechseln Sie zu einem schnelleren DNS Anbieter wie Cloudflare.

Melden Sie sich dazu für ein kostenloses Cloudflare-Konto an. Klicken Sie auf “Site hinzufügen”, geben Sie Ihren Domainnamen ein und klicken Sie auf die Schaltfläche.

5 Cloudflare DNS

Wählen Sie den kostenlosen Plan aus und klicken Sie auf “Plan bestätigen”.

Cloudflare gibt Ihnen jetzt die Möglichkeit, Ihre zu überprüfen DNS Einstellungen, bevor Sie fortfahren. Wenn keine Warnungen angezeigt werden, ist es normalerweise sicher, fortzufahren.

Jetzt müssen Sie nur noch Ihre Nameserver mit Ihrem Domain-Registrar austauschen. Die Art und Weise, wie Sie dies tun, variiert zwischen den Registraren. Zögern Sie also nicht, ihren Support zu fragen, wenn Sie sich nicht sicher sind, wie Sie dies tun sollen.

Wenn Sie Google Domains verwenden, gehen Sie wie folgt vor:

6 Nameserver

Schritt 3. Installieren Sie ein Caching-Plugin

Caching ist ein Prozess, bei dem Dateien vorübergehend gespeichert werden, damit sie den Besuchern effizienter bereitgestellt werden können.

Es gibt zwei Haupttypen:

  • Browser-Caching: Speichert “allgemeine” Dateien wie Logos auf der Festplatte der Benutzer, damit diese bei wiederholten Besuchen nicht erneut heruntergeladen werden müssen.
  • Server-Caching: Speichert eine vollständig erstellte “statische” Version einer Seite auf dem Server, sodass sie nicht jedes Mal neu erstellt werden muss, wenn ein neuer Besucher sie anfordert.

WP Rocket macht es einfach, das Caching zu aktivieren. Kaufen, installieren und aktivieren Sie es einfach. Das grundlegende Caching (Server und Browser) ist standardmäßig aktiviert. Wenn Ihre Site reagiert, rufen Sie die Cache-Einstellungen auf und aktivieren Sie das Kontrollkästchen, um das Caching auch für mobile Geräte zu aktivieren.

7 wp Raketen-Caching

Suchen Sie eine kostenlose Option? Versuchen W3 Gesamt-Cache.

Durch die Minimierung werden Leerzeichen und Kommentare aus dem Code entfernt, um die Dateigröße zu verringern. Und kleinere Dateien führen zu schnelleren Ladezeiten.

wp Seitengeschwindigkeit

Wenn Sie WPRocket verwenden, aktivieren Sie die Kontrollkästchen, um sie zu minimieren CSS und JavaScript in den Einstellungen.

8 minimieren

Wenn Sie WPRocket nicht verwenden, installieren und aktivieren Sie Autoptimize und führen Sie dasselbe aus.

Beachten Sie jedoch, dass Sie vor der Live-Bereitstellung immer testen sollten, wie sich dies auf Ihre Website auswirkt. Das Minimieren kann häufig zu fehlerhaftem Code führen, insbesondere wenn es um Javascript geht.

Schritt 5. Kombinieren CSS und JavaScript-Dateien

Die meisten WordPress-Websites enthalten mehrere CSS und JavaScripts-Dateien. Einige sind für Themen, andere für Plugins, und Sie haben möglicherweise auch einige benutzerdefinierte.

Das Kombinieren dieser Dateien kann die Arbeit beschleunigen, hängt jedoch von Ihrem Server-Setup ab.

  • Mit HTTP/1.1, CSS und JavaScript-Dateien werden nacheinander geladen. Das bedeutet, dass eine Datei vollständig geladen werden muss, bevor die nächste geladen werden kann.
  • Mit HTTP/ 2, Dateien werden gleichzeitig geladen. Das heißt mehrfach CSS und JavaScript-Dateien können gleichzeitig geladen werden.

Wenn Ihr Server verwendet HTTP/1.1 Das Kombinieren von Dateien beschleunigt die Arbeit, da weniger Dateien geladen werden müssen. Wenn es verwendet HTTP/ 2, das Kombinieren von Dateien macht nicht unbedingt einen großen Unterschied, da Dateien sowieso gleichzeitig geladen werden können.

Um zu sehen, welche Version Ihre Site verwendet, schließen Sie Ihre Domain an Key an CDNTester.

9 http1 http2

Wenn HTTP/ 2 wird nicht unterstützt, es lohnt sich zu kombinieren CSS und JavaScript-Dateien.

Aktivieren Sie dazu in WPRocket die Kontrollkästchen “JavaScript-Dateien kombinieren” und “Kombinieren” CSS Dateien “in den Einstellungen.

10 wprocket kombinieren css

Wenn Sie Autoptimize verwenden, gibt es zwei Kontrollkästchen, um Dateien zu “aggregieren”. Sie müssen nur wissen, dass diese Dinge auf Ihrer Website manchmal “kaputt machen” können. Es lohnt sich daher zu überprüfen, ob nach der Aktivierung noch alles gleich aussieht und funktioniert. Denken Sie daran, den Cache vorher zu leeren und in einem Inkognito-Fenster nach Änderungen zu suchen. Andernfalls werden die Änderungen möglicherweise nicht in dem angezeigt, was Sie sehen.

Schritt 6. Beseitigen Sie Render-blockierende Ressourcen

Beim Rendern wird Code in eine sichtbare Webseite umgewandelt.

Das Schlüsselwort dort ist “sichtbar”, da eine Webseite nicht immer vollständig geladen werden muss, bevor sie sichtbar ist.

Aus diesem Grund ist es sinnvoll, das Laden von Ressourcen für Inhalte über dem Falz zu priorisieren.

Sie können dies tun, indem Sie das Laden von nicht kritisch verschieben CSS und JavaScript-Dateien, die bis später für Inhalte unterhalb der Falte benötigt werden. Aktivieren Sie dazu in WPRocket die Kontrollkästchen “JavaScript verzögert laden” und “Optimieren” CSS Lieferung.”

11 wprocket CSS optimieren

Wenn Sie WPRocket nicht verwenden, benötigen Sie zwei Plugins: Autoptimize und Async JavaScript.

Aktivieren Sie in den Einstellungen für Autoptimize das Kontrollkästchen „Inline and Defer CSS. ” Klicken Sie dann in den Einstellungen für Async JavaScript auf „Async JavaScript aktivieren“.

Wenn Sie zuvor in PageSpeed ​​Insights das Problem “Renderblockierungsressourcen entfernen” gesehen haben, wird dieses Problem normalerweise behoben.

12 Rendern blockierende Einblicke in die Seitengeschwindigkeit

Schritt 7. Lazy-Load-Bilder und -Videos

Das verzögerte Laden verbessert die Seitengeschwindigkeit, indem das Laden von Bildern und Videos verschoben wird, bis sie auf dem Bildschirm sichtbar sind. Wenn Sie WordPress 5.5+ ausführen, ist das verzögerte Laden von Bildern standardmäßig aktiviert, jedoch nicht für Videos.

Wenn Sie WPRocket verwenden, lösen Sie dieses Problem, indem Sie unter LazyLoad-Einstellungen das Kontrollkästchen “Für Iframes und Videos aktivieren” aktivieren.

13 faule Videos laden

Wenn Sie WPRocket nicht verwenden, funktioniert das kostenlose Lazin Load for Videos-Plugin ähnlich.

Schritt 8. Optimieren Sie Google Fonts

Viele Themen verwenden Google Fonts. Diese Fonts müssen bei jedem Besuch Ihrer Website vom Google-Server heruntergeladen werden. Dies kann ein zeitaufwändiger Prozess sein, da Ihr Server dies tun muss HTTP Anfragen, laden Sie a CSS Laden Sie dann die Schriftart von dem Speicherort herunter, auf den im Stylesheet verwiesen wird. Und das muss für jede Schriftart auf der Seite geschehen.

Wenn Sie WPRocket verwenden, werden Google Fonts-Anforderungen automatisch optimiert. Andernfalls ist das Tauschen der Google-Schriftartenanzeige ein guter Ausgangspunkt.

Schritt 9. Aktivieren Sie das Vorladen

Durch das Vorladen können Sie wichtige Ressourcen definieren, sodass Browser die Priorität der zu ladenden Dateien kennen.

Angenommen, Ihr Code sieht folgendermaßen aus:




Inhalt

Basierend auf diesem Code müsste die JavaScript-Datei aufgrund der Hierarchie zuerst geladen werden. Das ist nicht ideal, weil die CSS Datei ist mit ziemlicher Sicherheit kritischer als der JavaScript-Code.

Der einfachste Weg, dies zu lösen, besteht darin, eine weitere Codezeile wie die folgende hinzuzufügen:

Das weist die Browser an, die zu priorisieren CSS Datei über die JavaScript-Datei, unabhängig von der Hierarchie.

Sie können Preload-Attribute manuell hinzufügen, indem Sie den Code bearbeiten. Dies kann jedoch unübersichtlich und verwirrend werden, es sei denn, Sie wissen, was Sie tun. Es ist viel einfacher, WPRocket zu installieren, was dies automatisch sofort erledigt.

Content Delivery-Netzwerke (CDN) sind Servergruppen, die auf der ganzen Welt verteilt sind. In jeder dieser Websites wird eine Kopie Ihrer Website gespeichert, sodass Benutzer beim Anfordern von Webseiten schneller eine Verbindung herstellen können.

Angenommen, der Server Ihres Webhosts befindet sich in der Vereinigtes Königreich. Wenn jemand Ihre Website von der besucht UNS und du benutzt kein CDNwird die Verbindung zwischen ihrem Gerät und Ihrem Server langsam sein. Wenn jemand von der besucht UNS und du benutzt a CDNDas Gerät stellt eine Verbindung zum nächstgelegenen Server her, wodurch die Verbindung schneller hergestellt werden kann.

Da sind viele ZNS Sie müssen also nur einen auswählen, ihn in WPRocket aktivieren und den eingeben CNAME.

14 wprocket cdn

Schritt 11. Optimieren Sie Ihre Bilder

Lazy-Loading löst viele Probleme im Zusammenhang mit Bildern, hilft jedoch nicht dabei, Bilder zu laden, die über die Falte geladen werden. Je größer sie sind, desto mehr wirken sie sich negativ auf die Ladezeiten aus.

Um dies zu lösen, komprimieren Sie Ihre Bilder mit einem Plugin wie Shortpixel. Installieren Sie es einfach, aktivieren Sie es, gehen Sie zu den Einstellungen und geben Sie Ihre ein API Klicken Sie auf die Schaltfläche “Speichern und zum Massenprozess wechseln” und dann auf “Optimierung neu starten”.

15 kurze Pixel

Wenn Sie feststellen, dass diese von zu geringer Qualität sind, gehen Sie zu den Einstellungen und ändern Sie den Komprimierungstyp in glänzend oder verlustfrei.

16 kurze Pixelkomprimierung

Die Ergebnisse

Schauen wir uns an, wie sich diese Optimierungen anhand einiger beliebter Tools auf unsere Seitengeschwindigkeit ausgewirkt haben.

Hier sind die Vorher- und Nachher-Statistiken für meinen Beitrag in Googles PageSpeed ​​Insights:

1 Seitengeschwindigkeit Einblicke langsam

Vor der Optimierung.

Schnelle Einblicke in 3 Seiten

Nach der Optimierung.

Und hier ist das gleiche von GTMetrix:

18 gtmetrix vorher

Vor der Optimierung.

17 gtmetrix nach

Nach der Optimierung.

Sie können sehen, dass die Seite zuvor in 5,9 Sekunden mit einer Seitengröße von 1,89 MB und 67 Anforderungen vollständig geladen wurde. Nach den Optimierungen sind alle drei Metriken ausgefallen. Die Seitengröße beträgt 695 Kilobyte, die vollständig geladene Zeit beträgt 4 Sekunden und die Anzahl der Anfragen ist um fast 50% gesunken.

Wenn wir alle Seiten der Website in Ahrefs ‘Site Audit überprüfen, sehen wir eine Verbesserung der durchschnittlichen Ladezeit und der Ladezeit des 95. Perzentils um etwa 40%.

4 Site Audit schnell

Abschließende Gedanken

Alles oben hat für meine Site gut funktioniert, und es hat auch für andere Sites gut funktioniert. Es ist jedoch wichtig zu bedenken, dass jede WordPress-Konfiguration anders ist. Möglicherweise verfügen Sie über mehr Plugins, ein klobigeres Thema, ein langsameres Hosting oder mehr Tracking-Skripte von Drittanbietern, die Ihre Website verlangsamen.

Wenn Ihre Seitengeschwindigkeit nach diesen Optimierungen noch einige Verbesserungen vertragen könnte, müssen Sie wahrscheinlich benutzerdefinierte Arbeiten an Ihrer Site ausführen. Es lohnt sich also, einen Entwickler oder Experten für Seitengeschwindigkeit zu beauftragen, um die Dinge etwas genauer zu betrachten.

Wenn Sie weitere Informationen zu bestimmten Themen wünschen, lesen Sie unseren vollständigen Leitfaden zur Seitengeschwindigkeit.

Haben wir etwas Wichtiges in diesem Handbuch verpasst? Ping mich auf Twitter.

Comments are closed.