Zum Inhalt

Critical CSS

Überblick

Mit Critical CSS werden die wichtigsten Styles für den ersten sichtbaren Bereich vorab geladen. Das verbessert die Ladezeit und das Rendering auf der ersten Ansicht.

Einstellungen

Unter Theme‑Optionen → CSS:

  • Enable critical CSS: aktiviert das Ausliefern von Critical CSS.
  • Generate now: erzeugt neue Critical‑CSS‑Dateien.
  • Log: Ausgabe des Generierungs‑Prozesses.
  • HTACCESS name/password: Zugangsdaten für Workflow‑Zugriffe.
  • Workflows installieren: legt die GitHub‑Workflows im Theme an.

Nutzung

  1. Critical CSS aktivieren.
  2. Generate now ausführen.
  3. Optional: GitHub‑Workflows installieren, um die Generierung automatisiert auszuführen.

Anwendung im Frontend

Bei aktivem Critical CSS werden die wichtigsten Styles vorab geladen, damit die Seite schneller sichtbar wird.

Entwicklertipps

  • Die Generierung nutzt Ziel‑URLs (Startseite, Archive, Singles usw.).
  • Du kannst die Ziel‑Liste per Filter anpassen.

Twtheme Hooks & Filter

Hook/Filter Typ Parameter Zweck
twtheme_option_fields Filter ($form_data) Critical‑CSS‑Optionen einhängen.
twtheme_critical_targets Filter ($targets) Ziel‑URLs für die Generierung anpassen.