Optimieren Sie das kritische CSS Ihrer WordPress-Website mit LWSOptimize

Procédure

Critical CSS ermöglicht es, den sichtbaren Inhalt Ihrer Seiten schneller anzuzeigen. Wenn ein Besucher eine Seite öffnet, muss sein Browser zunächst verschiedene Dateien herunterladen (Bilder, Skripte, CSS-Stylesheets usw.). [PERSON_NAME] sind [PERSON_NAME], kann die Anzeige verzögert werden. Mit Critical CSS werden die für die sofortige Darstellung der Seite unverzichtbaren Stile priorisiert geladen. Der Rest der Stile wird anschließend im Hintergrund geladen.

Warum verwenden?

Die Aktivierung von Critical CSS kann die Darstellungsgeschwindigkeit Ihrer Website verbessern, insbesondere auf Mobilgeräten oder bei einer langsamen Internetverbindung.

Die häufigsten Vorteile sind :

• Schnellere Anzeige des Hauptinhalts der Seite.

• Bessere Benutzererfahrung.

• Potenzielle Verbesserung von Leistungskennzahlen wie LCP (Largest Contentful Paint).

Je nach Konfiguration der Website kann der beobachtete Gewinn mehrere Hundert Millisekunden betragen.

Critical CSS aktivieren

WordPress bietet derzeit keine Möglichkeit, das CSS von Seiten und Beiträgen zu optimieren. [PERSON_NAME], es gibt Dutzende verschiedener WordPress-Plugins, um diesem Bedarf gerecht zu werden, darunter das von LWS erstellte Plugin LWS Optimize.

Standardmäßig ist die Option in diesem Plugin deaktiviert, da sie die Cache-Erzeugungszeit erhöht, [PERSON_NAME] noch mehr, wenn die Seite eine große Anzahl von CSS-Dateien lädt, und in seltenen Fällen Anzeigeprobleme verursachen kann.
Um sie zu aktivieren, gehen Sie zum Dashboard von LWS Optimize und wählen Sie dort die Maximum-Einstellungen und speichern Sie; [PERSON_NAME] Plugin-Aktionen, einschließlich Critical CSS.

[PERSON_NAME] möchten nur Critical CSS aktivieren, können Sie auch zu den erweiterten Einstellungen im Bereich Front-End gehen, wo Sie die Zeile Critical CSS finden.

Wenn Sie die Option aktivieren, werden Sie aufgefordert, zwischen 3 Betriebsmodi zu wählen: Auto - lokal, Auto und Manuell. Sobald die Wahl getroffen wurde, speichern Sie Ihre Änderungen, [PERSON_NAME] von Critical CSS und der aktuelle Cache wird geleert.

Jeder Modus funktioniert anders :

• Auto — lokale Generierung

Dies ist der Standardmodus des Plugins; das CSS der Seiten wird analysiert und anschließend von PHP Ihrer Website verarbeitet, wodurch direkt Critical CSS erzeugt wird. Der Vorteil besteht darin, dass es vollständig lokal funktioniert und relativ schnell ist, dafür aber mehr Ressourcen auf dem Server verbraucht als der andere Modus. Dennoch wird es für die Mehrheit der Websites empfohlen.

Wenn die Leistung Ihres Hostings [PERSON_NAME], [PERSON_NAME] kann es während der CSS-Generierung zu Verlangsamungen für Ihre Besucher kommen. [PERSON_NAME], die Leistung kann sich während der Generierung verschlechtern.

• Auto — LWS-Dienst

Dieser Modus verwendet den Critical-CSS-Generierungsdienst von LWS. Etwas langsamer als die lokale Verarbeitung, insbesondere wenn die Generierungs-API überlastet ist, liegt sein Hauptvorteil darin, dass die gesamte Generierung außerhalb des Servers erfolgt und somit deutlich bessere Leistungen als die lokale Generierung bietet. Bei hoher Auslastung kann die Generierung jedoch vorübergehend nicht verfügbar sein und ist daher nicht so zuverlässig wie lokal.

Bei vorübergehender Nichtverfügbarkeit des Dienstes wechselt das Plugin automatisch zur lokalen Generierung. Da die Generierung außerdem anders als im lokalen Modus erfolgt, kann sie je nach Website bessere Ergebnisse liefern.

Manuell

Dieser Modus ist für fortgeschrittene Benutzer gedacht.
Er ermöglicht es, Ihr eigenes Critical CSS manuell in das dafür vorgesehene [ADDRESS] einzutragen. Das hinzugefügte CSS wird auf der gesamten Website verwendet.

Wann wird Critical CSS aktiv?

Im automatischen Modus wird das Critical CSS gleichzeitig mit dem restlichen Cache und den Optionen ([PERSON_NAME]) erzeugt; [PERSON_NAME], die nächsten Besuche werden den erzeugten Cache verwenden.

Wissenswertes

Manche Elemente können ihre Formatierung verlieren

Nach der Aktivierung können einige Komponenten, die ihre Stile dynamisch laden (Karussells, Modalfenster, Pop-ups usw.), möglicherweise nicht korrekt angezeigt werden.

[PERSON_NAME] empfiehlt:

1. [PERSON_NAME] Modus Auto — LWS-Dienst.

2. Wenn das Problem weiterhin besteht, verwenden Sie den Modus Manuell, um die fehlenden Stile hinzuzufügen.

Externe Stile

Die automatische Generierung berücksichtigt nur Stylesheets, die auf Ihrer Domain gehostet werden.

Stile, die von externen Diensten geladen werden (CDN, Google Fonts usw.), sind im automatisch erzeugten Critical CSS nicht enthalten.

Fazit

Critical CSS ist ein hervorragender Hebel, um die Anzeige Ihrer Seiten zu beschleunigen und das Erlebnis Ihrer Besucher zu verbessern 🚀. Indem die wesentlichen Stile priorisiert werden, verkürzen Sie die Ladezeit des sichtbaren Inhalts und optimieren potenziell Ihre Leistungskennzahlen, [PERSON_NAME] LCP 📈.

Sie wissen nun, wie man: den Nutzen von Critical CSS versteht, es in WordPress mit LWS Optimize aktiviert, zwischen den Modi Auto — lokale Generierung, Auto — LWS-Dienst und Manuell wählt, festlegt, wann es aktiv wird, und die Wachsamkeitspunkte im Zusammenhang mit dynamischen Komponenten und externen Stilen berücksichtigt 😉.

Wenn Sie diese bewährten Vorgehensweisen anwenden, können Sie von einer schnelleren, flüssigeren und angenehmeren Website für Ihre Nutzer profitieren ✨.

Vielen Dank fürs Lesen 🙏 Zögern Sie nicht, einen Kommentar zum Service zu hinterlassen und Ihr Feedback zu teilen! 🙂