Springe zum Hauptinhalt

So beheben Sie das Blockieren von JavaScript und CSS-Rendering in WordPress

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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.

So beheben Sie blockierende Javascript-Renderings CSS WordPress Blogpascher 1

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.

Brauchen Sie wirklich eine Punktzahl von „100“ 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 die Optimierungsoptionen für JavaScript und CSS nicht aktiviert. Diese Optimierungen können möglicherweise das Aussehen Ihrer Website oder bestimmte Funktionen beeinflussen. Aus diesem Grund können Sie diese Einstellungen optional mit dem Plugin aktivieren.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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.

So beheben Sie blockierende Javascript-Renderings CSS WordPress Blogpascher 2

Remarque : WP Rocket versucht, alle Ihre CSS-Dateien zu minimieren, zu kombinieren und nur das CSS zu laden, das für den sichtbaren Teil Ihrer Website benötigt wird. Dies kann sich auf das Erscheinungsbild Ihrer Website auswirken. Testen Sie Ihre Website daher sorgfältig auf mehreren Geräten und Bildschirmgrößen.

Dann müssen Sie zum Abschnitt scrollen JavaScript-Dateien. Von hier aus können Sie alle Optionen für die maximale Leistungsverbesserung ankreuzen.

So beheben Sie blockierende Javascript-Renderings CSS WordPress Blogpascher 3

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'.

So beheben Sie blockierende Javascript-Renderings CSS WordPress Blogpascher 4

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.

So beheben Sie blockierende Javascript-Renderings CSS WordPress Blogpascher 5

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.

So beheben Sie blockierende Javascript-Renderings CSS WordPress Blogpascher 6

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.

So beheben Sie blockierende Javascript-Renderings CSS WordPress Blogpascher 7

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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.

So beheben Sie blockierende Javascript-Renderings CSS WordPress Blogpascher 9

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. Beachten Sie jedoch, dass dies auch die Leistung oder das Erscheinungsbild Ihrer Website beeinträchtigen kann.

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.Plugin zur Geschwindigkeitsoptimierung in Wordpress

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 CDN, aber das Ergebnis ist dennoch beeindruckend. Zögern Sie also nicht, dieses WordPress-Plugin auszuprobieren, um zu sehen, wozu es in der Lage ist.

Download | 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.

Social Share Locker Pro WordPress-Plugin

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.

Download | Demo | Web-Hosting

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

3. WordPress PDF Images Leuchtkasten

WordPress PDF Lightbox ist eine WordPress-Erweiterung, mit der Sie PDF-Viewer erstellen können. Ein PDF-Viewer ist eine Sammlung von Fotos, die als PDF-Dateien gespeichert werden können.Wordpress Bilder PDF Lightbox Plugin WordPress

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
  • Per E-Mail senden: Wenn diese Funktion aktiviert ist, wird direkt nach der Bildergalerie ein Kontaktformular angeboten. Über dieses Formular können Benutzer das erstellte PDF per E-Mail an jeden senden.

Download | Demo | Web-Hosting

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Fazit

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.

...  

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren