Render Optimization

Render Optimization erzeugt ausschließlich CSS für explizit registrierte größere Bereiche. Das Modul verwendet kein zusätzliches Frontend-JavaScript.

Erzeugtes CSS

Für einen Eintrag wie:

.long-section | 1200

erzeugt das Plugin sinngemäß:

@supports (content-visibility:auto) {
  .long-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px;
  }
}

Die tatsächliche Ausgabe wird kompakt als Inline-CSS erzeugt.

Intrinsic Height

Ohne Höhenangabe verwendet das Plugin 1000 Pixel. Die Eingabe wird intern auf mindestens 100 und höchstens 5000 Pixel begrenzt.

Die Höhe dient als geschätzte intrinsische Größe, solange der Browser den eigentlichen Inhalt noch nicht vollständig rendert.

Selektorprüfung

Ein Selektor wird verworfen, wenn er:

• leer oder länger als 500 Zeichen ist,
• {, }, ;, @, /* oder */ enthält,
• direkt html, body oder :root als vollständigen Selektor verwendet.

Damit wird die Admin-/API-Eingabe auf einfache CSS-Selektoren begrenzt.

Geeignete Bereiche

Das Plugin selbst erzwingt keine semantische Auswahl. Aus der Admin-Oberfläche ergibt sich als vorgesehener Einsatz jedoch die gezielte Optimierung unabhängiger Below-the-fold-Bereiche.

Hero, Header, Sticky-/Fixed-Bereiche oder zentrale Layout-Wrapper sollten nicht pauschal registriert werden.

Browser-Fallback

Die Regeln liegen in einem @supports (content-visibility:auto)-Block. Browser ohne Unterstützung wenden die Optimierung daher nicht an.

Entwickler können Bereiche mit FGPerformance::deferRender() registrieren. Siehe Entwicklerschnittstellen.