W3 Total Cache Minify Plugin-Einstellungen: Wie wähle ich den Einbettungstyp? Meine Fehlerbehebung und lebensrettende Tipps

Sie haben Schwierigkeiten, den richtigen Einbettungstyp für W3 Total Cache Minify auszuwählen? Dieser Artikel teilt die praktischen Erfahrungen eines Webmasters und bietet eine Schritt-für-Schritt-Anleitung zur korrekten Auswahl des Minify-Einbettungstyps, um Darstellungsfehler und Ladezeiten Ihrer Website zu vermeiden. Er enthält außerdem eine narrensichere Einrichtungslösung, die auch Anfänger problemlos anwenden können.WordPress Beschleunigen, ohne zu crashen!

Ich optimierte gerade eine Website und war völlig verblüfft, als ich die Minify-Einstellungen in W3 Total Cache öffnete. Das Dropdown-Menü für den eingebetteten Typ bot vier Optionen: Standard (Blockieren), JavaScript für nicht-blockierendes Laden verwenden, „Asynchron“ für nicht-blockierendes Laden verwenden und „Verzögert“ für nicht-blockierendes Laden verwenden.

Ich habe einen Moment darüber nachgedacht, worum geht es hier eigentlich?

Glaub mir, du bist nicht allein. Diese vier Optionen werden selbst Anfänger verwirren, geschweige denn jemanden, der WordPress schon seit Jahren nutzt. Dieser Artikel beschreibt die Fallstricke, auf die ich gestoßen bin, und die Lektionen, die ich daraus gelernt habe. Du brauchst die Dokumentation nicht zu konsultieren; folge einfach meinen Anweisungen.

Was genau sind diese vier Einbettungstypen?

Lasst uns zunächst darüber sprechen, um welche Art von Charakter es sich bei diesen vier Optionen handelt.

Standard (Blockierung)Dies nennt man Standardblockierung. Es ist die einfachste Methode: Der Browser stoppt, sobald er auf ein Skript stößt, lädt es herunter, führt es vollständig aus und fährt dann mit dem Rendern der Seite fort. Klingt zuverlässig, oder? Der Nachteil ist jedoch, dass das Laden der Seite zunächst blockiert wird; Nutzer müssen warten, bis das Skript vollständig ausgeführt ist, bevor sie etwas sehen können.

Verwendung von JS für nicht-blockierendes VerhaltenDas ist ziemlich interessant. Anstatt die `<script>`-Tags direkt auf der Seite zu schreiben, wird zunächst ein kleines Skript ausgegeben und anschließend die benötigten Skripte per JavaScript dynamisch nach dem Seitenaufruf eingebunden. So kann die Seite zuerst gerendert werden, und die Skripte werden nacheinander geladen. Klingt super, oder? Das Problem ist jedoch, dass dieser dynamische Einbindungsprozess die ursprüngliche Ausführungsreihenfolge der Skripte durcheinanderbringen kann. Wenn einige Skripte auf Ihrer Seite stark von der Ausführungsreihenfolge abhängen, können Probleme auftreten.

Verwenden Sie „asynchron“ für nicht-blockierende Operationen.Dazu wird dem `<script>`-Tag das Attribut `async` hinzugefügt. Das Skript wird asynchron im Hintergrund heruntergeladen und direkt im Anschluss ausgeführt, ohne dass die Seite darauf warten muss. Der Nachteil ist jedoch, dass die Ausführungsreihenfolge völlig unkontrollierbar ist; das Skript, dessen Download zuerst abgeschlossen ist, wird auch zuerst ausgeführt, unabhängig von der im Code festgelegten Reihenfolge.

Verwendung von „Verzögerung“ für nicht-blockierendeDas Hinzufügen des `defer`-Attributs bewirkt Folgendes: Das Skript wartet, bis die gesamte Seite verarbeitet wurde, bevor es ausgeführt wird, und behält dabei die ursprüngliche Reihenfolge bei. Dies ist sehr benutzerfreundlich, da weder die Startseite blockiert noch die Reihenfolge durcheinandergebracht wird.

Welche soll ich wählen?

Vereinfacht gesagt, sind diese vier Optionen wie eine Multiple-Choice-Frage:Wollen Sie Schnelligkeit oder Ordnung?

Mein Vorschlag lautet wie folgt:

Wenn Ihre Website klein ist, wenige Skripte enthält und Sie keine extrem hohen Anforderungen an die Ladezeit stellen, ist die Standardeinstellung (blockiert) die einfachste Option. Sie ist zwar etwas langsamer, verursacht aber keine Probleme.

Wenn Sie die Ladezeit des ersten Bildschirms verbessern möchten und Ihre Skripte keine starken Abhängigkeiten wie „A muss vor B ausgeführt werden“ aufweisen, priorisieren Sie...Verwendung von „Verzögerung“ für nicht-blockierende(verschieben). Dies ist derzeit nahezu die ideale Lösung, da sie weder das Rendering blockiert noch die Reihenfolge stört.

Wenn Sie es mit `defer` versuchen und trotzdem feststellen, dass einige Funktionen Probleme bereiten, dann sollten Sie Folgendes in Betracht ziehen...Verwendung von JS für nicht-blockierendes VerhaltenDiese Lösung ist radikaler, aber ihre Kompatibilität ist etwas schlechter.

Verwenden Sie „asynchron“ für nicht-blockierende Operationen.Die Option „async“ empfehle ich am wenigsten. Da die Ausführungsreihenfolge völlig durcheinandergerät, kann es leicht zu Abstürzen kommen, es sei denn, Sie sind absolut sicher, dass Ihre Skripte alle unabhängig voneinander ausgeführt werden.

Zwei große Fallstricke, in die ich getappt bin

Reden ist billig. Ich habe zwei Fehler aufgeschrieben, die ich gemacht habe; du kannst sie mit deinen eigenen Erfahrungen vergleichen, um zu sehen, ob du sie vermeiden kannst.

Die erste Schwierigkeit: Individuelle WordPress-Themes können nicht in Echtzeit in der Vorschau angezeigt werden.

Eine Zeit lang wurde die Vorschau beim Anpassen eines Designs nach dem Speichern nicht aktualisiert. Ich nahm Änderungen vor, aktualisierte die Seite, aber es blieb alles beim Alten.

Nach einigen Recherchen stellte ich fest, dass die Komprimierungsfunktion von Minify die Ursache war. Die Lösung ist einfach:

Greifen Sie auf das W3 Total Cache-Plugin zu.Allgemeine Einstellungen,auftauchen"Kompression"Deaktivieren Sie diese Option. Klicken Sie anschließend auf den kleinen Pfeil unter „Einstellungen speichern“ in der oberen rechten Ecke und wählen Sie „…“.Einstellungen speichern und Cache leerenDieser Schritt ist entscheidend; wenn Sie den Cache nicht leeren, wird Ihnen weiterhin die alte Version angezeigt.

Wenn Sie fertig sind, kehren Sie zur Theme-Anpassung zurück, und die Live-Vorschau wird wieder normal funktionieren.

Das zweite Problem: Das Suchfeld des Astra-Themes reagiert nicht, wenn man darauf klickt.

Ich hatte vor einiger Zeit dasselbe Problem. Ich nutzte das Astra-Theme und plötzlich reagierte die Suchleiste nicht mehr, egal wie ich sie anklickte. Zuerst dachte ich, es läge am Theme selbst, aber später stellte ich fest, dass es an den Minify-Einstellungen von W3TC lag.

Die Lösung lautet wie folgt:

Gehen Sie zu W3 Total Cache → Allgemeine Einstellungen → Erweiterte Komprimierungseinstellungen → JS → Einstellungen der Minifizierungs-Engine → Gebietsschemaeinstellungen und ändern Sie den Einbettungstyp auf einen der beiden folgenden Punkte:

1. Bisher wurde die Blockierungsfreiheit mithilfe von JavaScript erreicht.
2. Anschließend JS für nicht-blockierendes Verhalten verwenden.

Ebenso sorgt das Leeren des Caches und das Neuladen der Seite dafür, dass das Suchfeld ordnungsgemäß funktioniert.

Warum gerade diese beiden Optionen gewählt wurden, habe ich recherchiert. Kurz gesagt: Die Frontend-Komponenten des Astra-Themes reagieren sehr empfindlich auf den Zeitpunkt der Skriptausführung, und bestimmte nicht-blockierende Methoden können zu Fehlern bei der Ereignisbindung führen. Der Modus „Nicht-blockierend mit JS“ stellt sicher, dass das Skript erst nach dem vollständigen Laden der Seite ausgeführt wird und vermeidet die ungeordnete Ausführung, die bei asynchronen Methoden auftritt.

落地清单

Abschließend finden Sie hier eine Checkliste, die Sie direkt befolgen können:

Im ersten Schritt sollten Sie Ihr Ziel klären. Wünschen Sie sich eine möglichst schnelle Seitenladezeit oder legen Sie Wert auf Stabilität und fehlerfreien Betrieb? Davon hängt ab, welchen Einbettungstyp Sie verwenden sollten.

Der zweite Schritt besteht darin, nicht alles auf einmal zu ändern. Suchen Sie zunächst eine weniger wichtige Seite zum Testen, beobachten Sie diese ein oder zwei Tage lang und übernehmen Sie die Änderung erst dann für die gesamte Website, wenn Sie sicher sind, dass keine Probleme auftreten.

Drittens: Leeren Sie nach jeder Änderung den Cache. Der Caching-Mechanismus von W3TC verhindert, dass Sie die neuesten Änderungen sehen. Daher ist der Schritt „Cache leeren und erneut testen“ unbedingt erforderlich.

Viertens: Nutzen Sie die Entwicklertools Ihres Browsers oder Tools wie PageSpeed ​​Insights, um die Ladezeit vor und nach der Optimierung zu vergleichen. Lassen Sie die Daten für sich sprechen, nicht Ihr Bauchgefühl.

Schreiben Sie am Ende

Ehrlich gesagt war ich anfangs ziemlich verblüfft, als ich diese Einstellung für eingebettete Typen sah. Der standardmäßige blockierende Modus schien mir zu langsam, der asynchrone Modus garantierte keine bestimmte Reihenfolge, und das Verzögern könnte Kompatibilitätsprobleme verursachen. Ich war mir unsicher, welche Option ich wählen sollte.

Mir wurde später klar, dass es ein Kompromiss ist. Man kann nicht gleichzeitig die schnellste und die stabilste Lösung haben; man muss immer eines von beiden opfern. Meine Erfahrung ist, zuerst `defer` zu verwenden, was derzeit die sicherste nicht-blockierende Lösung ist, und dann bei Problemen eine Callback-Funktion zu nutzen.

Falls Sie auf ähnliche Probleme stoßen oder nach Anwendung meiner Methode weiterhin Schwierigkeiten haben, sprechen Sie mich gerne an. Webseitenentwicklung ist ein Prozess des Ausprobierens und Lernens aus Fehlern; das gilt für alle.

Vielen Dank fürs Lesen meines Artikels. Bis zum nächsten Mal.