Haben Sie schon einmal eine WordPress-Website erstellt und waren von allem begeistert? Sie haben also schnell angefangen, es zu hassen, nachdem Sie gemerkt haben, dass das Laden ewig dauert?
Langsame Ladegeschwindigkeiten sind nicht nur ein Ärgernis für Sie und Ihre Besucher, sondern können Sie auch in puncto SEO erheblich kosten. Seit 2010 berücksichtigen Google-Algorithmen die Ladegeschwindigkeit bei Ranking-Entscheidungen, sodass langsame Seiten auf den Ergebnisseiten weiter unten angezeigt werden.
Möglicherweise kennen Sie die häufigsten Ursachen für eine schlechte Seitenleistung: übermäßiger Inhalt, unkomprimierte Bilddateien, unzureichendes Hosting und mangelndes Caching, um nur einige zu nennen. Aber es gibt noch einen weiteren Übeltäter, der oft übersehen wird: Render-blockierende Ressourcen.
Verstehen Sie mich nicht falsch, CSS und JavaScript sind großartig. Ohne CSS wären Websites Wände aus reinem Text. Ohne JavaScript wären wir nicht in der Lage, dynamische, interaktive und ansprechende Elemente zu unseren Websites hinzuzufügen. Wenn sie jedoch zum falschen Zeitpunkt ausgeführt werden, können sowohl CSS als auch JavaScript die Leistung Ihrer Website beeinträchtigen.
Hier ist der Grund: Wenn ein Webbrowser zum ersten Mal eine Webseite lädt, analysiert er den gesamten HTML-Code der Seite, bevor er ihn einem Besucher auf dem Bildschirm anzeigt. Wenn der Browser auf einen Link zu einer CSS-Datei, einer JavaScript-Datei oder einem Inline-Skript (d. h. JavaScript-Code im HTML-Dokument) stößt, stoppt er die HTML-Analyse, um den Code zu finden und auszuführen, was alles verlangsamt.
Wenn Sie die Leistung Ihrer Seite in WordPress optimiert haben und immer noch Probleme haben, können Rendering-blockierende Ressourcen dafür verantwortlich sein. Manchmal ist es wichtig, diesen Code beim ersten Laden auszuführen, aber meistens kann er entfernt oder an das Ende der Warteschlange verschoben werden.
In diesem Beitrag zeigen wir Ihnen, wie Sie diesen lästigen Code von Ihrer WordPress-Website entfernen und deren Leistung steigern.
Wenn Sie lieber ein Video mitverfolgen möchten, schauen Sie sich dieses von WP Casts erstellte Tutorial an:
1. Identifizieren Sie die Ressourcen, die die Verarbeitung blockieren.
Bevor Sie Änderungen vornehmen, müssen Sie zunächst die Rendering-blockierenden Ressourcen lokalisieren. Das geht am besten mit einem kostenlosen Online-Geschwindigkeitstest wie dem PageSpeed Insights-Tool von Google. Fügen Sie die URL Ihrer Website ein und klicken Sie Analysieren.
Wenn der Scan abgeschlossen ist, weist Google Ihrer Website einen Gesamtgeschwindigkeitswert von 0 (am langsamsten) bis 100 (am schnellsten) zu. Eine Punktzahl im Bereich von 50 bis 80 ist durchschnittlich, Sie sollten also am oberen Ende dieses Bereichs oder darüber landen.
Um Dateien zu identifizieren, die die Verarbeitung blockieren und Ihre Seite verlangsamen, scrollen Sie nach unten zu Gelegenheitendann öffnen Sie die Entfernen Sie Rendering-blockierende Ressourcen Akkordeon.
Sie sehen eine Liste von Dateien, die das „erste Malen“ Ihrer Seite verlangsamen; Diese Dateien wirken sich auf die Ladezeit aller Inhalte aus, die beim ersten Laden der Seite im Browserfenster angezeigt werden. Dies wird auch „Above the Fold“-Inhalt genannt.
Beachten Sie alle Dateien, die mit den Erweiterungen .css und .js enden, da Sie sich auf diese Dateien konzentrieren sollten.
2. Entfernen Sie Ressourcen, die das Rendern manuell oder mit einem Plugin blockieren.
Nachdem Sie das Problem identifiziert haben, gibt es zwei Möglichkeiten, es in WordPress zu beheben: manuell oder mit einem Plugin. Wir werden zunächst die Plugin-Lösung behandeln.
Verschiedene WordPress-Plugins können den Effekt von Rendering-blockierenden Ressourcen auf WordPress-Websites reduzieren. Ich werde zwei beliebte Lösungen behandeln: Autoptimize und W3 Total Cache.
So entfernen Sie Ressourcen, die das Rendern blockieren, mit dem Autoptimize-Plugin
Autoptimize ist ein kostenloses Plugin, das Ihre Website-Dateien ändert, um schnellere Seiten bereitzustellen. Autoptimize funktioniert durch das Hinzufügen von Dateien, das Minimieren des Codes (d. h. das Reduzieren der Dateigröße durch Entfernen überflüssiger oder unnötiger Zeichen) und das Verzögern des Ladens von Ressourcen, die die Verarbeitung blockieren.
Da Sie das Backend Ihrer Website ändern, sollten Sie mit diesem Plugin oder einem ähnlichen Plugin vorsichtig sein. So entfernen Sie Ressourcen, die die Verarbeitung mit Autoptimize blockieren:
1. Installieren und aktivieren Sie das Autoptimize-Plugin.
2. Wählen Sie in Ihrem WordPress-Dashboard Folgendes aus: Einstellungen > Automatische Optimierung.
3. Unten JavaScript-Optionenaktivieren Sie das Kontrollkästchen neben JavaScript-Code optimieren?.
4. Wenn das Kästchen neben JS-Dateien hinzugefügt? aktiviert ist, deaktivieren Sie es.
5. Unten CSS-Optionenaktivieren Sie das Kontrollkästchen neben CSS-Code optimieren?.
6. Wenn das Kästchen neben CSS-Dateien hinzugefügt? aktiviert ist, deaktivieren Sie es.
7. Klicken Sie unten auf der Seite auf Änderungen speichern Und Leerer Cache.
8. Scannen Sie Ihre Website mit PageSpeed Insights und prüfen Sie, ob es Verbesserungen gibt.
9. Wenn PageSpeed Insights weiterhin Rendering-blockierende JavaScript-Dateien meldet, versuchen Sie es erneut. Einstellungen > Automatische Optimierung und aktivieren Sie die Kontrollkästchen daneben JS-Dateien hinzugefügt? Und CSS-Dateien hinzugefügt?. Dann klick Änderungen speichern und Cache leeren und erneut scannen.
So entfernen Sie Ressourcen, die die Verarbeitung blockieren, mit dem W3 Total Cache-Plugin
W3 Total Cache ist ein weit verbreitetes Caching-Plugin, das dabei hilft, verzögerten Code zu beheben. So entfernen Sie JavaScript, das die Verarbeitung mit W3 Total Cache blockiert:
1. Installieren und aktivieren Sie das W3 Total Cache-Plugin.
2. Ein neuer Leistung Die Option wird dem WordPress-Dashboard-Menü hinzugefügt. Wählen Leistung > Allgemeine Einstellungen.
3. Drin Minimieren Aktivieren Sie im Abschnitt das Kontrollkästchen neben Minimierendann einstellen Minimierungsmodus für Handbuch.
4. Klicken Speichern Sie alle Einstellungen am unteren Rand des Minimieren Abschnitt.
5. Wählen Sie im Bedienfeldmenü die Option aus Leistung > Minimieren.
6. Drin J.S. Abschnitt daneben JS-MinimierungskonfigurationStelle sicher das Aktivieren Das Kontrollkästchen ist aktiviert. So tief Operationen in Bereichenöffne das erste Einbettungstyp Lassen Sie sich fallen und wählen Sie Keine Sperrung per „defer“.
7. Unten JS-Dateiverwaltungwählen Sie Ihr aktives Thema aus Ausgabe runterfallen.
8. Sehen Sie sich die PageSpeed Insights-Ergebnisse Ihrer vorherigen Analyse an. Für jeden Artikel unten Entfernen Sie Rendering-blockierende Ressourcen endet mit .js, klicken Sie Fügen Sie ein Skript hinzu. Kopieren Sie dann die vollständige URL der PageSpeed Insights-JavaScript-Ressource und fügen Sie sie in die ein Datei-URI Feld.
9. Sobald Sie alle von PageSpeed Insights gemeldeten Rendering-blockierenden JavaScript-Ressourcen eingefügt haben, klicken Sie auf Einstellungen speichern und Caches leeren am unteren Rand des J.S. Abschnitt.
10. Drin CSS Abschnitt daneben CSS-Minimierungseinstellungenaktivieren Sie das Kontrollkästchen neben CSS-Minimierungseinstellungen und stellen Sie sicher, dass die Minimierungsmethode ist eingestellt auf Kombinieren und minimieren.
elf. Unten CSS-Dateiverwaltungwählen Sie Ihr aktives Thema aus Ausgabe runterfallen.
12. Für jeden Artikel unten Entfernen Sie Rendering-blockierende Ressourcen Klicken Sie in den Analyseergebnissen von PageSpeed Insights auf die Endung .css Fügen Sie ein Stylesheet hinzu. Kopieren Sie dann die vollständige URL der PageSpeed Insights-CSS-Ressource und fügen Sie sie in die ein Datei-URI Feld.
13. Sobald Sie alle von PageSpeed Insights gemeldeten renderblockierenden CSS-Ressourcen eingefügt haben, klicken Sie auf Einstellungen speichern und Caches leeren am unteren Rand des CSS Abschnitt.
14. Scannen Sie Ihre Website mit PageSpeed Insights und prüfen Sie, ob es Verbesserungen gibt.
So entfernen Sie den JavaScript-Rendering-Block manuell
Plugins können die Backend-Arbeit für Sie übernehmen. Andererseits sind Plugins selbst lediglich weitere Dateien, die Ihrem Webserver hinzugefügt werden. Wenn Sie diese zusätzlichen Dateien begrenzen möchten oder die Programmierung lieber selbst übernehmen möchten, können Sie das JavaScript, das das Rendern blockiert, manuell ansprechen.
Suchen Sie dazu die Tags in Ihren Website-Dateien für die Ressourcen, die in Ihrem PageSpeed Insights-Scan identifiziert wurden. Sie werden etwa so aussehen:
Die Tags weisen den Browser an, das durch gekennzeichnete Skript zu laden und auszuführen src Attribut (Quelle). Das Problem bei diesem Prozess besteht darin, dass dieses Laden und Ausführen das Parsen der Webseite durch den Browser verzögert, was sich auf die Gesamtladezeit auswirkt:
Um dieses Problem zu beheben, können Sie Folgendes hinzufügen asynchron (asynchron) oder die verschieben Attribut für Skript-Tags zum Rendern blockierender Ressourcen. asynchron Und verschieben Sie werden wie folgt platziert:
Obwohl sie ähnliche Auswirkungen auf die Ladezeiten haben, weisen diese Attribute den Browser an, unterschiedliche Dinge zu tun.
Die asynchron Das Attribut weist den Browser an, die JavaScript-Ressource zu laden, während er den Rest der Seite analysiert und dieses Skript unmittelbar nach dem Laden ausführt. Durch Ausführen des Skripts wird die HTML-Analyse gestoppt:
Skripte mit verschieben Attribute werden auch geladen, während die Seite analysiert wird, aber das Laden dieser Skripte dauert eine Weile, bis nach dem ersten Rendern oder bis die wichtigsten Teile geladen sind:
Die verschieben Und asynchron Die Attribute sollten nicht zusammen auf derselben Ressource verwendet werden, aber eines kann für eine bestimmte Ressource besser geeignet sein als das andere. Wenn ein nicht wesentliches Skript von der Ausführung eines davor ausgeführten Skripts abhängt, verwenden Sie im Allgemeinen verschieben. Die verschieben Das Attribut stellt sicher, dass das Skript nach dem vorherigen erforderlichen Skript ausgeführt wird. Andernfalls verwenden Sie asynchron.
3. Führen Sie erneut einen Site-Scan durch.
Nachdem Sie die Änderungen vorgenommen haben, führen Sie einen abschließenden Scan Ihrer Website mit PageSpeed Insights durch und sehen Sie, welche Auswirkungen Ihre Änderungen auf Ihren Score hatten.
Hoffentlich gibt es eine spürbare Verbesserung, aber machen Sie sich keine Sorgen, wenn dies nicht der Fall ist. Viele Faktoren können die Seitenleistung beeinträchtigen und Sie müssen möglicherweise etwas tiefer graben, um die Ursache für die schlechte Leistung zu finden.
4. Überprüfen Sie Ihre Website auf Fehler.
Überprüfen Sie zusätzlich zum erneuten Scannen Ihre Seiten, um sicherzustellen, dass Ihre Website funktioniert. Wird die Seite korrekt geladen? Erscheinen alle Elemente? Wenn etwas kaputt ist oder nicht richtig geladen wird, machen Sie die Änderungen rückgängig und beheben Sie das Problem.
Wenn Sie an einem Punkt angelangt sind, an dem Sie wiederholt verschiedene Maßnahmen mit minimalem Geschwindigkeitsgewinn ausprobiert haben, ist es möglicherweise am besten, andere Möglichkeiten zur Beschleunigung Ihrer Seiten in Betracht zu ziehen, anstatt das Risiko einzugehen, dass Ihre Website beschädigt wird.
Optimieren Sie Ihre WordPress-Site hinsichtlich der Leistung
Viele Faktoren tragen zum Erlebnis Ihrer Benutzer auf Ihrer Website bei, aber nur wenige sind wichtiger als die Ladezeit. Wenn Sie große Änderungen am Inhalt oder am Erscheinungsbild Ihrer WordPress-Site vornehmen, sollten Sie immer berücksichtigen, wie sich diese Änderungen auf die Leistung auswirken.
Nachdem Sie nun die Ressourcen entfernt haben, die das Rendern blockieren, sollten Sie die Geschwindigkeit Ihrer Website weiter optimieren, indem Sie andere Funktionen analysieren, die bekanntermaßen die Leistung verlangsamen. Versuchen Sie, regelmäßige Geschwindigkeitstests in Ihren Wartungsplan für die Website zu integrieren; Für Ihren Erfolg ist es von entscheidender Bedeutung, mögliche Probleme vorherzusehen.
