Repariere Google PageSpeed ​​Eliminiere JavaScript und CSS, die das Rendering blockieren, in Inhalten, die über den Haufen geworfen werden

Der Google PageSpeed ​​[1] -Test Rendering blockierendes JavaScript und CSS in überfalteten Inhalten beseitigen schlägt vor, dass Sie die JS- und CSS-Dateien Ihrer Website nach dem vollständigen Laden des HTML-Codes bereitstellen - und halten Sie daher Ihr HTML-Laden nicht an um sie herunterzuladen.


Lösen Sie Renderblocking Javascript und CSS

Der  Google PageSpeed   ​​[1] -Test Rendering blockierendes JavaScript und CSS in überfalteten Inhalten beseitigen schlägt vor, dass Sie die JS- und CSS-Dateien Ihrer Website nach dem vollständigen Laden des HTML-Codes bereitstellen - und halten Sie daher Ihr HTML-Laden nicht an um sie herunterzuladen.

[1] - PageSpeed ​​Insights - developer.google.com
Renderblockierende Skriptdefinition: Skripte, die geladen werden, bevor das vollständige HTML-DOM analysiert wurde. Zum Beispiel Skripte, die im Header oder im Inhalt enthalten sind, ohne spezielle Anweisungen für Browser, um das Laden von Skripten bis nach dem HTML-Malen zu verzögern.

Beseitigen Sie Render-blockierendes JavaScript und CSS in übergeordneten Inhalten: Zeigen Sie, wie Sie das Problem beheben können

  1. Lassen Sie Ihre Website von einem externen System für Sie optimieren
  2. Verwenden Sie ein CDN, das alle möglichen Optimierungen in Ihrem Namen durchführt, einschließlich der drei folgenden Optimierungen, die zur Behebung von Renderblockierungsressourcen erforderlich sind:
  3. Das Laden von Javascript-Dateien verzögern
  4. Laden Sie CSS nach dem Laden von HTML
  5. Verwenden Sie ein WordPress-Plugin

Es sind viele Optimierungen erforderlich, um Render-blockierende Ressourcen zu beseitigen, und es kann mühsam sein, sie selbst zu implementieren. Außerdem müssen Sie ständig nach neuen Tests Ausschau halten, die unter anderem in Chrome LightHouse und  Google PageSpeed   ​​enthalten sind.

Es gibt keine Lösung, um Render-blockierende Ressourcen im htaccess-Code zu beseitigen, da das Problem mit DOM zusammenhängt, dh dem Inhalt der Website und der Reihenfolge, in der die enthaltenen Ressourcen geladen werden, wie z. B. Javascript und CSS, aber nicht nur. Diese können nicht in Htaccess ausgelöst werden, sondern nur im HTML-DOM-Inhalt.

Wenn Sie diese Probleme für den Desktop lösen, werden Sie gleichzeitig Render-Blocking-Ressourcen für Mobilgeräte eliminieren, da beide genau gleich sind!

Did you know that you can even have all these steps executed automatically for you by using an external  Site Speed ​​Accelerator   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Das Laden von Javascript-Dateien verzögern

Um das Laden Ihrer JS-Dateien [2] zu verzögern, können Sie den Skripten-Links entweder die Async- oder Defer-Anweisung hinzufügen. Async garantiert nicht, dass sie in der gleichen Reihenfolge geladen sind. Wenn Sie also mehrere Skripte haben, die nacheinander ausgeführt werden sollten, ist eine Verzögerung vorzuziehen, um die Reihenfolge zu garantieren:

[2] - Entfernen Sie Render-Blocking JavaScript | PageSpeed ​​Insights | Gute Entwickler - developer.google.com

Laden Sie CSS nach dem Laden von HTML

Damit das CSS nach der Übertragung des vollständigen HTML-Codes geladen werden kann, schlägt Google [3] vor, dieses Codeelement am Ende des HTML-Codes hinzuzufügen, z. B. nach dem schließenden Tag der Fußzeile und vor dem schließenden Tag des Tags:

[3] - CSS-Bereitstellung optimieren | PageSpeed ​​Insights | Gute Entwickler - developer.google.com

Um Ihre Website zu optimieren, ist es auch eine gute Idee, ungenutzter CSS-Code zu entfernen, eine Operation, die langweilig sein kann, wenn Sie kein Wissen im Webdesign haben. Wenn Sie Ihr Website-Thema nicht selbst erstellt haben, kann es sein, ein externes System, um ein externes System zu verwenden, um nicht verwendete CSS-Code auf Ihren Seiten in Ihrem Namen zu entfernen, z. B. den Ezoic-Sprung, z. B. die neue (und total kostenlose) Version ihrer erstaunlichen Site Geschwindigkeitsbeschleuniger.

Bestehen Sie den Geschwindigkeitstest der Google-Website!

Dies ermöglichte mir, den  Google PageSpeed   ​​[1] -Test zu bestehen. Erledige Rendering-blockierendes JavaScript und CSS in above-the-fold-Inhalten (zusammen mit Leverage Browser Caching [4]) auf einer Website von 51 auf Mobilgeräten ( Fig 1) bis 72 (Fig. 2) und von 59 (Fig. 3) bis 79 auf dem Desktop (Fig. 4).

[4] - Korrigieren Sie das Browser-Caching von Google PageSpeed ​​in htaccess - Yoann Bierling, Internationaler SAP / Web Consultant - www.ybierling.com

Wie man Render-blockierende Ressourcen in WordPress eliminiert

Um Render-Blocking-Ressourcen in WordPress zu eliminieren, muss ein Plugin wie JetPack installiert werden.

Wechseln Sie dann zu den Optionen, für die Sie Administrator sein müssen, und gehen Sie zu JetPack-Optionen> Schreiben> Leistung und Geschwindigkeit. Aktivieren Sie das Kontrollkästchen Site-Beschleuniger aktivieren, das Laden von Images beschleunigen, das Laden von statischen Dateien beschleunigen und das langsame Laden aktivieren Bilder.

Lernen Sie SEO -Grundlagen: Melden Sie sich noch heute an!

Steigern Sie die Sichtbarkeit und den Verkehr Ihrer Website, indem Sie die Grundlagen der SEO mit unserem leicht zu befolgenden Basics-Kurs beherrschen.

Fangen Sie an, SEO zu lernen

Steigern Sie die Sichtbarkeit und den Verkehr Ihrer Website, indem Sie die Grundlagen der SEO mit unserem leicht zu befolgenden Basics-Kurs beherrschen.

Dadurch werden Ressourcen für das Rendering-Blockieren in WordPress eliminiert und Seiten werden schneller geladen, indem JetPack die Möglichkeit hat, Ihre Bilder zu optimieren und Bilder und statische Dateien (wie CSS und JavaScript) von ihrem globalen Servernetzwerk aus zu liefern.

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

Vergessen Sie auch nicht, das Laden von Bildern außerhalb des Bildschirms mit einer faulen Lastfunktion zu verschieben. Während es schwierig war, eine externe Bibliothek zu erfordern, um das Laden von Bildern außerhalb des Bildschirms zu verschieben, ist es nun in HTML5 nativ möglich!

Lazy-Laden von Bildern: Website-Bilder werden nur an den Server angefordert, wenn Benutzer auf der Webseite blättern und sie möglicherweise anzeigen

Um ein faules Laden von Bildern auf Ihren Websites zu implementieren, fügen Sie einfach die Werte faul an die Attribute, die Ihre Website-Bilder laden, und die neuesten Browser werden verstehen, dass diese Bilder nur angefordert und geladen werden sollen, wenn sie angezeigt werden, was der Benutzer nach unten scrollt die Image-Platzhalter.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy Loading - Web Performance - Mozilla Developer Network

Darüber hinaus funktioniert das Lazy-Laden auch mit Iframes und ist eine wichtige Implementierung, um Rendern-Blockiermittel aus Ihren Webseiten zu beseitigen.

Sobald die Rendering-Blockierer-Ressourcen Anweisungen zum Laden des Hauptinhalts haben, dh den HTML-DOM, erhalten Sie bereits viele Punkte auf dem Google Lighthouse-Test, dem Seitend-Geschwindigkeits-Insights-Test oder den Google Core-Web-Vitals.

Lassen Sie Ihre Website von einem externen System für Sie optimieren

Wissen Sie, dass Sie tatsächlich alle Google PageSpeed-Probleme in Ihrem Namen lösen können, ohne großen Aufwand von Ihrer Website - außer sich für eine kostenlose Testversion zu registrieren und Ihr DNS zu ändern?

Mithilfe der Site Speed ​​Accelerator-Technologie der Ezoic-Plattform werden alle üblichen Probleme mit  Google PageSpeed   ​​von ihrem System gelöst, das als Vermittler zwischen Ihrer Website und den Besuchern fungiert. Sie optimieren die Webseite für Sie, bevor sie Ihrem Besucher angezeigt werden.

Im April 2021 wird der ezoic-bezahlte Standortgeschwindigkeitsbeschleuniger kostenfreien ezoic-Sprung, und hilft Websites, die Kernweb-Vitals Green Scores kostenlos erreichen!

Werden Sie grün, indem Sie sich einfach für eine kostenlose Testversion auf der Ezoic-Plattform registrieren und selbst ausprobieren. Dadurch erreicht Ihre Website innerhalb weniger Tage die höchsten Standards für die Optimierung der Seitengeschwindigkeit: Rendern Sie Webp-Bilder der nächsten Generation, optimieren Sie CSS und JavaScript, indem Sie nicht verwendetes CSS entfernen und JS, verzögertes Laden von Bildern, Ändern der Bildgröße, Zwischenspeichern Ihrer Websiteseiten, Optimieren von Schriftarten, Vorabverbindung zu allen enthaltenen Websites und vieles mehr.

Keine Kreditkarte erforderlich - Sie müssen sich nur kostenlos registrieren und ausprobieren. Wenn Ihre Website mit Display-Anzeigen Geld verdient und Ihre Website viel schneller wird, können Sie damit auch ein Vielfaches mehr Geld verdienen als mit Google AdSense, indem Sie Ihre Anzeigen mit maschinellem Lernen und fortschrittlicher künstlicher Intelligenz optimieren.

Häufig Gestellte Fragen

Wie beseitigen Sie JavaScript und CSS in Renderblocking in oberhalbfachem Inhalt?
Um das Rendern-Blocking-JavaScript und CSS für den oberflechten Inhalt zu beseitigen, sollten Sie sicherstellen, dass die JS- und CSS-Dateien Ihrer Website nach voll geladenem HTML geladen werden. Dies bedeutet, dass Sie den HTML -Ladevorgang nicht innehieren, um diese Dateien herunterzuladen. Sie können JavaScript -Dateien mit dem Async- oder Defer -Attribut verschieben und für CSS können Sie mit spezifischem Code nach dem HTML laden. Ein externes Optimierungssystem wie Ezoic kann dies auch automatisch verarbeiten.
Wie können Webentwickler die Empfehlung von Google PageSpeed ​​zur Beseitigung von Render-Blocking-JavaScript und CSS beheben?
Webentwickler können ihre Website optimieren, indem sie JavaScript- und CSS-Dateien minimieren, asynchrones Laden für JavaScript verwenden, kritische CSS direkt in die HTML einbeziehen und das Laden nichtkritischer CSS und JavaScript-Dateien aufschieben. Die Implementierung dieser Strategien kann die Ladezeiten und die PageSpeed ​​-Scores erheblich verbessern.

Perfekter Chrom-Leuchtturm Score: Was passiert?


Yoann Bierling
Über den Autor - Yoann Bierling
Yoann Bierling ist ein Professionell für Web Publishing & Digital Consulting, der sich durch Fachwissen und Innovationen in Technologien global auswirkt. Er leidenschaftlich für die Stärkung von Einzelpersonen und Organisationen, um im digitalen Zeitalter gedeihen zu können, ist ermächtig, um außergewöhnliche Ergebnisse zu erzielen und das Wachstum durch Bildungsinhalte zu fördern.

Lernen Sie SEO -Grundlagen: Melden Sie sich noch heute an!

Steigern Sie die Sichtbarkeit und den Verkehr Ihrer Website, indem Sie die Grundlagen der SEO mit unserem leicht zu befolgenden Basics-Kurs beherrschen.

Fangen Sie an, SEO zu lernen

Steigern Sie die Sichtbarkeit und den Verkehr Ihrer Website, indem Sie die Grundlagen der SEO mit unserem leicht zu befolgenden Basics-Kurs beherrschen.




Bemerkungen (8)

 2018-08-19 -  quranapk
Ich liebe es, deine Inhalte zu lesen und weiter zu posten - es hat mir geholfen, das Rendering-Blocking von CSS zu beheben
 2018-09-23 -  Monica
So machen wir es also. Es ist großartig zu wissen, wie man Render-blockierende Ressourcen eliminiert
 2018-09-25 -  Van
Großartig, genau das habe ich gesucht. Jetzt bin ich bereit, Render-Blocking-Ressourcen auf Mobilgeräten zu eliminieren
 2018-11-03 -  utumikaji0
Erstaunlich, jetzt ist es Zeit für mich, es zu versuchen und Render-Blocking-Ressourcen zu beseitigen!
 2019-01-12 -  Leo
Ich weiß nicht, wie ich mich bei Ihnen bedanken soll, aber das ist einfach genial, danke - es hat unter WordPress funktioniert, um Renderblockierungsressourcen zu entfernen
 2019-04-21 -  Ludanulema
Hallo, ich habe Ihren Artikel gesehen und er hat mir geholfen, das Problem zu lösen, Render-Blocking-Ressourcen in PHP zu eliminieren. Vielen Dank
 2019-06-12 -  animeg2Q
Ich werde es jetzt versuchen, danke, dass Sie dieses Update zur Beseitigung von Renderblockierungsressourcen freigegeben haben
 2019-07-02 -  Gasfackele
Es hat gut funktioniert, ich musste nicht weiter suchen, um Render-Blocking-Ressourcen in der HTML-Website zu eliminieren

Hinterlasse einen Kommentar