Bedingtes Laden von Assets

So funktioniert es

Der DataProcessor analysiert Medienelemente und setzt Markierungen, die angeben, welche Assets erforderlich sind:

CSS wird immer geladen – vidply.min.css ist ressourcenschonend und wird stets eingebunden, um ein einheitliches Styling zu gewährleisten. Es enthält außerdem die Stile für den zentrierten Puffer-Indikator (.vidply-loading / .vidply-buffering) sowie für den Download-Button.

SoundCloud verwendet standardmäßig den „Privacy-Layer“-Pfad — In mpc-vidply SoundCloud-Medienelemente werden nur PrivacyLayer.js + privacy-layer.css (nicht der VidPly-Kern), da der SoundCloud-Widget-iframe seine eigene Benutzeroberfläche mitbringt. Das gebündelte Standalone-Modul SoundCloudRenderer wird im VidPly-Kernpaket mitgeliefert und daher nur für Seiten abgerufen, die den VidPly-Kern bereits aus anderen Gründen benötigen (lokale Video-/Audiodateien, HLS, DASH). Siehe PrivacyLayer.md → „Switch SoundCloud to Renderer Mode“ für die Aktivierung.

Beispiele

Einzelnes YouTube-/Vimeo-/SoundCloud-Element

Geladen:

• vidply.min.css (Styling, inkl. Stile für Ladeanzeige und Download-Button)
• privacy-layer.css (Stile für die Datenschutzebene)
• PrivacyLayer.js (Einwilligungsabwicklung, bindet den Service-Iframe nach Einwilligung ein)

Nicht geladen:

• VidPly-Player-Kern (und somit auch nicht die mitgelieferte SoundCloudRenderer – siehe „PrivacyLayer.md“ für die Aktivierung des Renderer-Modus)
• PlaylistInit.js
• hls.js
• dash.js

Einzelnes lokales MP4-Video

Geladen:

• vidply.min.css
• VidPly-Player (vidply/vidply.esm.min.js + Chunks)
• PlaylistInit.js (Player-Initialisierung)

Nicht geladen:

• PrivacyLayer.js
• hls.js

Video mit HLS-Quelle

Geladen:

• vidply.min.css
• VidPly-Player
• PlaylistInit.js
• hls.js (adaptives Streaming)

Nicht geladen:

• PrivacyLayer.js
• dash.js

Video mit DASH-Quelle

Geladen:

• vidply.min.css
• VidPly-Player
• PlaylistInit.js
• dash.js (MPEG-DASH-Streaming)

Nicht geladen:

• PrivacyLayer.js
• hls.js

Playlist mit 3 MP4-Videos

Geladen:

• vidply.min.css
• VidPly-Player
• PlaylistInit.js (Wiedergabeliste + Player)

Nicht geladen:

• PrivacyLayer.js
• hls.js

Gemischte Wiedergabeliste (YouTube + Vimeo + SoundCloud)

Geladen:

• vidply.min.css
• privacy-layer.css
• PrivacyLayer.js
• PlaylistInit.js (für die Verwaltung der Wiedergabeliste)

Nicht geladen:

• VidPly-Player (externe Dienste nutzen native Iframes über die Datenschutzschicht)
• hls.js
• dash.js

Gemischte Wiedergabeliste (lokale MP4-Dateien + YouTube)

Geladen:

• vidply.min.css
• privacy-layer.css
• PrivacyLayer.js (für das YouTube-Element)
• VidPly-Kern (für das MP4-Element – enthält auch den Puffer-Indikator, den Download-Button und den SoundCloud-Renderer, auch wenn diese nicht alle verwendet werden)
• PlaylistInit.js

Auswirkungen auf die Leistung

Vor der Optimierung:

• Alle JavaScript-Dateien werden auf jeder Seite mit VidPly geladen
• Gesamt: ~530 KB (einschließlich der eingebundenen Datei „hls.js 1.6.16“)

Nach der Optimierung:

• Einzelnes YouTube-/Vimeo-/SoundCloud-Video: ~7 KB (PrivacyLayer.js + privacy-layer.css)
• Einzelnes lokales Video: ~180 KB (VidPly-Kern + PlaylistInit) – enthält bereits den Puffer-Spinner, den optionalen Download-Button und den SoundCloud-Renderer
• Video mit HLS-Quelle: ~240 KB (VidPly + PlaylistInit + hls.js)
• Video mit DASH-Quelle: ~380 KB (VidPly + PlaylistInit + dash.js)
• Video mit HLS- und DASH-Quellen: ~440 KB (VidPly + PlaylistInit + hls.js + dash.js)

Einsparungen:

• Externe Dienste: 97 % Reduzierung (~350 KB → ~7 KB)
• Lokales Video ohne Streaming: ~65 % Reduzierung im Vergleich zur nicht optimierten „Alles laden“-Basislinie

 

Die Größenangaben beziehen sich auf minimierte, unkomprimierte Dateien. Die tatsächliche Übertragungsgröße beträgt nach gzip/brotli in der Regel 30–40 % dieser Werte.

 

Implementierung

DataProcessor (VidPlyProcessor.php)

// Analyze media types
$needsPrivacyLayer = false;
$needsVidPlay = false;
$needsPlaylist = false;
$needsHLS = false;
$needsDASH = false;

// Check for external services
if (in_array($firstTrackType, ['youtube', 'vimeo', 'soundcloud'])) {
    // External services use the privacy-layer iframe path.
    // SoundCloud could alternatively be routed through the bundled
    // `SoundCloudRenderer` (set $needsVidPlay = true) — see PrivacyLayer.md.
    $needsPrivacyLayer = true;
} else {
    $needsVidPlay = true; // Native VidPly player for local video/audio (incl. HLS/DASH sources)
    $needsPlaylist = true;
}

// Check for HLS and DASH streams (detected by MIME type)
foreach ($tracks as $track) {
    if (in_array($track['type'], ['application/x-mpegurl', 'application/vnd.apple.mpegurl'])) {
        $needsHLS = true;
    }
    if ($track['type'] === 'application/dash+xml') {
        $needsDASH = true;
    }
}

Vorlage (VidPly.html)

<f:render partial="VidPly/Assets" arguments="{
    needsPrivacyLayer: vidply.needsPrivacyLayer,
    needsVidPlay: vidply.needsVidPlay,
    needsPlaylist: vidply.needsPlaylist,
    needsHLS: vidply.needsHLS,
    needsDASH: vidply.needsDASH
}" />

Assets-Partial (VidPly/Assets.html)

<!-- Privacy Layer JS - only for external services -->
<f:if condition="{needsPrivacyLayer}">
    <f:asset.script identifier="vidPlyPrivacy" src="..." type="module"/>
</f:if>

<!-- HLS.js 1.6.16 - only for HLS streams -->
<f:if condition="{needsHLS}">
    <f:asset.script identifier="vidPlyHLS" src="EXT:mpc_vidply/Resources/Public/JavaScript/hls.min.js" defer="true"/>
</f:if>

<!-- dash.js 5.2.0 (modern UMD) - only for DASH streams -->
<f:if condition="{needsDASH}">
    <f:asset.script identifier="vidPlyDASH" src="EXT:mpc_vidply/Resources/Public/JavaScript/dash.all.min.js" defer="true"/>
</f:if>

<!-- VidPly Core - only for native player -->
<f:if condition="{needsVidPlay}">
    <f:asset.script identifier="vidPlyWrapper" src="..." />
    <f:asset.script identifier="vidPly" src="..." type="module"/>
</f:if>

<!-- Playlist Init - for playlists or player initialization -->
<f:if condition="{needsPlaylist}">
    <f:asset.script identifier="playlistInit" src="..." type="module"/>
</f:if>

Vorteile

1. Schnellere Seitenladezeiten – insbesondere bei Videos von externen Diensten (YouTube, Vimeo)
2. Geringerer Bandbreitenverbrauch – Nutzer laden nur das herunter, was sie benötigen
3. Besseres Caching – Nicht verwendete Skripte belasten den Browser-Cache nicht
4. Automatisch – Keine Konfiguration erforderlich, funktioniert basierend auf Medientypen
5. Intelligente Erkennung – Seitenspezifische Optimierung basierend auf dem tatsächlichen Inhalt

Browserkompatibilität

Alle gängigen Browser unterstützen das bedingte Laden von Assets über die TYPO3-Asset-API:

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile Browser

Testen

So überprüfen Sie das bedingte Laden:

1. Öffnen Sie die Entwicklertools des Browsers → Registerkarte „Netzwerk“
2. Erstellen Sie eine Seite mit einem einzelnen YouTube-Video
3. Lade die Seite neu und überprüfe, ob nur „PrivacyLayer.js“ geladen wird
4. Erstellen Sie eine Seite mit einer lokalen MP4-Datei
5. Laden Sie die Seite neu und stellen Sie sicher, dass der VidPly-Kern geladen wird, PrivacyLayer.js jedoch nicht

Fehlerbehebung

Assets werden nicht geladen:

• Alle TYPO3-Caches leeren
• Browserkonsole auf Fehler überprüfen
• Überprüfen Sie, ob DataProcessor registriert ist

Falsche Assets werden geladen:

• Überprüfen Sie die Medientyp-Erkennung im DataProcessor
• Überprüfen Sie, ob Flags an die Vorlage übergeben werden
• Leeren Sie den Vorlagen-Cache

Externe Dienste funktionieren nicht:

• Stellen Sie sicher, dass PrivacyLayer.js für YouTube/Vimeo/SoundCloud geladen wird
• Überprüfen Sie die Browserkonsole auf JavaScript-Fehler

Zukünftige Verbesserungen

Mögliche zukünftige Optimierungen:

• Lazy-Load für CSS (wird derzeit immer geladen)
• Aufteilung des VidPly-Kerns in kleinere Module (der SoundCloud-Renderer, der Download-Button und der Puffer-Spinner lassen sich bereits als separate Teile über dynamische TypeScript- import()s – durch die Bereitstellung von Funktions-Flags für den DataProcessor könnten wir diese weglassen, wenn sie nicht benötigt werden)
• Vorladen kritischer Assets basierend auf den Inhalten oberhalb der Falz
• Service Worker für Offline-Caching