This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
() translation by (you can also view the original English article)
Egal, ob Sie gerade an Ihrer ersten WordPress-Site oder Ihrer fünfzigsten arbeiten, Sie haben zweifellos festgestellt, dass ihre größte Stärke manchmal zu ihrer größten Schwäche werden kann. Seine unglaubliche Erweiterbarkeit bedeutet, dass es mehr kann als jedes andere CMS, aber der Nachteil ist, dass es überdehnt werden kann und in schrecklich langsame Ladegeschwindigkeiten rutscht.
Schnelle Ladezeiten werden von Jahr zu Jahr wichtiger, da Google sie weiterhin in ihre Ranking-Prozesse einbezieht und wir mehr über die Kosten langsamer Websites in Bezug auf verlorene Besucher und Einnahmen erfahren. Es ist wichtig, dass WordPress-Sites nicht in verzögerte Ladezeiten rutschen dürfen – sie können und sollten alle zu bissigen Performern optimiert werden.
In diesem Artikel werden wir genau eintauchen:
- Welche Ladegeschwindigkeiten sollten Sie erreichen?
- Die Gründe, warum WordPress-Sites langsam werden
- Wie kann man umfassend diagnostizieren, warum Ihre WordPress-Site langsam ist?
- Wie kann man die Probleme beheben, die Sie mit einfachen zugänglichen Methoden entdecken?
Ich arbeite seit 12 Jahren professionell mit WordPress und habe in dieser Zeit viel damit zu tun, was eine Website rasend schnell oder erdrückend langsam laden kann. In diesem Artikel werde ich alles teilen, was ich weiß.
Beginnen wir damit, wie Sie die richtigen Ziele für die Beschleunigung Ihrer WordPress-Site festlegen.
WordPress beschleunigen, aber wozu?
Wie langsam ist „langsam“ für eine WordPress-Site genau? Und wie schnell ist „schnell“? Wie berücksichtigen wir die Variation der Konnektivitätsgeschwindigkeiten? Eine Ladezeit von 3 Sekunden bei Highspeed-Internet kann bei einer langsamen Mobilfunkverbindung 30 Sekunden betragen.
Beginnen wir damit, genau herauszufinden, wie „schnell“ wir unsere WordPress-Sites benötigen.
Abrunden von Hobo Web
Hobo Web hat einen ausgezeichneten Artikel geschrieben, der mehrere Ressourcen und Informationen zur Ladegeschwindigkeit enthält, die wir anstreben sollten. Ich werde nicht das ganze Stück aufwärmen, aber ich möchte einige wichtige Punkte herausgreifen:
Jede zusätzliche Sekunde erhöht die Absprungrate
"Die Absprungwahrscheinlichkeit steigt um 32%, wenn die Ladezeit der Seite von 1 Sekunde auf 3 Sekunden sinkt."
Etwa die Hälfte der Besucher geht nach 3 Sekunden Second
„Seiten mit langsamem Laden frustrieren die Benutzer und wirken sich negativ auf die Herausgeber aus. In unserer neuen Studie „The Need for Mobile Speed“ haben wir festgestellt, dass 53% der mobilen Websitebesuche abgebrochen werden, wenn das Laden der Seiten länger als 3 Sekunden dauert.“
Laden in weniger als 5 Sekunden verdoppelt den Anzeigenumsatz
"Obwohl es mehrere Faktoren gibt, die sich auf den Umsatz auswirken, geht unser Modell davon aus, dass Publisher, deren mobile Websites in 5 Sekunden geladen werden, bis zu zweimal mehr mobile Werbeeinnahmen erzielen als solche, deren Websites in 19 Sekunden geladen werden."
Google sagt: Bereit für die Interaktion in < 5 Sekunden auf langsamem 3G
Laut Google sollte der Inhalt Ihrer Website in weniger als 5 Sekunden bei einer langsamen 3G-Verbindung geladen und zur Interaktion bereit sein:
Es ist wichtig darauf hinzuweisen, dass dies nicht bedeutet, dass jede einzelne Ressource auf einer Seite innerhalb von 5 Sekunden geladen werden muss. Das ist ein sehr schwierig zu erreichendes Ziel mit einer langsamen 3G-Verbindung, selbst auf Ressourcen-Light-Sites.
Dies bedeutet, dass ein Besucher in dieser Zeit genügend Ressourcen zum Laden benötigt, damit er mit der Website interagieren kann, auch wenn der Rest der Ressourcen im Hintergrund geladen wird.
Ziel: 3 - 5 Sekunden auf dem Handy
Wir können das oben Gesagte so zusammenfassen, dass eine allgemeine Faustregel lautet, dass Ihre Website bei einer mobilen Verbindung innerhalb von 3 - 5 Sekunden geladen werden sollte, und je schneller, desto besser. Wenn Sie Ihre Ladezeit auf 2 Sekunden oder 1 Sekunde oder sogar 500 ms bringen können, profitieren Sie von jedem gespeicherten Moment.
Beachten Sie, dass Sie sich immer darauf konzentrieren sollten, Ihre Ladegeschwindigkeit auf Mobilgeräten auf den gleichen Stand zu bringen, weil:
- Die Versorgung mobiler Besucher ist unerlässlich
- Eine Website, die auf Mobilgeräten schnell geladen wird, wird daher auch schnell auf dem Desktop geladen.
Nun, da wir wissen, dass unser Ziel für die Ladegeschwindigkeit bei einer mobilen Verbindung weniger als 3 - 5 Sekunden beträgt, lassen Sie uns darüber sprechen, wie Sie eine WordPress-Site auf diese Zielzeit beschleunigen können.
Warum ist WordPress so langsam? 7 Probleme
Es besteht eine sehr gute Chance, dass Ihre WordPress-Site ohne richtige Optimierung langsamer lädt als das Ziel von 3 - 5 Sekunden. Um dies zu beheben, müssen Sie die häufigsten Probleme verstehen, die dazu führen, dass eine WordPress-Site langsam lädt.
Es gibt sieben Hauptprobleme, die auftreten; Lassen Sie uns jeden kurz definieren, bevor wir uns damit befassen, wie Sie damit umgehen können.
1. Dateien zu früh laden
Wenn ein Besucher den oberen Teil eines Artikels liest, müssen keine Bilder geladen werden, die erst am Ende des Artikels angezeigt werden.
2. Zu viele separate Dateien laden
Laden Sie die minimal mögliche Anzahl separater Dateien. Es ist besser, eine einzelne Datei mit 100 KB zu haben, als 10 Dateien mit jeweils 10 KB.
3. Laden unnötiger Daten
Es ist in WordPress sehr üblich, Plugins (oder sogar den Kern von WordPress selbst) zu haben, die Dateien laden, die nicht oder nur teilweise verwendet werden. Jedes Bit unnötiger Daten erhöht die Ladezeit.
4. Dateigrößen zu groß
Wenn Site-Dateien wie CSS, JS und Bilder zu groß sind, kann dies die Ladezeiten drastisch verlängern.
5. Hosting-Dienst zu langsam
Wenn bei einem Hosting-Dienst nicht genügend Hardware verwendet wird, z. B. CPUs mit geringer Leistung / unzureichender RAM, oder keine geeigneten Optimierungsprozesse verwendet werden, kann dies dazu führen, dass Ihre WordPress-Site verzögert.
6. Kein Caching verwenden
Wenn WordPress zu viel Verarbeitung auf dem Server durchführen muss, kann dies zu einer erheblichen Verzögerung führen, bis der Inhalt geladen werden kann. Caching kann dieses Problem lindern.
7. CDN nicht verwenden
Wenn sich Ihr Besucher und Ihre WordPress-Site auf gegenüberliegenden Seiten des Planeten befinden, kann dies zu einer erheblichen Verzögerung der Ladezeit führen. Ein Content Delivery Network (CDN) kann dieses Problem lösen.
Aber warum ist meine WordPress-Site so langsam? Probleme Schritt für Schritt diagnostizieren
Jetzt wissen Sie, was die Probleme sind, die eine langsam ladende Site verursachen können, aber Sie müssen immer noch genau wissen, welche dieser Probleme Ihre eigene Site hat, um Lösungen richtig anwenden zu können.
Wir werden uns ansehen, wie Sie die Probleme 1 bis 4 testen, wie im vorherigen Abschnitt beschrieben. Wir konzentrieren uns zuerst auf diese vier Probleme, da sie auf einer bestimmten Website möglicherweise ein Problem darstellen oder auch nicht.
Die Probleme 5 bis 7 sollten auf jeder Site durch die Verwendung eines schnellen Hosts, Caching und CDN behoben werden, auf die wir später eingehen werden.
Während wir diese Schritte durchlaufen, werde ich mein Geld dort einsetzen, wo mein Mund ist, und Ihnen die Testergebnisse von meiner eigenen persönlichen Website zeigen. (Es ist keine WordPress-Site, aber die Optimierungsmethoden sind die gleichen).
Im Vergleich dazu zeige ich Ihnen die Ergebnisse der Demoseite eines sehr beliebten WordPress-Themen. (Das Thema wird namenlos bleiben, da das Ziel nicht darin besteht, jemanden herauszufordern, sondern zu zeigen, wie die Ladegeschwindigkeit auf WordPress-Sites ohne richtige Optimierung außer Kontrolle geraten kann).
Browserbasierte Testtools
Es gibt mehrere Websites, mit denen Sie die Geschwindigkeit Ihrer Websites testen können, aber zu diesem Zeitpunkt sind sie nicht mehr wirklich erforderlich, da die in die Browser integrierten Tools hervorragend sind. Ich werde Sie durch die Verwendung einiger Tools führen, die in Chromium-basierten Browsern und Firefox enthalten sind.
Hinweis: Chromium-basierte Browser sind so ziemlich jeder Browser außer Firefox, z.B. ungoogled-chromium, Vivaldi, das neueste Edge, Opera usw. Daher sollten Sie den Browser Ihrer Wahl verwenden, um auf diese Tools zuzugreifen.
Ein kurzer Punkt, den Sie beim Testen beachten sollten:
- Verwenden Sie ein "Privates Fenster" oder "Inkognito-Modus", um sicherzustellen, dass Erweiterungen deaktiviert sind, da sie die Ladegeschwindigkeit beeinträchtigen können.
Schritt 1: Testen Sie die Ladegeschwindigkeit „Langsam 3G“
Wir werden ein paar Geschwindigkeitstests durchführen, um zu sehen, wie nahe wir einer interaktionsbereiten Website in weniger als 5 Sekunden auf langsamem 3G sind.
Öffnen Sie in einem Chromium-basierten Browser das Fenster "Inkognito-Modus", indem Sie das Menü im Bild unten aufrufen, und laden Sie dann Ihre Website.
Öffnen Sie nun die Entwicklertools, indem Sie dieses Menü oben rechts im Browser aufrufen:
Sobald die Tools geöffnet sind, gehen Sie zur Registerkarte Netzwerk, aktivieren Sie das Kontrollkästchen Cache deaktivieren und ändern Sie die Dropdown-Liste am rechten Ende der Symbolleiste in Slow 3G. Dies emuliert einen erstmaligen Besuch von jemandem mit einer ziemlich schlechten Mobilfunkverbindung. Die Einstellungen sollten so aussehen:
Aktualisieren Sie die Seite und beobachten Sie, wie das Panel das Laden aller Ressourcen Ihrer Website verfolgt.
Wir suchen nach dem Laden der Seite nach den Zahlen am unteren Rand des Panels, insbesondere nach der blauen und der roten Zahl. Ohne auf technische Details einzugehen, ist die blaue Zahl, wenn die Basisressourcen wie Text geladen wurden, und die rote Zahl, wenn die visuelleren Ressourcen wie Stile und Bilder geladen wurden. Der Punkt, an dem mit einer Site interagiert werden kann, liegt normalerweise irgendwo zwischen der blauen Zahl und der roten Zahl.
Dies sind die Zahlen von meiner persönlichen Seite:
Wie Sie sehen, habe ich mich gerade unter die 5-Sekunden-Ladezeit der roten Zahl eingeschlichen, obwohl der Punkt, an dem Sie mit meiner Website interagieren können, tatsächlich näher an der blauen Zahl liegt.
Und das sind die Zahlen von der beliebten WordPress-Thema-Demo-Site:
26 Sekunden bei der blauen Zahl und über einer Minute bei der roten Zahl. Autsch. Nicht einmal annähernd die Ladezeit von 5 Sekunden, die wir suchen. Tatsächlich zwischen 5 und 14 Mal langsamer als das Ziel.
Es ist ziemlich klar, dass diese Website die Ladegeschwindigkeit verfehlt, also ist die nächste Frage, warum? Um diese Frage zu beantworten, werden wir beginnen zu prüfen, welche der oben beschriebenen Probleme Auswirkungen haben könnten.
Schritt 2: Überprüfen Sie die Firefox-Leistungsanalyse
Öffnen Sie Ihre Website in einem privaten Fenster in Firefox:
Öffnen Sie die "Netzwerktools", indem Sie in das Menü oben rechts von Firefox gehen, Web Developer und dann Netzwerk auswählen:
Sobald die Netzwerktools angezeigt werden, klicken Sie auf die kleine Schaltfläche in der unteren rechten Ecke, die wie eine Stoppuhr aussieht:
Dadurch wird eine Leistungsanalyse eingeleitet, die bewertet, was während eines ersten Besuchs (keine zwischengespeicherten Ressourcen) oder eines nachfolgenden Besuchs (einige zwischengespeicherte Ressourcen) passiert.
Hier die Ergebnisse meiner persönlichen Seite:
Das untere Tortendiagramm und die Tabelle stellen einen erstmaligen Ladevorgang dar, und das obere Diagramm und die obere Tabelle stellen einen nachfolgenden Ladevorgang dar, wenn ein Besucher einige Ressourcen in seinem Browser zwischengespeichert hat.
Hier sind ein paar Dinge zu beachten, die in Kürze relevant werden:
- Sie werden sehen, dass ich nur 1 JS-Datei und 0 CSS-Dateien habe - mein CSS ist in der HTML-Datei integriert
- Sie werden auch sehen, dass nur zwei Bilder geladen sind – diese Seite enthält tatsächlich 6 Bilder, aber ich lade sie nur bei Bedarf
- Ich habe insgesamt nur 4 Seitenanfragen
- Die übertragene Gesamtgröße beträgt 183,04 KB
Und die Ergebnisse von der Thema-Demo-Site:
Diese Ergebnisse sind etwas anders:
- 11 JS-Dateien und 5 CSS-Dateien
- 41 Bilder
- Insgesamt 59 Seitenaufrufe
- Die übertragene Gesamtgröße beträgt 5.237,26 KB
Diese Ergebnisse beginnen, ein Bild davon zu zeichnen, wo die Probleme liegen, und tatsächlich stimmen sie mit den Problemen 1 bis 4 überein, die wir zuvor skizziert haben:
1. Dateien zu früh laden
Bilder werden geladen, bevor sie benötigt werden; Ich habe 14 gezählt, die in der von mir verwendeten Ansichtsfenstergröße sichtbar waren, was bedeutet, dass die restlichen 27 später geladen werden konnten.
2. Zu viele separate Dateien laden
Es sind zu viele JS- und CSS-Dateien vorhanden; 11 JS und 5 CSS, wenn Sie normalerweise nur eines von beiden benötigen.
Dies führt zusammen mit dem frühen Laden von Bildern zu 41 unnötigen Seitenaufrufen.
3. Laden unnötiger Daten
Wir können es noch nicht mit Sicherheit sagen, aber bei 59 Seitenanfragen und über 5 MB Transfer besteht eine ziemlich gute Chance, dass einige Daten geladen werden, die nicht wirklich benötigt werden.
4. Dateigrößen zu groß
Die Gesamtmenge der übertragenen Daten ist 28-mal größer als meine Website. Dies ist sicherlich eine komplexere Site als meine, aber keineswegs auch nur annähernd 28-mal komplexer, was bedeutet, dass viele unnötige Daten übertragen werden.
In den Ergebnissen der Leistungsanalyse sehen wir 2.783,51 KB Bilder, was etwas mehr als die Hälfte der Gesamtdaten ist. Bei 40 Bildern sind das durchschnittlich etwa 68 KB pro Bild, was für den Nennwert in Ordnung ist. Daher warten wir im nächsten Schritt auf weitere Informationen, bevor wir entscheiden, ob die Dateien zu groß sind.
Als nächstes können wir uns die JS-Dateien im Wert von 2.282,71 KB ansehen, 207 KB pro Datei. Im Gegensatz dazu ist jede dieser Dateien 29-mal größer als alle JS auf meiner gesamten Website. Die Gesamtmenge an JS ist 326-mal mehr als auf meiner gesamten Website. Wie bereits erwähnt, ist die Themen-Demo-Site sicherlich komplexer als meine eigene, aber keineswegs 326-mal komplexer. Es gibt viel Spielraum zum Verringern der JS-Dateigröße.
Die Analyse zeigt uns auch, dass die Thema-Demo-Site 1.233,16 KB CSS enthält, von denen jedoch nur 148,18 KB übertragen werden. Meine persönliche Seite hat ihr CSS inline im HTML, weshalb sie nicht in der Analyse erscheint, aber im Gegensatz dazu hat sie vor der Verarbeitung eine Dateigröße von 9,5 KB. Auch hier ist die Themen-Demo-Site komplexer, aber nicht 129-mal komplexer. Es gibt auch viel Spielraum für die Verringerung der CSS-Dateigröße.
Schritt 3: Lighthouse-Leistungsaudit
Als nächstes werden wir eine zweite Wirtschaftlichkeitsprüfung durchführen, um die bisher vorliegenden Informationen zu bestätigen und uns dabei zu helfen, genauere Anweisungen zu den Bereichen zu geben, die unserer Aufmerksamkeit bedürfen.
Chromium-Browser werden mit einem Website-Audit-Tool namens „Lighthouse“ geliefert. Dies ist das gleiche Tool, das die Google Page Speed-Website antreibt, aber direkt im Browser verfügbar ist.
Um darauf zuzugreifen, während Ihre Site noch in einem Inkognito-Fenster geöffnet ist, gehen Sie in den Entwicklertools zum Tab Audits. Stellen Sie Gerät auf Mobil, deaktivieren Sie alle Audits außer Leistung, lassen Sie Drosselung auf Simulated Fast 3G, 4x CPU Slowdown eingestellt und lassen Sie Speicher löschen aktiviert. Klicken Sie auf die Schaltfläche "Run audits" (Prüfungen ausführen), um die Leistungsprüfung zu starten:
Dies sind die Audit-Ergebnisse meiner persönlichen Seite:
Wie Sie sehen, hat die sorgfältige Optimierung zu einer Punktzahl von 100 von 100 geführt, bei der alle Audits bestanden wurden. Beachten Sie, dass der Wert für die Zeit bis zur Interaktivität 1,9 Sekunden beträgt. Diese Prüfung bezieht sich auf simuliertes schnelles 3G und nicht auf langsames 3G, liegt jedoch deutlich unter der von Google empfohlenen Geschwindigkeit von 5 Sekunden.
Dies sind die Audit-Ergebnisse der Thema-Demoseite (identifizierende Informationen entfernt):
Das ist ein ziemlich grobes Ergebnis. Die Time to Interactive-Geschwindigkeit beträgt 12,4 Sekunden, und ohne emuliertes langsames 3G zu sein, verfehlt es die von Google empfohlene Geschwindigkeit um 7,4 Sekunden.
Die Abschnitte Opportunities und Diagnostics geben uns eine Art Aufgabenliste, die wir erledigen müssen, und wie erwartet stimmen die Aufgaben mit den Problemen überein, die wir im letzten Abschnitt identifiziert haben. Jeder dieser Abschnitte kann erweitert werden, um mehr Details zu zeigen, was getan werden sollte, um die Website zu beschleunigen. Wir werden im nächsten Abschnitt über Möglichkeiten sprechen, Maßnahmen zu ergreifen, aber lassen Sie uns zunächst einige der Punkte mit der höchsten Priorität in diesem Audit genauer betrachten.
Bilder werden zu früh geladen
Zuerst sehen Sie oben in der Liste der Chancen Offscreen-Bilder verschieben. Dies bedeutet, dass Bilddateien geladen werden, bevor sie benötigt werden, und daher unterstützt das Audit, was wir im letzten Abschnitt festgestellt haben. Es schätzt, dass das Laden von Bildern später satte 10 Sekunden Ladezeit einsparen könnte. Daher könnte allein diese eine Optimierung die Zeit bis zur interaktiven Messung möglicherweise unter das 5-Sekunden-Ziel senken.
Das Erweitern des Abschnitts zeigt, dass 31 Bilder geladen werden, bevor sie benötigt werden, sogar mehr als meine anfängliche Schätzung von 27. Die geschätzten Daten, die möglicherweise gespeichert werden könnten, belaufen sich auf 2.021 KB. Das ist riesig. (Identifizierende Informationen entfernt):
Einige Bilddateien zu groß
Die aufgeführte Gelegenheit mit der nächsthöchsten Priorität schätzt, dass 2,4 Sekunden Ladezeit eingespart werden könnten, wenn die Site „Bilder in der richtigen Größe“ hätte. Im letzten Abschnitt haben wir gesehen, dass die Gesamtdateigröße aller Bilder der Seite ziemlich groß war, aber wir konnten nicht feststellen, ob einzelne Bilder zu groß waren. Die Erweiterung dieses Abschnitts des Audits zeigt uns, dass 9 Bilder tatsächlich zu groß sind und erheblich optimiert werden könnten, wodurch möglicherweise 487 KB eingespart werden (identifizierende Informationen entfernt):
Ungenutztes CSS wird geladen
Wir haben bereits erwähnt, dass wahrscheinlich einige unnötige Daten geladen wurden, und hier sehen wir, dass dies der Fall ist. Das Audit schätzt, dass 0,75 Sekunden eingespart werden könnten, indem ungenutztes CSS zurückgestellt, d. h. nicht geladen wird. Das Erweitern des Abschnitts zeigt, dass vier CSS-Dateien weder ganz noch teilweise verwendet werden und 135 KB Daten (identifizierende Informationen entfernt):
Problem 5, kein Problem – Prüfung der Servergeschwindigkeit bestanden
Ich möchte auch auf etwas hinweisen, das zu Gunsten dieser Themen-Demo-Site funktioniert, und zwar ist der Server, auf dem sie gehostet wird, bissig. Beachten Sie, dass Punkt 6 in den bestandenen Audits hervorhebt, dass der Server nur 350 ms brauchte, um zu antworten und mit dem Zurücksenden von Daten zu beginnen.
Im Gegensatz dazu ist hier ein Beispiel für eine Site, die diese Prüfung nicht bestanden hat, wobei ihr Server die Site aufgrund der langsamen Reaktionszeit eine zusätzliche halbe Sekunde kostet:
Diese Metrik gibt uns kein genaues Feedback zur Qualität der Server eines Hosts. Eine rote Antwort bedeutet nicht, dass der Host schlecht ist, denn es kann eine Konfigurationsoption sein, die die langsame Antwort verursacht. Ein Ergebnis im grünen Bereich schließt jedoch aus, dass der Host schlecht ist, denn wenn er es wäre, wäre er nicht in der Lage, eine Antwortzeit für das Bestehen eines Audits zu generieren.
Zusammenfassung, warum diese WordPress-Site langsam ist
Nachdem wir nun unseren schrittweisen Bewertungsprozess durchlaufen haben, können wir einige der wichtigsten Gründe identifizieren, warum die von uns untersuchte Theme-Demo-Site so langsam ist, und sie in die Probleme 1 bis 4 einordnen, die wir zuvor definiert haben:
1. Dateien zu früh laden
31 Bilder werden zu früh geladen, was zu einer Wartezeit von über 2 MB bei der Übertragung führt.
2. Zu viele separate Dateien laden
11 JS-Dateien und 5 CSS-Dateien statt jeweils einer.
3. Laden unnötiger Dateien
135 KB ungenutztes CSS werden geladen.
4. Dateigrößen zu groß
9 der 41 Bilder sind zu groß, ein Überschuss von 487 KB.
Zusätzliche Punkte
Wir haben anhand der TTFB-Metrik im Performance-Audit gesehen, dass der Server dieser Site schnell reagiert, sodass Problem 5 des langsamen Hostings für diese Site kein Problem darstellt. Das langsame Laden war auf andere Probleme zurückzuführen.
Ob Caching und ein CDN verwendet wird, Problem 6 und Problem 7, das muss nicht Teil eines Evaluierungsprozesses sein, da Sie bereits wissen, ob Sie Caching und ein CDN eingerichtet haben oder nicht. (Mehr dazu im nächsten Abschnitt).
Wie kann man WordPress beschleunigen? 7 Lösungen
In Ordnung, jetzt sind wir bereit, in die Praxis einzusteigen, in der wir die Arten von Problemen lösen, die Sie auf der von uns untersuchten Themen-Demo-Site gesehen haben. Leider kann ich diese Site nicht reparieren, aber wenn und wenn dieselben Probleme auf Ihren eigenen WordPress-Sites auftauchen, sollten Sie Folgendes tun.
Es stehen mehrere Plugins zur Verfügung, die die meisten Lösungen verarbeiten können, die ich erstellen möchte. Zufällig gibt es jedoch ein kostenloses Plugin von SiteGround, den Sponsoren dieses Beitrags, die in Verbindung mit ihrem WordPress-Hosting-Service jede einzelne der folgenden Lösungen implementieren können.
Sehen Sie sich weitere Details zu ihrem Angebot an und erhalten Sie über Themeforest bis zu 70% Rabatt auf ihr verwaltetes WordPress-Hosting:
Das Plugin heißt SG Optimizer und kann von wordpress.org heruntergeladen werden.
Hinweis: Um dieses Plugin zu verwenden, müssen Sie SiteGround als Ihren Host verwenden, da es mit der WordPress-spezifischen Konfiguration und Optimierung verbunden ist, die SiteGround auf ihren Servern durchführt.
Sie können natürlich jede beliebige Kombination von Plugins verwenden, um jede der folgenden Lösungen zu implementieren, aber da SG Optimizer sich um alle kümmern kann, werde ich es verwenden, um Beispiele bereitzustellen.
1. Dateien zu früh laden
Lösung: Immer Lazy Load
Lazy Loading ist eine Technik zur Seitenoptimierung, bei der nur die Bilder, die sich im sichtbaren Bereich der Seite befinden, sowie die Bilder, zu denen gescrollt werden soll, sofort geladen werden. Wir haben in unserem vorherigen Beispiel gesehen, dass Lazy Loading große Auswirkungen haben kann und den Unterschied zwischen einer Site, die mit der erforderlichen Geschwindigkeit geladen wird, und einer Site mit schädlicher Verzögerung ausmachen kann.
Lazy Loading kann direkt in ein Theme integriert werden, aber in WordPress wird es typischerweise über ein Plugin aktiviert.
Im SG Optimizer Plugin kann es im Bereich Bildoptimierung durch Anklicken dieser Schalter aktiviert werden:
Es lohnt sich zu wiederholen: Wenn unsere Themen-Demoseite dieses Plugin installiert und diese Schalter umgelegt hätte, hätten sie über 2 MB und 10 Sekunden Ladezeit gespart und möglicherweise die von Google empfohlene Zeit erreicht.
2. Zu viele separate Dateien laden
Lösung: Kombinieren Sie JS- und CSS-Dateien
Der Grund, warum Sie nicht mehr als eine JS- oder CSS-Datei benötigen, ist, dass Sie alle separaten Dateien durch einen automatisierten Prozess zu einer zusammenfassen können. Dies geschieht normalerweise auch mit einem Plugin, sodass Ihr CSS und JS nach Bedarf neu kombiniert werden können, wenn Sie Dinge zu Ihrer Site hinzufügen und entfernen.
In SG Optimizer können Sie das Kombinieren im Bereich Frontend-Optimierung aktivieren, indem Sie die Schalter Minify JavaScript Files und Minify CSS Files umlegen:
3. Laden unnötiger Daten
Lösung: Schalten Sie alles bis auf das Wesentliche aus
Wenn Plugins aktiv sind, wenn sie für den Betrieb einer Website nicht entscheidend sind, ist dies eine der führenden Möglichkeiten, um eine ganze Reihe von CSS- und JS-Dateien zu laden, die Sie wirklich nicht benötigen.
Seien Sie streng beim Aussortieren von Plugins aus Ihrem Setup. Wenn es eine Möglichkeit gibt, Ihre Site ohne ein bestimmtes Plugin zu betreiben, tun Sie dies. Auch wenn sie keine verknüpften CSS- oder JS-Dateien zum Laden haben, fügt jedes Plugin Ihrem Server Verarbeitungslast hinzu. Der Nutzen jedes Plugins muss klar und signifikant sein, ansonsten schneide es locker.
Gehen Sie außerdem die Einstellungen der Plugins durch, die Sie behalten müssen, und prüfen Sie, ob Konfigurationsoptionen vorhanden sind, mit denen Sie weniger Ressourcen laden können. Wenn ein Plugin beispielsweise Untermodule hat, deaktivieren Sie so viele wie möglich. Wenn es benutzerdefinierte Stile bietet, versuchen Sie, diese zu vermeiden. Seien Sie so spartanisch wie möglich und denken Sie daran, dass jede zusätzliche Sekunde Ladezeit zu verlorenen Besuchern führt.
Ein zusätzlicher Punkt ist, dass WordPress selbst automatisch Dateien lädt, die Ihrer Website Emoji-Bilder hinzufügen. Dies fällt für die meisten Websites direkt in die Kategorie der unnötigen Daten. Um zu verhindern, dass WordPress Emojis lädt, können Sie im Bereich Frontend-Optimierungen von SG Optimizer die Option Emojis deaktivieren aktivieren:
4. Dateigrößen zu groß
Lösung Teil 1: HTML, JS und CSS minimieren
An dieser Stelle haben Sie die Menge an HTML, JS und CSS auf ein Minimum reduziert und Ihr JS und CSS in einzelnen Dateien zusammengefasst. Jetzt können Sie sicherstellen, dass diese Dateien so klein wie möglich sind, indem Sie etwas tun, das als Minimierung bezeichnet wird.
Durch das Minimieren von textbasierten Dateien wie HTML, JS und CSS werden alle Leerräume und Zeilenumbrüche entfernt. Dadurch können Dateien auf die Hälfte ihrer früheren Größe reduziert werden.
Wie beim Kombinieren erfolgt das Minifizieren für WordPress über ein Plugin, sodass Dateien bei Bedarf erneut minimiert werden können.
Im SG Optimizer-Plugin geschieht dies im Bereich Frontend-Optimierung mit den gleichen Schaltern, die das Kombinieren aktivieren. Schalten Sie alle drei ein:
Lösung Teil 2: Bilder komprimieren
Wir haben in unserer Themen-Demo-Site-Prüfung gesehen, dass 487 KB mit weiterer Bildkomprimierung hätten eingespart werden können.
Im Allgemeinen sollten Bilder richtig optimiert und komprimiert werden, bevor sie einer Site hinzugefügt werden, aber manchmal haben Sie nicht die Möglichkeit und müssen Bilder im Laufe der Zeit optimieren.
SG Optimizer kann vorhandene und neue Bilder über den Abschnitt Bildoptimierung optimieren. Aktivieren Sie den ersten Schalter, und wenn Sie vorhandene Bilder optimieren müssen, klicken Sie auf die Schaltfläche Optimierung starten:
Lösung Teil 3: Verwenden Sie die GZIP-Komprimierung
Ich bin sicher, Sie haben die Erfahrung gemacht, Dateien herunterzuladen, die gezippt wurden, d. h. komprimiert, damit sie kleiner und schneller übertragen werden können. Nun, im Grunde kann das Gleiche mit Ihrer Site über GZIP gemacht werden, wodurch sie kleiner und schneller wird.
Wie bei vielen unserer bisherigen Lösungen erfolgt die Aktivierung von GZIP bei WordPress über ein Plugin.
Wechseln Sie in SG Optimizer zum Abschnitt Environment Controls und legen Sie diesen Schalter um:
5. Hosting-Dienst zu langsam
Lösung: Wählen Sie einen schnellen, optimierten Host
Wenn Sie Hosts bewerten, versuchen Sie, die Seite auf ihrer Website zu finden, die Informationen zu ihren Rechenzentren und ihrem Technologie-Stack enthält. Dies ist ein etwas schwieriger zu fassendes Thema als die anderen, die wir bisher besprochen haben, aber sehen Sie sich an, was das Unternehmen dazu zu sagen hat, wie es dafür sorgt, dass seine Server Websites schnell bereitstellen. Besitzen sie ein eigenes Rechenzentrum? Wenn ja, wo ist es und wie zuverlässig ist es? Wenn nicht, auf welchen Rechenzentren welcher Firma laufen sie? Google-Cloud? AWS? Wie seriös sind diese Rechenzentren?
Etwas einfacher zu bewerten ist bei einem Host für WordPress jedoch, ob er Systemoptimierungen anbietet, die explizit für WordPress-Sites erstellt wurden. Sie haben beispielsweise bereits in den oben behandelten Lösungen gesehen, wie SiteGround das SG Optimizer-Plugin als Schnittstelle zu Servern anbietet, die so konfiguriert sind, dass sie bei der Optimierung von WordPress-Sites helfen. Versuchen Sie, einen Host zu finden, der WordPress kennt und spezielle Maßnahmen unternimmt, um darauf zu reagieren.
6. Kein Caching verwenden
Lösung: Verwenden Sie mehrere Caching-Ebenen
Caching, also das Speichern von Daten für eine schnellere Bereitstellung, kann mit einer WordPress-Site auf mehreren Ebenen gesteuert werden. Wie bei vielen der oben genannten Lösungen wird das Caching in WordPress über ein Plugin implementiert, und bei einigen Hosts müssen auch Einstellungen für das Control Panel aktiviert werden.
Browser-Caching
Die erste dieser Ebenen befindet sich im Browser selbst. Dem Browser können Regeln mitgeteilt werden, wie lange er Dateien von Ihrer Site speichern soll. In SG Optimizer können Sie im Abschnitt Umgebungsoptimierung den Schalter Browser-Caching umlegen, um die Dauer zu verlängern, in der zwischengespeicherte Ressourcen im Browser gespeichert werden:
Sie können SG Optimizer auch die Strings entfernen lassen, die standardmäßig von WordPress am Ende von Dateinamen hinzugefügt werden, was das Browser-Caching weiter unterstützt. Dies geschieht im Abschnitt Frontend-Optimierung:
Server-Caching
Je nach Host und Caching-Plugin, das Sie verwenden, gibt es verschiedene Arten von Caching, die auf dem Server passieren können.
Standardmäßig muss jedes Mal, wenn eine Person eine Webseite besucht, das Ganze von WordPress generiert werden, indem Inhalte aus der Datenbank mit Informationen aus Ihren Theme- und Plugin-Dateien kombiniert werden. Beim Caching auf dem Server wird eine Kopie der generierten Inhalte gespeichert, sodass die nächste Person diese gespeicherte Kopie einfach laden kann, anstatt darauf zu warten, dass die Seite erneut von Grund auf neu erstellt wird.
Wenn Sie SiteGround-Hosting plus SG Optimizer verwenden, erhalten Sie Zugriff auf Dynamic Caching und Memcached. (Jeder von ihnen muss vor der Verwendung mit WordPress im Kontrollfeld des Hosting-Kontos aktiviert werden).
Beide werden im Super Cacher-Bereich des SG Optimizer-Plugins aktiviert, indem der Schalter Dynamic Caching aktiviert wird:
Und der Memcached-Schalter:
7. Kein CDN verwenden
Lösung: Verwenden Sie ein CDN!
Selbst wenn Ihre Site für Sie super schnell lädt, bedeutet dies nicht unbedingt, dass sie für jemanden, der weiter vom Server entfernt ist als Sie, so schnell geladen wird. Um sicherzustellen, dass alle Ihre Website schnell laden, verwenden Sie am besten ein CDN oder Content Delivery Network.
Ein CDN ist ein Netzwerk von zusätzlichen Servern auf der ganzen Welt, auf denen Ihre Website dupliziert wird. Anstatt Ihre Site von ihrem ursprünglichen Rechenzentrum zu laden, lädt ein Besucher sie stattdessen vom nächstgelegenen CDN-Punkt.
Um zu veranschaulichen, wie dies funktionieren kann, zeigt die folgende Abbildung sowohl die eigenen Rechenzentren von SiteGround in Orange als auch die CDN-Punkte, in die sie integriert sind, in Blau:
Beachten Sie, wie viel näher die CDN-Server an Menschen in Ozeanien, Südamerika, Afrika und einem Großteil Europas und Asiens sind.
Meiner Erfahrung nach bieten die meisten Hosts keinen Zugang zu einem CDN und es muss separat organisiert werden, oder wenn sie ein integriertes CDN haben, gibt es einen zusätzlichen Preis für die Nutzung. Bei SiteGround hingegen ist die Nutzung des integrierten CDN(Cloudflare) ohne Aufpreis inklusive.
Eine Bonuslösung
Manchmal, nachdem Sie alle oben genannten Schritte ausgeführt haben, stellen Sie möglicherweise fest, dass Ihre Website immer noch zu langsam ist, und der Grund könnte sein, dass Sie nur ein schlecht entwickeltes Thema haben. Wenn der Entwickler Ihres Themes nicht gewissenhaft war, wie er den Code erstellt hat, der Ihre Website ausführt, kann nicht viel getan werden, ohne dass er eine vollständige Optimierung durchführt.
Wenn Sie der Meinung sind, dass Ihr Thema der größte Übeltäter für Ihre langsame Website sein könnte, versuchen Sie, vorübergehend ein paar verschiedene Themen auszutauschen und zu sehen, wie groß die Abweichungen sind. Wenn das Ändern von Designs die Ladegeschwindigkeit erheblich beschleunigt, wissen Sie, dass Sie leider einen Blindgänger haben, und es ist an der Zeit, ein neues Design zu erhalten, das besser für schnelles Laden geeignet ist.
Jetzt sind Sie bereit, schnell zu gehen
Ich habe absolut alles geteilt, was ich aus meiner 12-jährigen Erfahrung mit dem superschnellen Laden von WordPress-Sites weiß, und jetzt musst du nur noch die Evaluierungsschritte und Lösungen implementieren, die ich für dich festgelegt habe.
Die Ladegeschwindigkeit der Website wird angesichts der potenziell hohen Kosten einer schlechten Optimierung immer noch schockierend übersehen. Es ist von entscheidender Bedeutung und etwas, das sich jeder Website-Administrator zur Aufgabe machen sollte, um intim zu lernen und zu meistern.
Zielen Sie auf 100 von 100 Performance-Audit-Ergebnissen, sorgen Sie dafür, dass Ihre Besucher Ihre Website in weniger als ein paar Sekunden genießen, und beobachten Sie dann, wie der Erfolg Ihrer Website steigt.
Vielen Dank an SiteGround für das Sponsoring dieses Beitrags – vergessen Sie nicht, dass Sie über Themeforest bis zu 70% Rabatt auf ihr verwaltetes WordPress-Hosting erhalten!
