Möchten Sie Dateien (CSS & JS) entfernen, die das Laden von Seiten in WordPress blockieren? Wenn Sie Ihre Website mit Google Insights PageSpeed testen, wird wahrscheinlich ein Vorschlag angezeigt, Skripte zu entfernen, die das Laden von Seiten blockieren. In diesem Tutorial zeigen wir Ihnen, wie Sie diese Dateien reparieren, die das Laden Ihrer Seiten blockieren, um Ihren Google PageSpeed-Score zu verbessern.
Was blockiert das Laden von Seiten?
Jede WordPress-Site hat ein Theme und Plugins, die JavaScript- und CSS-Dateien am Ende und bevor die Seite im Browser sichtbar ist, hinzufügen. Diese Skripte können die Ladezeit der Seite Ihrer Site verlängern und das Rendern der Seite blockieren.
Der Browser eines Benutzers muss Skripte und CSS laden, bevor der Seiteninhalt geladen wird. Dies bedeutet, dass Benutzer mit einer langsameren Verbindung noch einige Millisekunden warten müssen, um die Seite anzuzeigen.
Websitebesitzer, die versuchen, eine gute Google PageSpeed-Punktzahl zu erzielen, müssen dieses Problem beheben.
1 - So korrigieren Sie das Rendern von Seiten mit Autoptimize
Diese Methode ist einfacher und wird für die meisten Benutzer empfohlen.
Als erstes müssen Sie das Plugin installieren und aktivieren. " Autoptimize “. Weitere Einzelheiten finden Sie unter Unsere Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nachdem Sie das Plugin aktiviert haben, müssen Sie " Einstellungen> Automatisch optimieren So konfigurieren Sie die Plugin-Einstellungen.
Sie können beginnen, indem Sie das Optionsfeld JavaScript und CSS aktivieren und dann auf die Schaltfläche "Änderungen speichern" klicken.
Sie können jetzt Ihre testen Website mit dem PageSpeed-Tool. Wenn immer noch Skripte das Seiten-Rendering blockieren, müssen Sie zur Seite mit den Plugin-Einstellungen zurückkehren und oben auf die Schaltfläche „Erweiterte Einstellungen anzeigen“ klicken.
Hier können Sie dem Plugin erlauben, JS inline einzuschließen und Skripte zu entfernen, die standardmäßig ausgeschlossen sind, wie "seal.js" oder "jquery.js".
Scrollen Sie dann nach unten zur CSS-Option und lassen Sie das Plugin alle CSS-Dateien kombinieren.
Klicken Sie auf die Schaltfläche „Änderungen speichern und Cache leeren“, um Ihre Änderungen zu speichern und Leeren Sie den Cache das Plugin.
Wenn Sie fertig sind, gehen Sie vor und überprüfen Sie Ihre Website wieder mit dem PageSpeed-Tool.
Stellen Sie sicher, dass Sie Ihre Site sorgfältig testen, um sicherzustellen, dass nach der Optimierung Ihrer JavaScripts oder CSS-Dateien alles einwandfrei funktioniert.
2 - Fix Datei-Rendering mit W3 Total Cache
Diese Methode erfordert etwas mehr Arbeit und wird denjenigen empfohlen, die bereits über W3 Total Cache verfügen Webseite.
Zuerst müssen Sie das W3 Total Cache Plugin installieren und aktivieren. Wenn du Hilfe benötigst, Sehen Sie unsere komplette Führungs W3 Total Cache.
Dann müssen Sie "Leistung> Allgemeine Einstellungen" aufrufen und zum Abschnitt "Minimieren" scrollen.
Zunächst müssen Sie das Kontrollkästchen "Aktivieren" aktivieren und dann "Manuell" für die Option "Minimierungsmodus" auswählen.
Klicken Sie auf die Schaltfläche Speichern Sie alle Einstellungen Speichern Sie Ihre Einstellungen.
Dann müssen Sie Skripte und CSS Sie verkleinern wollen hinzuzufügen.
Sie können die URLs aller Skripte und Stylesheets abrufen, die gemäß Google PageSpeed Insights kombiniert werden müssen.
Unter den Vorschlägen, wo es heißt, " Eliminate Render-blocking JavaScript und CSS ", Klicken Sie auf" Zeigen, wie zu lösen ". Es zeigt Ihnen die Liste der Skripte und Stylesheets.
Bewegen Sie die Maus über ein Skript und es wird Ihnen die vollständige URL angezeigt. Sie können diese URL auswählen und dann STRG + C auf Ihrer Tastatur (Befehl + C auf dem Mac) verwenden, um die URL zu kopieren.
Gehen Sie jetzt zu Ihrem WordPress-Admin-Board und gehen Sie zu " Leistung > minifier ".
Zuerst müssen Sie JavaScript-Dateien hinzufügen, die Sie komprimieren möchten. Scrollen Sie nach unten zum JS-Abschnitt und dann unter dem Satz "Operationen in Zonen" vom Typ "Einbetten" für den Abschnitt "Nicht mit 'asynchron' blockieren" .
Dann müssen Sie auf die Schaltfläche klicken Skript hinzufügen Fügen Sie dann Skript-URLs hinzu, die Sie aus dem Google PageSpeed-Tool kopiert haben.
Wenn Sie fertig sind, scrollen Sie zum CSS-Bereich und klicken Sie auf die Schaltfläche "Stylesheet hinzufügen". Fügen Sie nun die Stylesheet-URLs hinzu, die Sie mit dem Google PageSpeed-Tool kopiert haben.
Klicken Sie nun auf die Schaltfläche Einstellungen speichern & Cache leeren Zum Speichern Ihrer Einstellungen.
Besuchen Sie das Google PageSpeed-Tool und testen Sie Ihre Website erneut.
Stellen Sie sicher, dass Sie auch Ihre Website sorgfältig testen, um sicherzustellen, dass alles einwandfrei funktioniert.
Das ist alles für dieses Tutorial, ich hoffe, es wird Ihnen helfen, die Leistung Ihres zu verbessern Wordpress-Blog.
