Repariere Google PageSpeed Eliminiere JavaScript und CSS, die das Rendering blockieren, in Inhalten, die über den Haufen geworfen werden
- Lösen Sie Renderblocking Javascript und CSS
- Beseitigen Sie Render-blockierendes JavaScript und CSS in übergeordneten Inhalten: Zeigen Sie, wie Sie das Problem beheben können
- Das Laden von Javascript-Dateien verzögern
- Laden Sie CSS nach dem Laden von HTML
- Bestehen Sie den Geschwindigkeitstest der Google-Website!
- Wie man Render-blockierende Ressourcen in WordPress eliminiert
- Lassen Sie Ihre Website von einem externen System für Sie optimieren
- Häufig Gestellte Fragen
- Perfekter Chrom-Leuchtturm Score: Was passiert? - video
- Bemerkungen (8)
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.comRenderblockierende 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
- Lassen Sie Ihre Website von einem externen System für Sie optimieren
- 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:
- Das Laden von Javascript-Dateien verzögern
- Laden Sie CSS nach dem Laden von HTML
- 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.comLaden 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.comUm 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.comWie 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 lernenDadurch 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 WordPressVergessen 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!
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 NetworkDarü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.
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 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