Wenn es um die Geschwindigkeit Ihrer Webseite geht, ist es wichtig, die Geschwindigkeit als notwendiges Feature und nicht als Luxus zu betrachten und sie auch dementsprechend zu behandeln. Es gibt eine Menge Dinge, die bestimmen, wie schnell Website-Besucher Inhalte sehen können, wenn sie Ihre Webseite aufrufen. Einige dieser Dinge können Sie nicht beeinflussen: Die Geschwindigkeit der Internetverbindung Ihres Besuchers, dessen geografische Lage, lokale Netzwerküberlastung und so weiter. Es gibt jedoch einige Dinge, die Sie kontrollieren können und sollten.

Ein Tool, das Ihnen zur Identifizierung von Problemen, die Geschwindigkeitsreduzierung verursachen, zur Verfügung steht, ist Google PageSpeed Insights. Sicherlich haben Sie PageSpeed Insights schon einmal benutzt (wenn Sie es nicht getan haben, ist dies Ihr Stichwort, es auszuprobieren, bevor Sie den Rest des Artikels lesen). Es ist kostenlos und zeigt Ihnen Probleme an, die die Bereitstellung Ihrer Websites verlangsamen, wie z.B. Render-Blocking von JavaScript und CSS.

Allgemeines Problem: Render-Blocking von JavaScript und CSS

Es gibt zehn Geschwindigkeitsregeln, mit denen Websites analysiert werden, die über PageSpeed Insights laufen. Zwei dieser Regeln beziehen sich auf JavaScript- und CSS-Ressourcen, die above-the-fold Inhalte blockieren. Wenn Sie eine dieser beiden Regeln nicht einhalten – und viele Websites scheitern an einer oder gar beiden – erhalten Sie eine „Should Fix“-Meldung, die Ihnen folgende Empfehlung gibt: Eliminieren Sie Render-Blocking von JavaScript und CSS in above-the-fold Inhalten.

Eliminieren von Render-Blocking von JavaScript und CSS in above-the-fold Inhalten.

Eliminieren von Render-Blocking von JavaScript und CSS in above-the-fold Inhalten.

Was bedeutet das eigentlich? Hier ist eine ausführlichere Erklärung:

Wenn ein Browser eine Webseite lädt, wird in der Regel das Anzeigen der Webseite von JavaScript- und CSS-Ressourcen verhindert, bis sie vom Browser heruntergeladen und verarbeitet wurden. In manchen Fällen ist das sogar gut. Wenn Sie beispielsweise HTML rendern, bevor CSS heruntergeladen wurde, erhalten Sie einen Flash of Unstyled Content (kurz FOUC, englisch für das kurzzeitige Anzeigen des Seiteninhalts ohne Verwendung des korrekten Stylesheets), was für Ihre Benutzer wahrscheinlich eine schlechtere Experience ist, als ein paar Hundertstelsekunden länger auf das Erscheinen des Inhalts zu warten.

Manche Ressourcen müssen heruntergeladen und verarbeitet werden, bevor überhaupt etwas angezeigt wird. Andere CSS- und JavaScript-Ressourcen sind jedoch konditional, d.h. sie werden nur in Einzelfällen eingesetzt oder werden schlichtweg nicht benötigt, um above-the-fold Inhalte zu rendern. Um Ihren Benutzern ein schnellstmögliches Laden zu bieten, sollten Sie versuchen, alle Renderblocking-Ressourcen zu eliminieren, die nicht erforderlich sind, um above-the-fold Inhalte anzuzeigen.

Eins steht fest: Es kann zu viel Aufwand oder schlichtweg unmöglich sein, alle Renderblocking-Ressourcen zu entfernen. Dies könnte sogar zu dem gefürchteten FOUC (siehe oben) führen. Behalten Sie daher im Hinterkopf, dass es nicht unser Ziel ist einen perfekten PageSpeed-Score zu erreichen, sondern eine bestmögliche User-Experience zu bieten. In anderen Worten, eine Webseite zu gestalten, die so schnellstmöglich lädt, ohne dass ungestaltete Inhalte aufblitzen.

Verwenden Sie also PageSpeed Insights, um Renderblocker-Dateien zu identifizieren, die Sie  eliminieren können, aber beachten Sie, dass UX immer Ihr übergeordnetes Ziel sein sollte. Eine ähnliche Meldung wird Ihnen auch in anderen Geschwindigkeitstesttools angezeigt, z.B. In GTmetrix erscheint die Meldung „Defer Parsing of JavaScript„.

Wie man Render-Blocking von JavaScript und CSS eliminiert

Dafür gibt es ein Plugin, oder? Sicher gibt es das, aber Sie müssen erst verstehen, was vor sich geht, bevor Sie anfangen Plugins einzubauen. Viele Plugins sind individuell konfigurierbar. Mit dem Wissen wie Render-Blocking-Ressourcen eliminiert werden, werden Sie effektiver mit dem Plugin Ihrer Wahl arbeiten.

JS aus dem kritischen Render-Pfad entfernen

Lassen Sie uns zunächst über JavaScript sprechen. Die Grundidee ist es, unnötige JavaScript- und jQuery-Ressourcen aus dem kritischen Render-Pfad. zu entfernen. Dies geschieht typischerweise durch Hinzufügen des defer oder des async Attributs zu den script HTML-Elementen, die die JavaScript-Ressourcen aufrufen.

Die defer und async Attribute sind nicht gleichwertig, und es ist wichtig den Unterschied zu verstehen.

  • Das async-Attribut weist den Browser an, sofort mit dem Herunterladen der Ressource zu beginnen, ohne das HTML-Parsing zu verlangsamen. Sobald die Ressource verfügbar ist, wird das HTML-Parsing angehalten, damit die Ressource geladen werden kann.
  • Das defer-Attribut weist den Browser an, den Download der Ressource erst dann zu starten, wenn das HTML-Parsing abgeschlossen ist. Sobald der Browser mit dem HTML fertig ist, lädt er alle zurückgestellten Skripte herunter und rendert sie in der Reihenfolge, in der sie im Dokument erscheinen.

Der große Unterschied zwischen den beiden ist, dass defer dafür sorgt, dass Skripte heruntergeladen und auf der Webseite in der Reihenfolge angewendet werden, in der sie im HTML-Dokument erscheinen, während async dies nicht tut. Das Ergebnis ist, dass, wenn async uf allen JavaScript-Ressourcen verwendet wird, es oft Ressourcen nicht richtig laden kann, die von anderen Ressourcen abhängig sind, die früher im Dokument erscheinen. Das häufigste Problem, das async hervorruft, sind defekte jQuery Ressourcen, die versuchen zu laden, bevor jquery.js dem Dokument hinzugefügt wurde.

Optimierung der Bereitstellung von CSS-Ressourcen

Render-Blocking CSS kann schwierig oder gar unmöglich sein vollständig zu entfernen. Der ideale Kompromiss ist:

  • Identifizieren Sie die Styles, die für above-the-fold Inhalte erforderlich sind und übermitteln Sie diese Styles zusammen mit dem HTML.
  • Verwenden Sie das media-Attribut auf den linkElementen, die CSS-Dateien einziehen, um CSS-Ressourcen zu identifizieren, die konditional sind, d.h. nur für bestimmte Geräte oder Situationen benötigt werden.
  • Verbleibende CSS-Ressourcen sollten asynchron geladen werden, ein Schritt, der typischerweise durch Hinzufügen mit verzögertem oder asynchronem JavaScript geschieht. Ehrlich gesagt, wird es hier etwas kompliziert, nicht wahr? Das ist definitiv das Gebiet des Front-End-Engineers. Was großartig ist, wenn Sie ein Front-End-Ingenieur sind. Die gute Nachricht ist, dass dies ein Artikel über WordPress ist, und Sie können die Anzahl der render-blocking JS- und CSS-Ressourcen, die Ihre Webseite betreffen, mit den richtigen Plugins eliminieren oder zumindest deutlich reduzieren.

Plugins zur Reduzierung von Render-Blocking JavaScript und CSS

In Vorbereitung auf diesen Artikel habe ich mich durch etwa ein Dutzend populärer WordPress-Plugins gearbeitet, die entwickelt wurden, um Render-Blocking verursachende JavaScript- und CSS-Ressourcen zu reduzieren und zu eliminieren. Ich habe mich für die fünf entschieden, die eine messbare Reduzierung herbeiführen.

Ich sollte auch erwähnen, dass ich während dieses Prozesses keine Caching-Plugins verwendet habe. Meine Test-Webseite lief über Kinsta und war so mit integriertem Caching auf Serverebene ausgestattet. Wenn Sie kein Kinsta-Kunde sind, wird die Einrichtung eines guten Caching-Plugins die Leistung Ihrer Webseite weiter verbessern.

Bevor wir jedoch zu den Plugins kommen, benötigen wir einen Benchmark-Score. Dafür habe ich eine einfache Testseite auf Kinsta eingerichtet und mit  Sydney ein beliebtes, kostenloses, jQuery-liebendes Design von WordPress.org installiert – ohne weitere Änderungen, ist hier unser aktueller Standpunkt.

PageSpeed Insights ohne Plugins

PageSpeed Insights ohne Plugins

Nicht allzu schlecht, aber es gibt sicherlich noch Verbesserungsmöglichkeiten. Es gibt zwei JavaScript- und fünf CSS-Ressourcen, die Render-Blocking hervorrufen.

Ein weiterer Test, den wir als Maßstab verwenden werden, ist der Pingdom Website Speed Test. Insbesondere möchten wir die Anzahl der Anfragen, die zum Laden der Webseite erforderlich sind, beobachten um zu sehen, wie sich die Anzahl bei aktivierten Plugins ändert. Jede zusätzliche Anfrage bedeutet ein weiteres „Hin-und-Zurück“ zum Server, so dass viele Plugins CSS- und JavaScript-Ressourcen in weniger Dateien kombinieren, um die Leistung der Webseite zu beschleunigen.

Da meine Testseite auf Kinsta gehostet wird, ist die Seite von vornherein schon extrem schnell und benötigt 24 Anfragen, um die Homepage zu laden.

Geschwindigkeitstest ohne Plugins

Geschwindigkeitstest ohne Plugins

Lassen Sie uns sehen, wie wir diese Leistung verbessern können, indem wir ein paar Plugins ausprobieren.

Speed Booster Pack

Als erstes wollen wir Speed Booster Pack ausprobieren. Dieses Plugin ist auf über 40.000 WordPress-Seiten aktiv und erhält eine Bewertung von 3,6 von 5 Sternen bei WordPress.org.

Speed Booster Pack Plugin

Speed Booster Pack Plugin

Die Einstellungen des Plugins finden Sie unter Einstellungen > Speed Booster Pack. Das Menü ist recht einfach und bietet gleichzeitig einige Konfigurationsoptionen.

Das allgemeine Optionsmenü kann Skripte in die Fußzeile verschieben und das Parsing von Javascript-Dateien verzögern. In Kombination sollten diese beiden Optionen JavaScript vollständig entfernen, das Render-Blocking verursacht. Ein weiteres Menü mit dem Titel „Still need more speed?“ ermöglicht das asynchrone Laden von CSS. Obwohl dies alle Render-Blocking-CSS hätte eliminieren sollen, produzierte die Aktivierung dieser Option den gefürchteten FOUC, so dass ich diese Option wieder deaktivierte.

Mit dem konfigurierten Plugin schnitt die Webseite bei PageSpeed Insights wie folgt ab.

PageSpeed Einblicke mit Speed Booster Plugin

PageSpeed Einblicke mit Speed Booster Plugin

Wie erwartet, gibt es keine render-blocking JavaScript-Ressourcen mehr. Da das asynchrone CSS-Laden jedoch ein FOUC hervorgerufen hat und deaktiviert werden musste, war der above-the-fold Inhalt immer noch von allen fünf CSS-Ressourcen blockiert.

Speed-Test mit Speed Booster Plugin

Speed-Test mit Speed Booster Plugin

Seltsamerweise ist jedoch die Anzahl der Anfragen gestiegen. Es gab zwar nichts, was darauf hindeutete, dass die Zahl der Anfragen zurückgehen würde, aber die Erhöhung der Anzahl der Anfragen war eine Überraschung. Die Bewertung der Gesamtleistung hat sich etwas verbessert, so dass ich das Speed Booster Pack nicht als Fehlschlag bezeichnen werde. Es gibt jedoch effektivere Optionen.

JCH Optimize

Als nächstes werfen wir einen Blick auf JCH Optimize. Während das Plugin weniger aktive Installationen als Speed Booster Pack hat, verfügt es über eine beeindruckende 4,6 von 5 Sterne-Bewertungen.

JCH Optimize Plugin

JCH Optimize Plugin

Dieses Plugin kombiniert und verkleinert JavaScript und CSS und wurde mit vielen zusätzlichen Funktionen ausgestattet, um das Laden von Seiten zu beschleunigen. Obwohl die Eliminierung von Render-Blocking-Ressourcen nirgendwo ausdrücklich erwähnt wird, bedeutet das Kombinieren von JavaScript- und CSS-Dateien, dass weniger Ressourcen zum Laden der Seite benötigt werden und somit weniger JS- und CSS-Ressourcen Render-Blocking verursachen können.

Das Plugin fügt unter Einstellungen > JCH Optimieren ein Optionsmenü hinzu. Das Optionsmenü wiederum besteht aus mehreren Tabs mit vielen verschiedenen Konfigurationsmöglichkeiten. Um die Dinge relativ einfach zu halten, habe ich im Menü Basisoptionen die Einstellung „Average“ gewählt.

Die Ergebnisse waren nicht sehr überzeugend.

PageSpeed Insights mit JCH Plugin

PageSpeed Insights mit JCH Plugin

Alle JavaScript-Ressourcen wurden kombiniert, d.h. nur eine JS-Ressource blockiert das Rendern von above-the-fold Inhalten. So weit, so gut. Mit den CSS-Ergebnissen hat es auf der anderen Seite nicht so gut funktioniert. Es sind immer noch fünf CSS-Ressourcen in einer Render-Blocking-Position. Es sieht zwar so aus, als hätte das Plugin den Inhalt von CSS-Dateien kombiniert und verkleinert, jedoch aber die Font-Dateien ausgeschlossen und drei verschiedene CSS-Dateien geladen, anstatt dass JCH alle drei in einer einzigen CSS-Datei kombiniert.

Das ist nicht das, was ich erwartet habe. Mal sehen, was der Website Speed Test von Pingdom von den Änderungen hält.

Speed-Test mit JCH Plugin

Speed-Test mit JCH Plugin

Wie erwartet, wurde die Anzahl der Anfragen um eins reduziert, da zwei JavaScript-Ressourcen zusammengefasst wurden. Ansonsten zeigt der Test eine nahezu unveränderte Leistung.

Ich hätte eine messbarere Verbesserung von JCH antizipiert. Ich hatte erwartet, dass alle CSS-Dateien kombiniert werden und es nur noch zwei Render-Blocking-Ressourcen geben würde: eine kombinierte JavaScript-Datei und eine kombinierte CSS-Datei. Ich bin mir nicht sicher, warum das nicht passiert ist. Es ist eine Premium-Version von JCH Optimize verfügbar. Es kann also sein, dass einige der erweiterten Funktionen dies ermöglichen würden, CSS-Dateien weiter zu kombinieren und die Anzahl der Render-Blocking-Ressourcen zu reduzieren.

JCH Optimize ist in diesem Fall nicht sehr hilfreich für die Optimierung dieser speziellen Test-Webseite gewesen.

Autoptimize

Mit über 600.000 aktiven Installationen und einer Bewertung von 4,7 von 5 Sternen ist Autoptimize eines der beliebtesten Plugins zur Geschwindigkeitsoptimierung im WordPress Plugin-Verzeichnis. Dank der wohltätigen und großzügigen Einstellung des Plugin-Autors verdient es auch direkt auf Anhieb gute Noten.

Autoptimize Plugin

Autoptimize Plugin

Dieses Plugin ist konzipiert, um einfach in der Handhabung zu sein und dieses Versprechen erfüllt es auch. Während viele der anderen Optionen, die ich mir angesehen habe, sehr komplexe Optionsmenüs hatten, ist Autoptimize sehr einfach. Alles, was ich getan habe, war auf Settings > Autoptimize zu gehen und die drei primären Kontrollkästchen auszuwählen, die auf dieser Seite angezeigt werden.

Autoptimize Einstellungen

Autoptimize Einstellungen

So hat sich meine Testseite bei PageSpeed Insights nach dieser einfachen 30-Sekunden-Optimierung geschlagen.

PageSpeed Einblicke mit Autoptimize Plugin

PageSpeed Einblicke mit Autoptimize Plugin

Wir haben es geschafft, die Anzahl der Render-Blocking-Ressourcen von insgesamt sieben auf vier zu reduzieren. Sehr gut. Nun schauen wir uns an, wie sich die Anzahl der Anfragen geändert hat.

Speed-Test mit Autoptimize Plugin

Speed-Test mit Autoptimize Plugin

Die Gesamtzahl der Anfragen ist deutlich von 24 auf 17 gesunken. Die Performance Note ist auf sehr beeindruckende 92 gestiegen. Es sieht so aus, als ob Autoptimize nicht ohne Grund so beliebt ist. Ich sollte aber erwähnen, dass Kinsta einen Trend der Autoptimize Inkompatibilität mit einigen Websites festgestellt hat, die benutzerdefiniertes CSS in header.php integrieren. Wenn Sie beispielsweise benutzerdefiniertes CSS in der header.php-Datei Ihres Designs kodiert haben, seien Sie besonders vorsichtig, wenn Sie Autoptimize ausprobieren.

Async Javascript

Das nächste Plugin auf der Liste ist Async Javascript. Dieses Plugin ist in kurzer Zeit sehr beliebt geworden und wird vom gleichen Entwickler von Autoptimize gepflegt. Es ist von 4.000 Installationen auf über 40.000 Installationen in weniger als einem Jahr mit einer sehr guten Bewertung gestiegen: 4.4 von 5 Sternen. Auch dieses ist ein unkompliziertes Plugin und sehr einfach in der Handhabung. Einfach installieren und aktivieren. Gehen Sie zu der Option Async Javascript, die dem Admin-Menü hinzugefügt wurde. Aktivieren Sie das Kontrollkästchen neben „Enable Async JavaScript“ und wählen Sie zwischen der Defer– oder Async– Methode. Speichern Sie dann die Änderungen und sehen Sie, wie Ihre Webseite in der Folge im Test abschneidet.

Im Falle meiner Testseite lud, async einige jQuery-Dateien vor jquery.js, was dazu führte, dass die Seite zerstört wurde. Also habe ich mich für die defer Methode entschieden. Mit der Auswahl dieser Option kamen wir im Test zu folgendem Ergebnis. Zunächst PageSpeed Insights.

PageSpeed Einblicke mit Async Plugin

PageSpeed Einblicke mit Async Plugin

Wie erwartet, wurde alles JavaScript aus dem Weg geräumt, während CSS unberührt blieb. Das ist auch in Ordnung so, denn dieses Plugin ist so konzipiert, dass es nur JavaScript adressiert.

Speed Test mit Async Plugin

Speed Test mit Async Plugin

Die Leistung der Webseite beim Geschwindigkeitstest von Pingdom blieb mit dem installierten Plugin nahezu unverändert. Noch einmal, dies bestätigt nur, dass dieses Plugin genau das tut, was es sagt: Render-Blocking von JavaScript eliminieren.

Kombination von Async JS und Autoptimieren

Das Async Javascript-Menü weist darauf hin, dass es so konzipiert ist, dass es mit Autoptimize gut zusammen funktioniert. Da ich bereits Autoptimize installiert hatte, habe ich es einfach ausprobiert. Nach der Aktivierung von Autoptimize erschien im Einstellungsmenü von Async Javascript ein neues Kontrollkästchen, um den Autoptimize-Support zu aktivieren. Nach Aktivierung des Kontrollkästchens sahen die Ergebnisse für die Webseite so aus:

PageSpeed Einblicke mit Async- und Autoptimize Plugin

PageSpeed Einblicke mit Async- und Autoptimize Plugin

Ausgezeichnet: durch das Aktivieren beider Plugins ist es uns gelungen, die Gesamtzahl der Render-Blocking-Ressourcen auf nur drei CSS-Ressourcen zu reduzieren. Wie haben wir die Anzahl der Anfragen beeinflusst?

Speed-Test mit Async- und Autoptimize Plugins

Speed-Test mit Async- und Autoptimize Plugins

Die Seite ist blitzschnell und sendet nur 17 Anfragen.

Einzeln betrachtet, bin ich kein großer Fan von Async Javascript. Es gibt nimmt mehr Platz im Einstellungsmenü ein, um für die Premium-Version des Plugins zu werben, als für die Plugin-Einstellungen selbst. Es fügt dem Admin-Menü einen primären Eintrag hinzu, anstatt als Untermenüpunkt im Einstellungsmenü hinzu, wo es meiner Meinung nach hingehört. Es schreibt JavaScript falsch, indem es es Javascript schreibt. Ok, ich gebe zu, Letzteres ist trivial, aber wenn das P in WordPress wichtig ist, dann ist es auch das S in JavaScript.

Update: Der Autor des Plugins hat auf unseren Beitrag reagiert und sich unsere Kritik zu Herzen genommen. Er hat die Größe der Anzeige reduziert, den Standort des Plugins im Admin-Menü verschoben und sogar die Schreibweise von JavaScript korrigiert. Wir sind zutiefst beeindruckt! Unabhängig von meinen Gedanken über Async Javascript allein, leistet es in Kombination mit Autoptimize sehr gute Arbeit, indem es Render-Blocking JavaScript vollständig eliminiert und die Menge an Render-Blocking-CSS reduziert.

Hummingbird

Das letzte Plugin, das ich getestet habe, war Hummingbird von WPMU DEV. Dies ist ein Plugin, das ich auf einigen meiner eigenen Websites verwende. Dies war früher ein Premium-Plugin, ist jetzt aber kostenlos erhältlich! Es lieferte die deutlichste Reduzierung der Ressourcen für die Renderblockierung, weshalb es erwähnenswert ist.

Hummingbird WordPress Plugin

Hummingbird WordPress Plugin

Hummingbird ist ein komplexes Plugin, dennoch recht benutzerfreundlich, wenn man bedenkt, wie viel es zu bieten hat. Um Render-Blocking-Ressourcen zu verschieben, gehen Sie zu Hummingbird > Minification und wählen Sie Check Files. Auf dem erscheinenden Bildschirm können Sie CSS- und JavaScript-Dateien auswählen, um in den Seitenfuß oder die Kopfzeile zu gelangen, sowie Dateien, die Sie kombinieren und komprimieren möchten.

Ich habe alle Dateien kombiniert, verkleinert und in die Fußzeile verschoben, mit zwei Ausnahmen: der primären style.css Theme-Datei und jquery.js. Ich habe festgestellt, dass beide Dateien an ihrem ursprünglichen Speicherort erscheinen müssen, um zu vermeiden, dass die Webseite zerstört oder ein FOUC erstellt wird. Mit diesen Einstellungen hat sich die Webseite in PageSpeed Insights folgende Ergebnisse geliefert.

PageSpeed Einblicke mit Hummingbird Plugin

PageSpeed Einblicke mit Hummingbird Plugin

Wie erwartet, verbleiben nur noch zwei Render-Blocking-Ressourcen: style.css und jquery.js. Großartig. Mal sehen, was uns Pingdom dazu zu sagen hat.

Speed-Test mit Hummingbird Plugin

Speed-Test mit Hummingbird Plugin

Obwohl die Perfomance Note nicht ganz so hoch ist wie bei Autoptimize, ist es uns gelungen, die Gesamtzahl der Anfragen auf den niedrigsten Wert zu reduzieren, den wir bisher gesehen haben: 16.

Async JS funktioniert gut mit Hummingbird

Während die Dinge wirklich gut aussehen, fällt mir ein, dass Async Javascript uns helfen könnte, jquery.js zu verschieben, ohne etwas zu zerstören. Nach der Aktivierung von Async Javascript und der erneuten Ausführung von PageSpeed Insights sehe ich, dass wir fast vollständig alle Render-Blocking-Ressourcen eliminiert haben.

Eliminieren des Render-Blockings von JavaScript.

Eliminieren des Render-Blockings von JavaScript.

Das einzige, was verbleibt, ist style.css. Der letzte Schritt, der es uns ermöglicht das Render-Blocking komplett zu eliminieren, wäre das Inlinen der Style.css. Wir haben es jedoch geschafft, von der Anzeige einer Should Fix-Nachricht zu einer Consider Fixing-Nachricht in PageSpeed Insights zu gelangen. Ich werde hier von Google’s Meinung abweichen, wann man sich um eine Nachricht zur Behebung von Problemen sorgen sollte. Ich behaupte, dass das, was wir bis hierhin erreicht haben, ein durchschlagender Erfolg ist.

Zusammenfassung

Nicht alle Plugins, die behaupten, Render-Blocking-Probleme mit JavaScript und CSS zu lösen sind gleich konzipiert. Autoptimize in Kombination mit Async Javascript ist die beste kostenlose Option, die ich für meine Testseite gefunden habe. Das Hummingbird Plugin lieferte zusammen mit Async Javascript Ergebnisse, die schlussendlich auch PageSpeed Insights zufrieden stellen konnten.

Dieser Artikel zeigt bei weitem nicht alle verfügbaren Plugins, die Sie verwenden können, um Render-Blocking-Ressourcen zu adressieren. Welche Plugins verwenden oder empfehlen Sie, um Render-Blocking JavaScript und CSS zu entfernen?

43
Mal geteilt