So beseitigen Sie Ressourcen, die das Rendern blockieren, in WordPress (sehr einfach)

Ein schneller Blog oder eine schnelle Website zu haben ist sehr wichtig. Es ist wichtig, wenn Sie in Suchmaschinen einen hohen Rang einnehmen möchten. Wenn Ihre Website sehr langsam ist, wird dies definitiv Ihrer SEO schaden.

Außerdem kann eine langsame Website zu einer hohen Absprungrate führen, was Ihrer Marke in vielerlei Hinsicht technisch schaden wird. Eine langsame Website kann das Einkommen und die Konversion beeinträchtigen.

Die meisten Benutzer sind ungeduldig, wenn das Laden Ihrer Website zu lange dauert, werden sie sie verlassen und zu einer schnelleren Alternative wechseln. Das ist ein potenzieller Kunde oder Umsatzbooster weg.

Wenn Sie versucht haben, Ihre Website zu beschleunigen, und Sie ein Testtool wie Google PageSpeed ​​Insight verwenden, erhalten Sie wahrscheinlich eine Warnung, dass Sie Render-Blocking-Ressourcen eliminieren sollten.

In diesem Artikel erfahren Sie, wie Sie Render-Blocking-Ressourcen einfach beseitigen können.

Was sind Render-Blocking-Ressourcen?

Render-Blocking-Ressourcen sind CSS und JavaScript, die die Ladezeit einer Website verlangsamen, da sie vom Webbrowser heruntergeladen werden müssen, bevor der Seiteninhalt gerendert werden kann.

Wenn ein Besucher versucht, auf eine Website zuzugreifen, beginnt der Browser sofort, die Website von oben nach unten zu lesen. Wenn CSS oder JavaScript vorhanden sind, hört der Browser auf zu lesen, bis er die Dateien heruntergeladen und verarbeitet hat. Bevor der Browser die Above-the-Fold-Inhalte darstellen kann, muss er die CSS- oder JavaScript-Dateien herunterladen.

Plugins oder Themes, die Sie installieren, können einige dieser CSS und JS hinzufügen. Einige müssen nicht zuerst geladen werden, sie können später geladen werden. Aber weil sie oben sind, verlangsamen sie Ihre Website.

Was Google also mit „renderblockierende Ressourcen beseitigen“ meint, ist, dass Sie unnötige Ressourcen oben auf Ihrer Website entfernen, da dies das Laden von Website-Inhalten verlangsamt.

So finden Sie Render-Blocking-Ressourcen

Bevor Sie ein Renderblocking-Problem lösen können, müssen Sie wissen, woher es kommt. Sie können herausfinden, welche Ressourcen renderblocking sind, indem Sie einen Test auf Google PageSpeed ​​Insight oder Web.Measure durchführen.

Sie können die folgenden Schritte ausführen, um Ressourcen zum Blockieren des Renderings zu finden:

1. Besuchen Sie Google PageSpeed ​​Insight

2. Geben Sie Ihre Website-Adresse ein und klicken Sie auf Analysieren

3. Scrollen Sie nach unten und achten Sie auf die Warnung zum Entfernen von Render-Blocking-Ressourcen.

Suchen Sie danach sowohl im mobilen als auch im Desktop-Tap.

Bei BloggingTools haben wir keine Render-Blocking-Probleme für Desktop, aber wir haben sie für Mobilgeräte. Aus diesem Grund werden wir Mobile verwenden, wie Sie unten sehen können.

Wie Sie oben sehen können, haben wir für Mobilgeräte zwei Probleme mit der Renderblockierung. Mit einer Punktzahl von 93. Die Punktzahl war höher, aber für diesen Beitrag musste ich das Autoptimize-Plugin deaktivieren.

BloggingTools.org hat diese Punktzahl ohne Optimierung erreicht, weil wir ein sehr schnelles und leichtgewichtiges Thema namens GeneratePress verwenden. Wir hosten auch auf einem sehr schnellen Webhost namens Cloudways.

Hinweis : Sie sollten nicht davon besessen sein, 100 auf dem PageSpeed ​​Insight Score zu erreichen. Es ist nur ein Leitfaden. Normalerweise ist eine durchschnittliche Punktzahl von 65 bis 80 für die meisten Menschen in Ordnung. Entfernen Sie keine Dateien, die für Ihr Unternehmen unerlässlich sind.

Das Gute an WordPress ist, dass Sie nicht alles manuell machen müssen. Es gibt einige gut codierte Plugins, die dabei helfen.

So beheben Sie das Problem mit der Renderblockierung von Ressourcen in WordPress

Befolgen Sie diese Schritte, um das Problem mit der Beseitigung von Render-Blocking-Ressourcen zu beheben:

1. Installieren und aktivieren Sie Autoptimize

Es gibt viele WordPress-Plugins, die das können, wie W3 Total Cache, WP Rocket und so weiter. Aber aus meiner Erfahrung mit vielen Websites geht Autoptimize immer viel besser damit um als alle anderen. Das Wunderbare ist, dass Autoptimize mit fast allen WordPress-Caching-Plugins kompatibel und kostenlos ist.

Gehen Sie zum WordPress-Plugin-Verzeichnis, um Autoptimize zu installieren und zu aktivieren

2. Besuchen Sie die Autooptimize-Einstellungen

Wenn Sie jemals brauchen, wo Sie Autoptimize-Einstellungen finden können, klicken Sie in Ihrem WordPress-Dashboard auf Einstellungen und dann auf Autoptimize.

3. JavaScript optimieren

Wählen Sie unter JavaScript-Optionen Script-Code optimieren und wählen Sie auch aggregierte JS-Dateien aus. Unten finden Sie die Einstellungen, die ich für BloggingTools verwende.

4. CSS optimieren

Wählen Sie unter den CSS-Optimierungsoptionen CSS-Code optimieren aus. Wählen Sie auch aggregierte CSS-Dateien und „Auch Inline-CSS aggregieren“. Siehe unten die Optionen, die ich für BloggingTools verwende.

5. HTML optimieren

Wenn Sie eine bessere Leistung wünschen, können Sie auch Autoptimize verwenden, um HTML zu optimieren. Wählen Sie unter HTML-Optionen die Option HTML-Code optimieren aus. Unten sehen Sie die Einstellungen, die ich für BloggingTools verwende.

6. Überprüfen Sie die Sonstigen Optionen

Sie können die Misc-Optionen überprüfen und einige Einstellungen optimieren, wie es für Sie funktioniert. Unten finden Sie die Einstellungen für BloggingTools.

7. Speichern und leeren Sie den Cache.

Als nächstes klicken Sie einfach auf Speichern und leeren Sie den Cache. Das ist alles!

Nach all dem können Sie Ihre Website erneut auf Google PageSpeed ​​Insight überprüfen. Unmittelbar danach stieg unsere Punktzahl für BloggingTools auf 95 und alle Warnungen zum Entfernen von Render-Blocking-Ressourcen verschwanden vollständig. Siehe unten.

Bitte beachten Sie, dass je nachdem, wie viele Render-Blocking-Ressourcen Sie haben und wie wichtig sie für Ihre Website sind, einige davon möglicherweise verbleiben. Versuchen Sie nicht, sie zu entfernen.

Wenn Sie weiter eliminieren möchten, können Sie Async JavaScript verwenden, ein Plugin desselben Autors wie Autoptimize. Sie arbeiten zusammen. Ich empfehle dies nicht, da es Ihre Website beschädigen könnte. Autoptimize allein ist in Ordnung!

Fazit

Geschwindigkeit ist wichtig und die Eliminierung von Ressourcen, die das Rendern blockieren, kann dazu beitragen, dass Ihre Website schneller geladen wird und Ihre Website bei Geschwindigkeitstest-Tools besser abschneidet. Aber Sie sollten niemals von diesen Partituren besessen sein, da sie nur dazu da sind, Sie zu führen.

Wenn Ihre Website danach immer noch sehr langsam ist. Die drei wahrscheinlichsten Probleme könnten sein, dass Ihr Design oder Ihr Webhost fehlerhaft ist oder dass Sie fehlerhafte Plugins installiert haben. Ich empfehle Coudways als besten Webhoster und GeneratePress als bestes Theme. Wenn Sie ein Anfänger sind, kann Bluehost damit umgehen, aber wenn Sie es sich leisten können, ist Cloudways das Beste. Sie können kostenlos starten. Ich verwende GeneratePress und Coudways für TargetTrend

Lesen Sie auch:

Wie man WordPress sehr schnell macht

Wie Sie Traffic auf Ihr Blog lenken

Wie man mit bloggen geld verdient

So starten Sie einen Blog