So beseitigen Sie Render-Blocking-Ressourcen von Ihrer WordPress-Website

Haben Sie jemals eine WordPress-Website fertig erstellt, alles daran geliebt und sofort angefangen, sie zu hassen, nachdem Sie festgestellt haben, dass das Laden ewig dauert? Die Beherrschung der Eliminierung von Ressourcen, die das Rendern blockieren, hilft bei der Diagnose dieses Problems. Aber wie?

Langsame Ladegeschwindigkeiten sind nicht nur ein Ärgernis für Sie und Ihre Besucher, sondern können Sie auch in Sachen SEO erheblich kosten. Seit 2010 berücksichtigen Google-Algorithmen die Ladegeschwindigkeit bei Ranking-Entscheidungen, sodass langsame Seiten auf den Ergebnisseiten weiter unten erscheinen.

Sie sind vielleicht mit den häufigsten Ursachen für eine schlechte Seitenleistung vertraut – übermäßiger Inhalt, unkomprimierte Bilddateien, unzureichendes Hosting und fehlendes Caching, um nur einige zu nennen. Aber es gibt noch einen weiteren oft übersehenen Übeltäter im Spiel: Render-Blocking-Ressourcen.

Verstehen Sie mich nicht falsch – CSS und JavaScript sind großartig. Ohne CSS wären Websites Wände aus reinem Text. Ohne Ja=ooovaScript wären wir nicht in der Lage, dynamische, interaktive und ansprechende Elemente zu unseren Websites hinzuzufügen. Aber wenn sie 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 (dh JavaScript-Code im HTML-Dokument selbst) stößt, hält er die HTML-Analyse an, um den Code abzurufen und auszuführen, was alles verlangsamt.

Wenn Sie Ihre Seitenleistung in WordPress optimiert haben und immer noch Probleme haben, können Render-Blocking-Ressourcen der Übeltäter sein. Manchmal ist es wichtig, dass dieser Code beim ersten Laden ausgeführt wird, aber die meiste Zeit kann er entfernt oder bis zum Ende der Warteschlange verschoben werden.

In diesem Beitrag zeigen wir Ihnen, wie Sie diesen lästigen Code von Ihrer WordPress-Website entfernen und Ihre Leistung steigern können.

Wenn Sie lieber ein Video mitverfolgen möchten, sehen Sie sich diese von WP Casts erstellte exemplarische Vorgehensweise an:

1. Identifizieren Sie die Ressourcen, die das Rendern blockieren.

Bevor Sie Änderungen vornehmen, müssen Sie zunächst die Renderblocker-Ressourcen lokalisieren. Das geht am besten mit einem kostenlosen Online-Geschwindigkeitstest wie dem Tool PageSpeed ​​Insights von Google. Fügen Sie die URL Ihrer Website ein und klicken Sie auf 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 im oberen Teil dieses Bereichs oder darüber landen.

Um Render-Blocking-Dateien zu identifizieren, die Ihre Seite verlangsamen, scrollen Sie nach unten zu Opportunities und öffnen Sie dann das Akkordeon Render-Blocking-Ressourcen beseitigen .

Bildquelle

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 als „Above-the-Fold“-Inhalt bezeichnet.

Beachten Sie alle Dateien, die mit den Erweiterungen .css und .js enden, da Sie sich auf diese konzentrieren sollten.

2. Beseitigen Sie die Ressourcen, die das Rendern blockieren, manuell oder mit einem Plugin.

Nachdem Sie das Problem identifiziert haben, gibt es zwei Möglichkeiten, es in WordPress zu beheben: manuell oder mit einem Plugin. Wir werden zuerst die Plugin-Lösung behandeln.

Mehrere WordPress-Plugins können den Effekt von Render-Blocking-Ressourcen auf WordPress-Websites reduzieren. Ich werde zwei beliebte Lösungen behandeln, Autoptimize und W3 Total Cache.

So eliminieren Sie Render-Blocking-Ressourcen mit dem Autoptimize-Plugin

Autoptimize ist ein kostenloses Plugin, das Ihre Website-Dateien modifiziert, um schnellere Seiten bereitzustellen. Autoptimize funktioniert durch Aggregieren von Dateien, Minimieren von Code (dh Reduzieren der Dateigröße durch Löschen redundanter oder unnötiger Zeichen) und Verzögern des Ladens von Ressourcen, die das Rendern blockieren.

Da Sie das Backend Ihrer Website ändern, denken Sie daran, mit diesem Plugin oder einem ähnlichen Plugin vorsichtig zu sein. So eliminieren Sie Render-Blocking-Ressourcen mit Autoptimize:

1. Installieren und aktivieren Sie das Autoptimize-Plugin.

2. Wählen Sie in Ihrem WordPress-Dashboard Einstellungen > Autooptimieren aus .

3. Aktivieren Sie unter JavaScript-Optionen das Kontrollkästchen neben JavaScript-Code optimieren? .

4. Wenn das Kästchen neben Aggregate JS-files? aktiviert ist, deaktivieren Sie es.

5. Aktivieren Sie unter CSS-Optionen das Kontrollkästchen neben CSS-Code optimieren? .

6. Wenn das Kästchen neben CSS-Dateien aggregieren? aktiviert ist, deaktivieren Sie es.

7. Klicken Sie unten auf der Seite auf Änderungen speichern und Cache leeren .

8. Scannen Sie Ihre Website mit PageSpeed ​​Insights und suchen Sie nach Verbesserungen.

9. Wenn PageSpeed ​​Insights weiterhin Render-blockierende JavaScript-Dateien meldet, kehren Sie zu Einstellungen > Automatisch optimieren zurück und aktivieren Sie die Kontrollkästchen neben JS-Dateien aggregieren? und CSS-Dateien aggregieren? . Klicken Sie dann auf Änderungen speichern und Cache leeren und scannen Sie erneut.

So eliminieren Sie Render-Blocking-Ressourcen mit dem W3 Total Cache Plugin

W3 Total Cache ist ein weit verbreitetes Caching-Plug-in, das hilft, verzögerten Code zu beheben. So eliminieren Sie JavaScript, das das Rendering blockiert, mit W3 Total Cache:

1. Installieren und aktivieren Sie das W3 Total Cache-Plugin.

2. Eine neue Leistungsoption wird Ihrem WordPress-Dashboard-Menü hinzugefügt. Wählen Sie Leistung > Allgemeine Einstellungen.

3. Aktivieren Sie im Abschnitt Minimieren das Kontrollkästchen neben Minimieren und stellen Sie dann den Minimierungsmodus auf Manuell ein.

4. Klicken Sie unten im Abschnitt Minimieren auf Alle Einstellungen speichern.

5. Wählen Sie im Dashboard-Menü Leistung > Minimieren aus .

6. Stellen Sie sicher, dass im JS -Abschnitt neben den JS-Minifizierungseinstellungen das Kontrollkästchen Aktivieren aktiviert ist. Öffnen Sie dann unter Operationen in Bereichen das erste Drop -down -Menü Einbettungstyp und wählen Sie Nicht blockierend mit „Verzögern“ aus .

7. Wählen Sie unter JS-Dateiverwaltung Ihr aktives Design aus der Dropdown -Liste Design aus.

8. Greifen Sie auf Ihre PageSpeed ​​Insights-Ergebnisse Ihres früheren Scans zurück. Klicken Sie für jedes Element unter Renderblockierende Ressourcen beseitigen, die auf .js enden, auf Skript hinzufügen . Kopieren Sie dann die vollständige URL der JavaScript-Ressource aus PageSpeed ​​Insights und fügen Sie sie in das Feld Datei-URI ein.

9. Nachdem Sie alle von PageSpeed ​​Insights gemeldeten Render-Blocking-JavaScript-Ressourcen eingefügt haben, klicken Sie unten im JS -Abschnitt auf Save Settings & Purge Caches .

10. Aktivieren Sie im CSS -Abschnitt neben CSS-Minifizierungseinstellungen das Kontrollkästchen neben CSS-Minifizierungseinstellungen und stellen Sie sicher, dass die Minifizierungsmethode auf Combine & Minify eingestellt ist.

11. Wählen Sie unter CSS-Dateiverwaltung Ihr aktives Design aus der Dropdown -Liste Design aus.

12. Klicken Sie für jedes Element in Ihren Scanergebnissen von PageSpeed ​​Insights unter Renderblockierende Ressourcen beseitigen, die auf .css enden, auf Stylesheet hinzufügen . Kopieren Sie dann die vollständige URL der CSS-Ressource aus PageSpeed ​​Insights und fügen Sie sie in das Feld Datei-URI ein.

13. Nachdem Sie alle CSS-Ressourcen eingefügt haben, die das Rendering blockieren, die von PageSpeed ​​Insights gemeldet wurden, klicken Sie unten im CSS -Abschnitt auf Einstellungen speichern und Caches löschen.

14. Scannen Sie Ihre Website mit PageSpeed ​​Insights und suchen Sie nach Verbesserungen.

So beseitigen Sie Render-blockierendes JavaScript manuell

Plugins können die Backend-Arbeit für Sie erledigen. Andererseits sind Plugins selbst nur weitere Dateien, die Ihrem Webserver hinzugefügt werden. Wenn Sie diese zusätzlichen Dateien einschränken möchten oder einfach nur die Programmierung selbst übernehmen möchten, können Sie das Render-Blocking-JavaScript manuell ansprechen.

Suchen Sie dazu die <script> -Tags in Ihren Website-Dateien für die Ressourcen, die in Ihrem PageSpeed ​​Insights-Scan identifiziert wurden. Sie werden in etwa so aussehen:

 
<script src="https://blog.hubspot.com/marketing/resource.js">

<script> -Tags weisen den Browser an, das durch das src -Attribut (source) identifizierte Skript zu laden und auszuführen. Das Problem bei diesem Prozess ist, dass dieses Laden und Ausführen das Parsen der Webseite durch den Browser verzögert, was sich auf die Gesamtladezeit auswirkt:

Bildquelle

Um dies zu beheben, können Sie entweder das Attribut async (asynchron) oder das Attribut defer zu den script-Tags für Render-Blocking-Ressourcen hinzufügen. async und defer werden wie folgt platziert:

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

Während sie ähnliche Auswirkungen auf die Ladezeiten haben, weisen diese Attribute den Browser an, andere Dinge zu tun.

Das async -Attribut signalisiert dem Browser, die JavaScript-Ressource zu laden, während der Rest der Seite analysiert wird, und führt dieses Skript unmittelbar nach dem Laden aus. Durch Ausführen des Skripts wird das HTML-Parsing angehalten:

Bildquelle

Skripte mit dem Attribut defer werden ebenfalls geladen, während die Seite geparst wird, aber das Laden dieser Skripte wird verzögert, bis nach dem ersten Rendern oder bis die wichtigeren Teile geladen wurden:

Bildquelle

Die Attribute „ defer “ und „ async “ 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 darauf angewiesen ist, dass ein Skript davor ausgeführt wird, verwenden Sie im Allgemeinen defer . Das Attribut defer stellt sicher, dass das Skript nach dem vorangehenden erforderlichen Skript ausgeführt wird. Verwenden Sie andernfalls async .

3. Führen Sie erneut einen Site-Scan durch.

Nachdem Sie Ihre Änderungen vorgenommen haben, führen Sie einen letzten Scan Ihrer Website durch PageSpeed ​​Insights durch und sehen Sie, welche Auswirkungen Ihre Änderungen auf Ihre Punktzahl hatten.

Hoffentlich gibt es eine spürbare Verbesserung, aber keine Sorge, wenn nicht. Viele Faktoren können die Seitenleistung beeinträchtigen, und Sie müssen möglicherweise noch mehr nachforschen, um die Ursache für die schlechte Leistung zu finden.

4. Überprüfen Sie Ihre Website auf Fehler.

Überprüfen Sie zusätzlich zu einem erneuten Scan Ihre Seiten, um sicherzustellen, dass Ihre Website funktioniert. Wird die Seite richtig geladen? Werden alle Elemente angezeigt? Wenn etwas kaputt ist oder nicht richtig geladen werden kann, machen Sie Ihre Änderungen rückgängig und beheben Sie das Problem.

Wenn Sie einen Punkt erreicht haben, an dem Sie wiederholt verschiedene Maßnahmen mit minimalen Geschwindigkeitsgewinnen ausprobiert haben, ist es möglicherweise am besten, andere Möglichkeiten zur Beschleunigung Ihrer Seiten in Betracht zu ziehen, anstatt zu riskieren, Ihre Website zu beschädigen.

Optimierung Ihrer WordPress-Site für Leistung

Viele Faktoren tragen zur Erfahrung Ihrer Benutzer auf Ihrer Website bei, aber nur wenige sind wichtiger als die Ladezeit. Wann immer Sie große Änderungen an Inhalt oder Aussehen auf Ihrer WordPress-Seite vornehmen, sollten Sie immer berücksichtigen, wie sich solche Änderungen auf die Leistung auswirken.

Nachdem Sie die Render-Blocking-Ressourcen eliminiert haben, 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 Website-Wartungsplan aufzunehmen – potenziellen Problemen immer einen Schritt voraus zu sein, ist entscheidend für Ihren Erfolg.