Asset Loading

Asset Loading verändert nur ausdrücklich registrierte Ressourcen. Es gibt keine automatische Umschreibung aller Scripts und keine fest eingebauten Regeln für bestimmte Frontend-Bibliotheken.

WordPress-Script-Strategien

Im Admin können registrierte WordPress-Script-Handles auf defer oder async gesetzt werden:

my-slider | defer
analytics-script | async

Die Strategie wird mit wp_script_add_data() gesetzt. Diese Funktion wird im Modul nur auf WordPress 6.3 oder neuer verwendet.

WordPress bleibt für die endgültige Behandlung der Abhängigkeitskette verantwortlich.

Conditional Asset Bundles

Viewport- und Interaction-Bundles werden ausschließlich über die Entwickler-API registriert.

Beispiel:

FGPerformance::registerAsset('map-assets', [
    'trigger' => 'viewport',
    'selector' => '.map',
    'root_margin' => '300px 0px',
    'styles' => [
        '/assets/map.css',
    ],
    'scripts' => [
        '/assets/map.js',
    ],
]);

Zulässige Trigger:

• viewport
• interaction

Ein Bundle muss mindestens ein Stylesheet oder Script enthalten.

Viewport-Trigger

Der Loader verwendet IntersectionObserver. Standard-rootMargin ist 200px 0px.

Wenn IntersectionObserver nicht verfügbar ist, wird ein vorhandenes Viewport-Bundle sofort geladen.

Interaction-Trigger

Interaction-Bundles reagieren auf:

• pointerover
• pointerdown
• focusin
• touchstart

Der Loader prüft mit closest(), ob das Ereignis innerhalb des registrierten Selektors ausgelöst wurde.

Ladeverhalten

• Bereits vorhandene Stylesheets oder Scripts mit identischer absoluter URL werden nicht erneut eingefügt.
• Stylesheets eines Bundles werden parallel geladen.
• Scripts eines Bundles werden in der registrierten Reihenfolge geladen.
• Script-Einträge können type = module verwenden.
• crossorigin unterstützt anonymous und use-credentials.
• Der Loader wird nur ausgegeben, wenn mindestens ein gültiges Bundle registriert ist.
• Bei prerendered Dokumenten initialisiert sich der Loader erst nach prerenderingchange.

JavaScript Events

Der Loader löst Dokument-Events aus:

fgperformance:assetload
fgperformance:assetloaded
fgperformance:asseterror

Im detail-Objekt steht mindestens die Bundle-ID. Bei asseterror wird zusätzlich das Error-Objekt übergeben.

Weitere Beispiele stehen unter Entwicklerschnittstellen.