So löschen Sie JavaScript und CSS, die das Rendern auf WordPress blockieren

So löschen Sie JavaScript und CSS, die das Rendern auf WordPress blockieren

Eine Website zu haben, die schnell lädt, ist entscheidend, wenn Sie auf Suchmaschinenergebnissen (SERPs) ganz oben stehen möchten.Aus diesem Grund ist Googles PageSpeed Insights da, um Ihnen zu helfen, die Upload-Geschwindigkeit Ihrer Website zu optimieren.Wenn Sie das Tool "JavaScript und CSS löschen" erhalten, das das Rendern in über dem Fach bereichhabenden Inhalt blockiert, während Sie das Tool verwenden, machen Sie sich keine Sorgen.In diesem Artikel zeigen wir Ihnen, wie Sie das Problem beheben können.

Kennen Sie "Löschen von JavaScript und CSS, die das Rendern in über dem Falten inhalt blockieren" Warnung

Wenn Sie sich die Regeln für die Seitengeschwindigkeit von Google ansehen, ist das Löschen von JavaScript und CSS, das das Rendern blockiert, eine davon.Jeder Fehler in diesem führt zu einer langsameren Seitenladegeschwindigkeit.Aber wie können JavaScript und CSS auf Ihrer HTML-Seite Ihre Website verlangsamen?

Nun, jedes Mal, wenn Sie ein neues Thema oder Plugin installieren, fügen sie JavaScript und CSS-Code zum Front-End hinzu.Daher kann es länger dauern, bis Browser die Seite laden.

Über das Fache (ATF) ist der Teil Ihrer Webseite, der beim ersten Laden der Seite sichtbar ist.Jeder Teil der Seite, den Sie nach unten scrollen müssen, um zu erreichen, ist nicht ATF.

Wenn daher irrelevanter JavaScript- und CSS-Code beim Laden Ihrer Website angezeigt wird, erhalten Sie möglicherweise eine Warnung, um die Anzahl von JavaScript und CSS zu reduzieren, die das Rendern in über dem Fachinhalt liegenden Inhaltsressourcen blockieren.

Erfahren Sie mehr über JavaScript- und CSS-Blockierungsrendering mit Google Page Speed Insights

Der erste Schritt zum Beheben der Rendering-Sperre besteht darin, die Geschwindigkeit Ihrer Website mit Google PageSpeed Insights zu testen.Führen Sie dazu die folgenden Schritte aus:

  1. Besuchen Sie die Seite und fügen Sie Ihre Website-URL in das Feld " URL einer Webseite " ein.
  2. Klicken Sie auf Analysieren, um den Bericht abzuerhalten.

    Die meisten Websites haben eine Punktzahl zwischen 50 und 70; dies sollte als Benchmark für Ihre Punktzahl dienen.Google listet auch Tipps auf, um die Leistung Ihrer Website zu verbessern.

    Score-Informationen über die Geschwindigkeit der Google-Seite Ihrer Website

Wenn Sie auch den Vorschlag finden, JavaScript und CSS zu löschen, die das Rendern in über dem Falten-Inhalt blockieren, müssen Sie das Problem beheben.
Löscht Javascript und CSS, die das Rendern im obigen Der Option "Inhaltswarnung" blockierenDenken Sie daran, dass Sie Ihre Website nicht zwingen sollten, eine perfekte Punktzahl von 100 zu erhalten. Tun Sie einfach Ihr Bestes, um eine gute Punktzahl zu erhalten, ohne die Benutzererfahrung zu opfern.

Wenn es Skripte auf Ihrer WordPress-Website gibt, die für eine robuste UX unerlässlich sind, sollten Sie sie nicht entfernen, nur um eine etwas höhere Punktzahl auf PageSpeed Insights zu erhalten.

Die Regeln, nach denen Google Ihre Websites einordnet, sind nur Richtlinien und sollten als solche genommen werden.

Fix "Löschen Von JavaScript und CSS blockieren Rendering in über dem Falten Inhalt" Fehler

Mit WordPress ist die Reduzierung von JavaScript- und CSS-Ressourcen, die das Rendern auf Ihrer WordPress-Website blockieren, einfach.Sie können die drei Plugins verwenden, die wir unten aufgeführt haben:

W3-Cache insgesamt

Einer unserer Favoriten ist das W3 Total Cache Plugin.Einmal installiert und aktiviert, folgen Sie diesen Schritten auf dem WordPress Admin-Panel:

  1. Wechseln Sie zu Leistung -> Allgemeine Einstellungen .
  2. Suchen Sie den Minify-Header auf der Seite.Dann sehen Sie einige Optionen unter diesem Titel.
  3. Aktivieren Sie das Kontrollkästchen Aktivieren für Minify.Wählen Sie dann für die Option Modus minimieren die Option Manuell aus.
  4. Drücken Sie Alle Einstellungen speichern .
    Minimieren Sie css- und js-Skriptressourcen mit dem w3-Cache-Plugin
  5. Laden Sie alle JavaScript- und CSS-Skripte herunter, die das Rendering blockieren und die Sie über Google PageSpeed Insights finden.
  6. Sobald Sie den Boden Plantain gefunden haben, kehren Sie zu Performance -> Minimieren auf dem WordPress-Dashboard zurück.
  7. Suchen Sie den JS-Abschnitt.Wählen Sie im Abschnitt Vorgänge in Regionen den nicht blockierenden Einbettungstyp mit "differ" für das Efore B-Tag aus. <head>.</head>
  8. Wählen Sie für die JS-Dateiverwaltung das aktive Design aus, und klicken Sie auf die Schaltfläche Skript hinzufügen.Kopieren und fügen Sie JavaScript-URLs aus Google Page Speed Insights in die bereitgestellten Felder ein, wie unten gezeigt.
    Löschen von Rendering-Blockierung sbereitenJS-Ressourcen mit W3 Total Cache Plugin
  9. Scrollen Sie nach unten und finden Sie den CSS-Abschnitt.Wählen Sie für die CSS-Dateiverwaltung das aktive Design aus, und klicken Sie auf Stylesheet hinzufügen .Kopieren Sie ähnlich wie im vorherigen Schritt die URLs der CSS-Stylesheets aus PageSpeed Insights, und fügen Sie sie in die erforderlichen Felder ein.
    Löschen von jss-Ressourcen, die das Rendern mit dem W3 Total Cache-Plugin blockieren
  10. Klicken Sie schließlich auf die Schaltfläche Einstellungen speichern, und löschen Sie den Cache .

Autoptimize-Eigenschaft

Alternativ können Sie das Autoptimize-Plug-In verwenden, um den Javascript- und css-Fehler zu beheben, der das Rendern blockiert.Führen Sie die folgenden Schritte auf dem Dashboard aus, nachdem Sie das Plug-In installiert und aktiviert haben:

  1. Wechseln Sie zu Einstellungen -> Automatisch.
  2. Aktivieren Sie die Kontrollkästchen für JavaScript-Code optimieren?"Und CSS-Code optimieren?
  3. Drücken Sie die Schaltfläche Änderungen speichern und Cache löschen.
    Optimieren Sie CSS und JavaScript mit dem Autoptimize-Plugin

In den meisten Fällen reicht dies aus, um die Warnung zu korrigieren.Das Ergebnis kann jedoch je nach Thema und aktiven Plug-Ins variieren.

Um sicherzustellen, dass Ihr Problem behoben wurde, führen Sie Ihre Website erneut über PageSpeed Insights aus.Wenn Sie noch blockierende JS- und CSS-Ressourcen haben, bringen Sie die Optimierung noch weiter, indem Sie die folgenden Schritte ausführen:

  1. Zurück zu Einstellungen -> Automatisch optimieren .
  2. Drücken Sie die Schaltfläche Erweiterte Einstellungen anzeigen.
  3. Überprüfen Sie dann die Optionen für Auch js online aggregieren und CSS auch online aggregieren.
    erweiterte Einstellung zur Optimierung von css und js durch Aggregation von CSS und JS online
  4. Speichern Sie Ihre Änderungen.

Speed Booster Pack

Ein weiteres beliebtes Plugin, das Sie nützlich für die Behebung von Javascript-Fehler und Rendering-Sperre css für Ihre WordPress-Website finden könnte, ist Speed Booster Pack.Führen Sie dazu die folgenden Schritte in Ihrem wp-admin-Bereich aus:

  1. Gehen Sie zum Speed Booster Pack und gehen Sie zur Registerkarte Erweitert.
  2. Aktivieren Sie im Menü JavaScript-Optimierung "Skript in Footer verschieben" und beim Defer-JavaScript-Dateiparsing .
    Aktivieren Sie die Skriptnavigation in der Fußzeile und den Aufschub der JavaScript-Dateianalyse im Abschnitt JavaScript-Optimierung, um das Löschen von Javascript- und CSS-Renderingblöcken im obigen Faltfehler zu korrigieren.
  3. Scrollen Sie nach unten zum Menü CSS-Optimierung, um die CsS-Renderingblockoptimierung festzulegen.
  4. Sie finden zusätzliche Einstellungen, um alle CSS auszurichten, alle (zuvor) eingebetteten CSS zu minimieren und alle integrierten CSS in die Fußzeile zu verschieben.Experimentieren Sie mit diesen Optionen, um eine geeignete Lösung zu finden.
    Experimentieren Sie mit CSS-Optimierungen, um die richtige Lösung zu finden

    Wenn Sie einfach all diese aktivieren, wird Ihre Website schneller geladen, aber es könnte auch das unerwünschte Artefakt des nicht gebügelten Inhalts (FOUC) einführen.Dies geschieht, wenn der Browser die Webseite lädt, ohne auf das Laden des Stylesheets zu warten, was zu einem nicht bearbeiteten Momentseitenblitz führt.

Nachdem Sie die oben genannten Methoden versucht haben, kehren Sie zu Googles PageSpeed Insights zurück, um sicherzustellen, dass das Rendern von Blockierungen kein Problem mehr ist.

Schlussfolgerung

Die Website-Geschwindigkeit ist einer der wichtigsten Faktoren, um Besucher anzulocken und zu halten.Dies liegt daran, dass Suchmaschinen die Geschwindigkeit der Website bei der Klassifizierung der Ergebnisse berücksichtigen.

Googles PageSpeed Insights bewertet Websites basierend auf der Upload-Geschwindigkeit.Wenn Sie die berüchtigten Delete JavaScript und CSS, die Rendering in oben-der-fold Vorschläge blockieren, wenn Sie die Leistung Ihrer WordPress-Website analysieren, beheben Sie einfach das Problem mit Plugins.

Wir hoffen, dass dieses Tutorial für Sie nützlich sein wird.Fühlen Sie sich frei, unten zu kommentieren, wenn Sie Fragen haben.Viel Glück!