Möchten Sie die Blockierung von JavaScript- und CSS-Rendering in WordPress beseitigen?
Wenn Sie Ihre Website auf Google PageSpeed Insights testen, wird wahrscheinlich ein Vorschlag zum Entfernen von Skript- und CSS-Renderingblöcken angezeigt. Es enthält jedoch keine Details dazu auf Ihrer WordPress-Website.
In diesem Artikel zeigen wir Ihnen, wie Sie die Blockierung von JavaScript und CSS-Rendering in WordPress auf einfache Weise beheben können, um Ihren Google PageSpeed-Score zu verbessern.
Aber lassen Sie uns vorher gemeinsam entdecken Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren.
Was ist JavaScript- und CSS-Renderblockierung?
Das Blockieren von JavaScript- und CSS-Renderings sind Dateien, die verhindern, dass eine Website vor dem Laden eine Webseite anzeigt.
Jede WordPress-Website verfügt über ein Thema und Plugins, die dem Frontend Ihrer Website JavaScript- und CSS-Dateien hinzufügen. Diese Skripte können die Ladezeit Ihrer Website verlängern und das Rendern von Seiten blockieren.
Der Browser eines Benutzers muss diese Skripte und CSS laden, bevor der Rest des HTML-Codes auf die Seite geladen wird. Dies bedeutet, dass Benutzer mit einer langsameren Verbindung noch einige Millisekunden warten müssen, um die Seite anzuzeigen.
Diese Skripte und Stylesheets werden als JavaScript- und CSS-Renderblocker bezeichnet.
Websitebesitzer, die versuchen, eine Google PageSpeed-Punktzahl von 100 zu erreichen, müssen dies beheben, um die perfekte Punktzahl zu erzielen.
Was ist der Google PageSpeed Score?
Google PageSpeed Insights ist ein von Google entwickeltes Tool zum Testen der Geschwindigkeit, mit dem Websitebesitzer ihre Websites optimieren und testen können. Dieses Tool testet Ihre Website anhand der Geschwindigkeitsrichtlinien von Google und bietet Vorschläge zur Verbesserung der Ladezeiten Ihrer Website-Seiten.
Es zeigt Ihnen eine Punktzahl basierend auf der Anzahl der Regeln, die Ihre Website durchläuft. Die meisten Websites sind zwischen 50 und 70 Jahre alt. Einige Websitebesitzer fühlen sich jedoch unter Druck gesetzt, 100 zu erreichen.
Benötigen Sie wirklich eine "100" Punktzahl bei Google PageSpeed?
Der Zweck von Einblicke in Google PageSpeed ist es, Ihnen Richtlinien zur Verbesserung der Geschwindigkeit und Leistung Ihrer Website zur Verfügung zu stellen. Sie müssen diese Regeln nicht strikt befolgen.
Denken Sie daran, Geschwindigkeit ist nur eine der vielen SEO-Metriken, mit denen Google bestimmen kann, wie Ihre Website eingestuft wird. Der Grund, warum Geschwindigkeit so wichtig ist, ist, dass sie sich verbessert die Benutzererfahrung auf Ihrer Website.
Eine bessere Benutzererfahrung erfordert viel mehr als Geschwindigkeit. Sie müssen auch nützliche Informationen anbieten, bessere Benutzeroberfläche und Inhalte mit Text, Bildern und Videos verknüpfen.
Ihr Ziel sollte es sein, eine schnelle Website zu erstellen, die eine großartige Benutzererfahrung bietet.
Bei der letzten Neugestaltung von BlogPasCher haben wir uns auf die Geschwindigkeit konzentriert und die Benutzererfahrung verbessert.
Wir empfehlen, dass Sie Google Pagespeed-Regeln als Vorschlag verwenden. Wenn Sie diese problemlos implementieren können, ohne die Nutzererfahrung zu beeinträchtigen, ist das großartig. Wenn nicht, sollten Sie sich bemühen, so viel wie möglich zu tun, und sich dann keine Sorgen um den Rest machen.
Schauen wir uns vor diesem Hintergrund an, wie Sie die Blockierung von JavaScript- und CSS-Rendering in WordPress beheben können.
Wir werden zwei Methoden behandeln, die dieses Problem beheben. Sie können diejenige auswählen, die auf Ihrer Website am besten funktioniert.
1. Korrigieren Sie Render-Blocking-Skripte und CSS mit WP Rocket
Für diese Methode verwenden wir das WP Rocket Plugin. Das ist das beste WordPress Caching Plugin auf dem Markt und ermöglicht es Ihnen, die Leistung Ihrer Website schnell zu verbessern, ohne dass technische oder komplexe Fähigkeiten eingerichtet werden müssen.
Zunächst müssen Sie das WP Rocket-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins..
WP Rocket aktiviert seinen Cache mit optimalen Einstellungen. Standardmäßig sind JavaScript- und CSS-Optimierungsoptionen nicht aktiviert. Diese Optimierungen können möglicherweise Auswirkungen auf dieAussehen Ihrer Website oder bestimmte Funktionen, deshalb können Sie diese Einstellungen mit dem Plugin optional aktivieren.
Dazu muss man weitermachen Einstellungen »WP Rocket, dann wechseln Sie zu 'Dateioptimierung '. Scrollen Sie von dort nach unten zum Abschnitt CSS-Dateien und kreuzen Sie die Kästchen an CSS reduzieren, CSS-Dateien kombinieren et Optimieren Sie die CSS-Bereitstellung.
Remarque : WP Rocket versucht, alle Ihre CSS-Dateien zu verkleinern, zu kombinieren und nur das notwendige CSS für den sichtbaren Teil Ihrer Website zu laden. Dies könnte Auswirkungen auf die habenAussehen Ihrer Website, daher sollten Sie Ihre Website gründlich auf mehreren Geräten und Bildschirmgrößen testen.
Dann müssen Sie zum Abschnitt scrollen JavaScript-Dateien. Von hier aus können Sie alle Optionen für die maximale Leistungsverbesserung ankreuzen.
Sie können JavaScript-Dateien genauso wie CSS-Dateien minimieren und kombinieren.
Sie können auch verhindern, dass WordPress die Datei hochlädt. jQuery-Migration. Dies ist ein Skript, das WordPress lädt, um Kompatibilität für Plugins und Themes mit älteren Versionen von jQuery bereitzustellen.
Die meisten Websites benötigen diese Datei nicht, aber es ist eine gute Idee, Ihre Website zu überprüfen, um sicherzustellen, dass sich das Entfernen nicht auf Ihr Thema oder Ihre Plugins auswirkt.
Scrollen Sie dann etwas weiter nach unten und überprüfen Sie die Optionen.Laden Sie JavaScript verzögert'und'Abgesicherter Modus für jQuery'.
Diese Optionen verzögern das Laden von nicht unbedingt erforderlichem JavaScript. Im abgesicherten jQuery-Modus können Sie jQuery für Themen laden, die es inline verwenden können.
Denken Sie daran, auf die Schaltfläche Änderungen speichern zu klicken, um Ihre Einstellungen zu speichern.
Danach können Sie den Cache auch in WP Rocket leeren, bevor Sie Ihre Website erneut mit Google Page Speed Insights testen.
Auf unserer Testwebsite konnten wir auf Desktops eine 100% ige Punktzahl erzielen, und das Problem mit dem Rendern wurde sowohl in der mobilen als auch in der Desktop-Punktzahl behoben.
2. Beheben Sie die Blockierung von JavaScript und CSS-Rendering mit Autoptimize
Für diese Methode verwenden wir ein anderes Plugin, das speziell entwickelt wurde, um die Bereitstellung der CSS- und JS-Dateien Ihrer Website zu verbessern. Während dieses Plugin die Arbeit erledigt, fehlen ihm die anderen leistungsstarken Funktionen, die WP Rocket bietet.
Als erstes müssen Sie das Plugin installieren und aktivieren Autoptimize. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zum Installieren eines WordPress-Plugins.
Bei der Aktivierung müssen Sie die Seite besuchen Einstellung »Autoptimieren um die Plugin-Einstellungen zu konfigurieren.
Zunächst müssen Sie die Option 'Optimieren Sie den JavaScript-Code'unter dem Block JavaScript Optionen. Stellen Sie sicher, dass die Option "Alle verknüpften JS-Dateien aggregieren" nicht aktiviert ist.
Scrollen Sie dann nach unten in den Bereich CSS-Optionen und aktivieren Sie die Option ' CSS-Code optimieren?'. Stellen Sie sicher, dass die Option 'Aggregieren Sie alle verknüpften CSS-Dateien'wird nicht geprüft.
Sie können jetzt auf die Schaltfläche "Änderungen speichern und Cache löschen" klicken, um Ihre Einstellungen zu speichern.
Testen Sie Ihre Website mit Page Speed Insights. Auf unserer Demo-Website konnten wir das Problem mit dem Rendern mit diesen Grundeinstellungen beheben.
Wenn dort immer noch Render-Blockierungsskripte vorhanden sind, sollten Sie zur Einstellungsseite des Plugins zurückkehren und sich die JavaScript- und CSS-Optionen ansehen.
Beispielsweise 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.
Klicken Sie auf die Schaltfläche "Änderungen speichern und Cache löschen", um Ihre Änderungen zu speichern und den Plugin-Cache zu löschen.
Wenn Sie fertig sind, überprüfen Sie Ihre Website erneut mit dem Tool Page Speed Insights.
Wie funktioniert es?
Autoptimize bündelt alle JavaScript- und CSS-Dateien. Danach schafft er minimierte CSS- und JavaScripts-Dateien und liefert zwischengespeicherte Kopien Ihrer Website synchronisiert oder zurückgestellt.
Auf diese Weise können Sie das Blockierungsproblem lösen Renderings Skripte und Blockierungsstile. Bitte beachten Sie jedoch, dass dies auch Auswirkungen auf die Leistung haben kannAussehen Ihrer Website.
Hilfe
Abhängig davon, wie die Plugins und Ihr WordPress-Theme JavaScript und CSS verwenden, kann es schwierig sein, alle Probleme mit vollständig zu lösen blockierend der JavaScript- und CSS-Renderings.
Die oben genannten Tools können zwar hilfreich sein, Ihre Plugins benötigen jedoch möglicherweise bestimmte Skripte mit einer anderen Prioritätsstufe, um ordnungsgemäß zu funktionieren. In diesem Fall können die oben genannten Lösungen die Funktionalität dieser Plugins beeinträchtigen oder sich unerwartet verhalten.
Google kann Ihnen weiterhin einige Probleme wie die Optimierung der CSS-Bereitstellung anzeigen. Mit WP Rocket können Sie dies beheben, indem Sie manuell das wichtige CSS hinzufügen, das für die perfekte Anzeige Ihres WordPress-Themas erforderlich ist.
Es kann jedoch schwierig sein zu wissen, welchen CSS-Code Sie anzeigen müssen.
Entdecken Sie auch einige Themen und Premium-WordPress-Plugins
Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.
Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.
1. WordPress Speed Optimization Plugin
Haben Sie Probleme, mehrere Plugins zur Optimierung der Website-Geschwindigkeit zu verwalten? Befürchten Sie, dass sie die Ausführungsgeschwindigkeit Ihrer Website beeinträchtigen? Dann ist dieses WordPress-Plugin die ultimative Lösung für alle Ihre Sorgen.
Dieses Plugin bietet Ihnen die Funktionalität von fast 6-8 verschiedenen WordPress-Plugins. Sie müssen es nur installieren und konfigurieren, um eine deutliche Verbesserung beim Laden Ihrer Seiten zu sehen.
Wir möchten darauf hinweisen, dass dies kein ist Cache-Plugin oder CDNDas Ergebnis ist dennoch beeindruckend. Zögern Sie also nicht, dieses WordPress-Plugin auszuprobieren, um zu sehen, wozu es in der Lage ist.
Herunterladen | Demo | Web-Hosting
2. Social Share & Locker Pro
Das Social Share & Locker Pro-Plugin wurde entwickelt, um Ihre Website in sozialen Netzwerken besser sichtbar zu machen. Mit nur wenigen Klicks können Sie entweder die Position Ihrer sozialen Symbole festlegen oder Ihre Inhalte sperren, indem Sie die Freigabe in einem der von Ihnen angebotenen sozialen Netzwerke verlangen.
Sie haben vordefinierte 10-Themen und dies sollte die häufigsten Wünsche abdecken. Alle ihre Themen sind Retina und wirken Wunder.
Mit Social Share & Locker Pro können Sie außerdem den vollständigen Namen der sozialen Netzwerke oder nur das Symbol anzeigen. Dies hängt von Ihrem Design, dem verfügbaren Platz oder Ihren Wünschen ab.
Herunterladen | Demo | Web-Hosting
3. WordPress PDF Images Leuchtkasten
WordPress PDF Lightbox ist eine WordPress-Plugin mit dem Sie Viewer für PDF-Dateien erstellen können. Ein PDF-Viewer ist eine Sammlung von Fotos, die als PDF-Dateien gespeichert werden können.
Mit dieser Erweiterung können Sie so viele PDF-Viewer erstellen, wie Sie möchten. Für jeden Viewer kann der Administrator einige Optionen festlegen:
- Titelbild: Wird als erste Seite der vom Benutzer erstellten PDF-Datei hinzugefügt
- Maximale Bilder pro Betrachter
- Ein Wasserzeichenbild: Wird auf PDF-Seiten angewendet
- Versand per E-Mail: Wenn diese Funktion aktiviert ist, a Kontaktformular wird direkt nach der Bildergalerie angeboten. Über dieses Formular können Benutzer das erstellte PDF per E-Mail an jeden senden.
Herunterladen | Demo | Web-Hosting
Empfohlene Ressourcen
Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.
- 10 WordPress Plugins zur Verbesserung der SEO Ihrer Website
- 5 Premium WordPress Plugins zur Optimierung Ihrer Kategorien
- 10 WordPress-Plugins zum Umrechnen von Währungen
- 10 Wordpress-Plugins einen Audio-Player in eine Website zu integrieren
Zusammenfassung
Hier ! Das war's für dieses Tutorial. Wir hoffen, dieser Artikel hat Ihnen geholfen, das Blockieren von JavaScript- und CSS-Rendering in WordPress zu beheben. Sie können auch unsere sehen ultimative Anleitung zur Beschleunigung der WordPress-Leistung für Anfänger.
Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.
Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken. Und wenn Sie Vorschläge oder Anmerkungen haben, lassen Sie diese in unserem Bereich commentaires.
...
