CSS und JavaScript in TYPO3 einbinden: 11 Methoden im Vergleich

Suchen Sie nach zuverlässigen Möglichkeiten, CSS und JavaScript-Assets in TYPO3 hinzuzufügen? Hier finden Sie 11 Methoden zum Hinzufügen von CSS/JS-Frontend-Assets, um sie gezielt in TYPO3 einzufügen.

Als TYPO3 Integrator, Entwickler oder Administrator müssen Sie häufig benutzerdefinierte Stylesheets oder JavaScript-Bibliotheken von Drittanbietern in eine TYPO3-Instanz einbinden, sei es für Templates, Extensions oder bestimmte Seiten.

In diesem Blog lernen Sie alle 11 bewährten Methoden kennen, um interne und externe CSS/JS-Assets in TYPO3 einzubinden – klar erklärt und direkt für den Einsatz in realen Projekten geeignet.

TYPO3 ist ein flexibles und erweiterbares Open-Source-CMS, das entwickelt wurde, um eine Vielzahl von Frontend-Anforderungen zu erfüllen. Je nach Anwendungsfall – Legacy-Systeme, moderne Templates oder Extension-Entwicklung – bietet TYPO3 mehrere Möglichkeiten, Frontend-Assets sauber und vorhersehbar zu integrieren, um eine effiziente TYPO3 Entwicklung zu ermöglichen.

Diese Flexibilität ermöglicht es außerdem, mithilfe von Lösungen wie der AI Foundation für TYPO3 neue Entwicklungsmöglichkeiten einzuführen und gleichzeitig AI-Anbieter, Berechtigungen und Workflows zentral zu verwalten.

Lassen Sie uns jede Methode durchgehen und verstehen, wo sie am besten passt.

Kurze Antwort: In TYPO3 v13.4 LTS und v14 binden Sie CSS und JavaScript in Templates mit den Fluid ViewHelpern <f:asset.css> und <f:asset.script> ein, in Extension-Code mit der AssetCollector-API. TypoScript includeCSS und includeJS funktionieren für globale Dateien weiterhin. Verzichten Sie auf $GLOBALS['TSFE']: TYPO3 v14 hat es entfernt.

Das Wichtigste in Kürze

• Templates: <f:asset.css> und <f:asset.script> nutzen (seit v10.3). TYPO3 gibt jeden Identifier nur einmal aus.
• Extensions: addStyleSheet() oder addJavaScript() am AssetCollector aufrufen; priority verschiebt JavaScript in den <head>.
• TypoScript includeCSS, includeJS, headerData und footerData funktionieren auch in v14, v14 fasst Dateien aber nicht mehr zusammen und komprimiert sie nicht mehr.
• additionalHeaderData und additionalFooterData über TSFE gibt es in v14 nicht mehr; nutzen Sie PageRenderer::addHeaderData() oder addFooterData().
• Die Fluid-Sections HeaderAssets und FooterAssets sind seit v14.0 veraltet und entfallen in v15.0.
• Mit Content Security Policy kennzeichnen Sie Inline-Code mit csp (ab v14.2) oder useNonce (v13).

Getestet mit / gültig für: TYPO3 v13.4 LTS und v14.3 LTS (Code geprüft anhand der offiziellen TYPO3-Dokumentation)
Aktualisiert: November 2026

Alle 11 Methoden dieses Leitfadens laufen in TYPO3 v13.4 LTS. In TYPO3 v14 sind die beiden TSFE-Methoden entfernt und die Fluid-Sections HeaderAssets/FooterAssets veraltet; alles andere funktioniert weiter.

TYPO3 v14.3 LTS erschien am 21. April 2026. Aktuell sind die Versionen 14.3.10 und 13.4.37, beide benötigen mindestens PHP 8.2 (Quelle: get.typo3.org).

Empfehlung: Nutzen Sie für neue Arbeiten in TYPO3 v13 oder v14 die f:asset ViewHelper in Templates und den AssetCollector in PHP. Behalten Sie bestehende TypoScript-Includes für globale Dateien und ersetzen Sie TSFE- und HeaderAssets-Code vor oder während des Upgrades auf v14.

Sie nutzen ein gekauftes T3Planet-Template und möchten eigenes CSS oder JavaScript einbauen lassen? Über unseren Service TYPO3 Template anpassen lassen passen wir Aussehen, Haptik und Funktionen des Templates für Sie an.

Weiterlesen: Unsere 45+ TypoScript Tipps und Tricks und der TypoScript Conditions Spickzettel helfen, wenn Sie Assets pro Seite oder pro Site laden.

Die Fluid Asset ViewHelpers sind in TYPO3 v13 und v14 der empfohlene Weg, CSS und JavaScript aus einem Fluid Template einzubinden. Sie kamen mit TYPO3 v10.3 zusammen mit dem AssetCollector und funktionieren in allen Versionen seitdem.

Mit <f:asset.css /> und <f:asset.script /> können Assets direkt innerhalb von Fluid Templates registriert werden, während gleichzeitig ein vorhersehbares Rendering und eine bessere Kontrolle gewährleistet bleiben.

Dieser Ansatz eignet sich besonders für moderne TYPO3-Projekte, bei denen Assets eng mit der Template-Logik verknüpft sind und der von TYPO3 empfohlenen Frontend-Architektur folgen sollen.

<f:asset.css identifier="yourIdentifier" href="EXT:yourext/Resources/Public/Css/myCustom.css" />
<f:asset.css identifier="yourIdentifier">
  .myBlock { display: block }
</f:asset.css>

<f:asset.script identifier="yourIdentifier" src="EXT:yourext/Resources/Public/JavaScript/myCustom.js" />
<f:asset.script identifier="yourIdentifier">
  alert('hello world');
</f:asset.script>

Jedes Asset braucht einen eindeutigen identifier; TYPO3 gibt ein Asset mit demselben Identifier nur einmal aus. Mit priority="1" landet ein Skript im <head>, mit defer oder async blockiert es das Rendering nicht. Auf Websites mit Content Security Policy kennzeichnen Sie Inline-Code mit csp="1" (ab TYPO3 v14.2) oder useNonce="1" (TYPO3 v13).

Weitere Fluid-Muster finden Sie in unserem TYPO3-Fluid-Leitfaden mit 50+ ViewHelper-Tipps.

Referenz: Dokument anzeigen

Die Fluid-Sections HeaderAssets und FooterAssets funktionieren in TYPO3 v13 noch, das automatische Rendern ist aber seit TYPO3 v14.0 als veraltet (deprecated) markiert und entfällt in TYPO3 v15.0. Seit TYPO3 v8.6 rendert Extbase diese Sections eines Action-Templates in den Head oder Footer der Seite.

Diese Methode ist hilfreich, wenn Assets gezielt im <head> oder am Ende des <body> eingebunden werden müssen.

Migrieren Sie auf <f:asset.css> und <f:asset.script>. Für Markup, das diese ViewHelper nicht erzeugen, etwa Preconnect-Tags, bringt TYPO3 v14 die ViewHelper <f:page.headerData> und <f:page.footerData> mit.

<f:section name="HeaderAssets">
   <!-- Write down anything which you want to add into <head> tag -->
</f:section>

<f:section name="FooterAssets">
   <!-- Write down anything which you want to add into </body> tag -->
   <script async src="//yourdomain.com/your.js"></script>
</f:section>

Referenz: Dokument anzeigen, Deprecation in v14.0

page.headerData wird in TYPO3 v13 und v14 weiterhin unterstützt und ist eine der klassischen, auf TypoScript basierenden Methoden, um CSS oder JavaScript in den <head> Bereich einer TYPO3-Seite einzubinden.

Damit können Assets global oder abhängig von Seiten-IDs hinzugefügt werden.

TypoScript unterscheidet Groß- und Kleinschreibung: Schreiben Sie headerData, nicht HeaderData. Die TypoScript-Referenz empfiehlt includeCSS und includeJS für Dateien und headerData für sonstiges Markup, etwa Meta- oder Verifizierungs-Tags.

page.headerData.99 = TEXT
page.headerData.99.value = <script async src="//yourdomain.com/your.js"></script>

page.footerData funktioniert ähnlich wie page.headerData, wird auch in TYPO3 v14 unterstützt und gibt Assets direkt vor dem schließenden </body> Tag aus.

Dies wird häufig für JavaScript-Dateien bevorzugt, um renderblockierende Inhalte zu reduzieren und die wahrgenommene Performance zu verbessern.

Wie headerData ist auch dieser Ansatz hauptsächlich für ältere TYPO3 Installationen relevant.

page.footerData.99 = TEXT
page.footerData.99.value = <script async src="//yourdomain.com/your.js"></script>

includeJS ist eine der am häufigsten verwendeten TypoScript-Methoden, um JavaScript-Dateien in TYPO3 Templates einzubinden.

Es unterstützt das Laden von Skripten im Header, im Footer oder als Libraries, abhängig von der Konfiguration.

Die Methode wird in TYPO3 v13 und v14 weiterhin unterstützt. Seit TYPO3 v14.0 fasst der Core so eingebundene Dateien aber nicht mehr zusammen und komprimiert sie nicht mehr; die Dateieigenschaften external, disableCompression und excludeFromConcatenation gibt es nicht mehr. Mit includeJSFooter laden Sie eine Datei vor </body>.

page.includeJS {
   yourIdentifier = EXT:yourext/Resources/Public/JavaScript/myCustom.js
}

Tipps:
Sie können config.moveJsFromHeaderToFooter verwenden, um Skripte aus dem Header in den Footer zu verschieben und so eine bessere Performance zu erzielen. JavaScript aus dem AssetCollector ist von dieser Option nicht betroffen.

Wenn Sie Inline-JavaScript einbinden müssen, stellt TYPO3 jsInline und jsFooterInline zur Verfügung. Damit können Sie JavaScript-Code direkt einfügen, ohne auf eine externe Datei zu verweisen.

Inline-Skripte sollten sparsam eingesetzt werden, da sie im Vergleich zu dateibasierten Assets schwieriger zu cachen und zu warten sind.

page.jsInline {
   10 = TEXT
   10.value = console.log('Hello from TYPO3');
}

Wie die anderen page-Eigenschaften erwartet jsInline nummerierte Inhaltsobjekte wie TEXT. Es funktioniert auch in TYPO3 v13 und v14.

includeCSS ermöglicht es, CSS-Dateien über TypoScript zu registrieren und im <head> Bereich einzubinden. Diese Methode findet sich häufig in älteren TYPO3 Templates und Legacy-Integrationen.

Für moderne Projekte werden in der Regel die Fluid Asset ViewHelpers oder der AssetCollector bevorzugt.

page.includeCSS {
   yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.css
}

cssInline ermöglicht es, Inline-CSS direkt über TypoScript zu definieren.
Dies kann für kleine, dynamische Styles nützlich sein, sollte jedoch in größeren Projekten nicht die strukturierte, dateibasierte CSS ersetzen.

page.cssInline {
   10 = TEXT
   10.value = h1 {margin:15px;}
}

Für Extension-Entwickler, die mit Extbase arbeiten, ermöglicht additionalFooterData das dynamische Einfügen von JavaScript aus einem Controller.

Diese Methode bietet Flexibilität, umgeht jedoch moderne Asset-Management-Workflows.

TYPO3 v13 hat diese Eigenschaft als intern markiert, TYPO3 v14.0 hat $GLOBALS['TSFE'] komplett entfernt. Der folgende Code läuft daher nur bis TYPO3 v13. In v14 nutzen Sie stattdessen den PageRenderer oder für Skriptdateien den AssetCollector.

$GLOBALS['TSFE']->additionalFooterData['yourIdentifier'] =
   '<script async src="//yourdomain.com/your.js"></script>';

Ersatz in TYPO3 v14:

$pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
$pageRenderer->addFooterData('<script async src="//yourdomain.com/your.js"></script>');

Referenz: Breaking Change #107831 in TYPO3 v14.0

Ähnlich wie additionalFooterData ermöglicht diese Methode das Einfügen von Assets in den <head> Bereich aus einem Extbase-Controller.

Sie funktioniert nur bis TYPO3 v13 und wird für moderne TYPO3 Extensions nicht empfohlen. TYPO3 v14.0 hat $GLOBALS['TSFE'] entfernt; die offizielle Migration ist PageRenderer::addHeaderData().

$GLOBALS['TSFE']->additionalHeaderData['yourIdentifier'] =
   '<script async src="//yourdomain.com/your.js"></script>';

Ersatz in TYPO3 v14:

$pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
$pageRenderer->addHeaderData('<script async src="//yourdomain.com/your.js"></script>');

Upgrade auf TYPO3 v14 geplant?
Der kostenlose Upgrade-Leitfaden für TYPO3 (18 Seiten plus Excel-Arbeitsblatt) plant Ihr Upgrade in vier Phasen und hält die Website danach sicher: mit Sicherheitsmeldungen, ELTS und einem Wartungskalender.
Upgrade-Leitfaden kostenlos holen

Der AssetCollector ist in TYPO3 v13 und v14 der empfohlene Weg, CSS und JavaScript aus PHP-Code einzubinden. Er kam mit TYPO3 v10.3 und steckt auch hinter den f:asset ViewHelpern.

Es bietet eine zentrale Asset-Verwaltung, Prioritätssteuerung und vermeidet Duplikate über Templates und Extensions hinweg.

Dies ist der bevorzugte Ansatz für die moderne TYPO3 Entwicklung.

GeneralUtility::makeInstance(AssetCollector::class)

  ->addJavaScript(

      'yourIdentifier',

      'EXT:yourext/Resources/Public/JavaScript/myCustom.js',

      ['data-foo' => 'bar']

  );

Mit ['priority' => true] als viertem Argument landet ein Skript im <head>, mit dem Attribut ['type' => 'module'] wird es als ES-Modul geladen. Statt makeInstance() können Sie den AssetCollector auch per Konstruktor injizieren, wie es die offizielle Dokumentation zeigt. Die Option external entfiel mit TYPO3 v14.0, und ab v14.2 ersetzt die Option csp die Option useNonce.

AssetCollector bietet eine umfangreiche API zur Verwaltung von Assets über den gesamten Anforderungszyklus hinweg und sollte die Standardwahl für neue Extensions sein.

AssetCollector::addInlineJavaScript()

AssetCollector::addStyleSheet()

AssetCollector::addInlineStyleSheet()

AssetCollector::addMedia()

AssetCollector::removeJavaScript()

AssetCollector::removeInlineJavaScript()

AssetCollector::removeStyleSheet()

AssetCollector::removeInlineStyleSheet()

AssetCollector::removeMedia()

AssetCollector::getJavaScripts()

AssetCollector::getInlineJavaScripts()

AssetCollector::getStyleSheets()

AssetCollector::getInlineStyleSheets()

AssetCollector::getMedia()

AssetCollector::hasJavaScript()

AssetCollector::hasStyleSheet()

Referenz: Dokument anzeigen

TYPO3 unterstützt mehrere Möglichkeiten, CSS und JavaScript einzubinden, aber der empfohlene Ansatz ändert sich je nach TYPO3-Version. Die folgende Übersicht fasst zusammen, welche Methoden bevorzugt werden und welche als Legacy betrachtet werden sollten.

Dieser Abschnitt dient als schnelle Referenz und ersetzt nicht die detaillierten Erklärungen, die folgen.

TYPO3 v14 / v13 / v12

Empfohlen

• Fluid Asset ViewHelpers (<f:asset.css />, <f:asset.script />)
• Extbase AssetCollector (zentrale Verwaltung von Assets)

Warum das wichtig ist

• Native, moderne API im Einklang mit der TYPO3-Core-Richtung
• Bessere Performance und Abhängigkeitsverwaltung
• Saubere Trennung der Verantwortlichkeiten (kein Inline-Chaos)

Legacy / Vermeiden für neue Projekte

• TypoScript HeaderData / FooterData
• additionalHeaderData / additionalFooterData

TYPO3 v11 / v10

Empfohlen

• Extbase AssetCollector
• Fluid Asset ViewHelpers

Akzeptabel (Legacy, aber unterstützt)

• Fluid HeaderAssets / FooterAssets
• TypoScript includeJS / includeCSS

TYPO3 v9 / v8

Häufig verwendet

• Fluid HeaderAssets / FooterAssets
• TypoScript includeJS / includeCSS
• Inline TypoScript (jsInline, cssInline)

Zu berücksichtigen

• Planen Sie eine Migration zum AssetCollector, wenn Sie auf neuere TYPO3-Versionen upgraden.

TYPO3 v7 und älter

Nur Legacy

• TypoScript HeaderData / FooterData
• Inline CSS/JS über TypoScript oder PHP

Hinweis

• Diese Ansätze werden für moderne TYPO3-Projekte nicht empfohlen und sollten bei Upgrades refaktoriert werden.

Wichtiger Hinweis

• Vermeiden Sie das Mischen mehrerer Methoden zur Asset-Einbindung auf derselben Seite oder Extension.
• Wählen Sie pro TYPO3-Version einen primären Ansatz für eine vorhersehbare Darstellung und einfacheren TYPO3 Support & Wartung.

Die folgenden Abschnitte erklären alle 11 Methoden im Detail, einschließlich ihrer Anwendungsfälle und Einschränkungen.

TYPO3 gibt zuerst die TypoScript-Assets (PageRenderer) aus und danach die Assets des AssetCollectors. JavaScript mit priority landet im <head>, alles andere JavaScript aus dem AssetCollector vor </body>. CSS steht immer im <head>, gruppiert nach Priorität.

Diese Reihenfolge ist für TYPO3 v10.3 bis v14.3 dokumentiert (TYPO3 Explained: Assets):

<head>
page.includeJSLibs.forceOnTop
page.includeJSLibs
page.includeJS.forceOnTop
page.includeJS
AssetCollector::addJavaScript() with ‘priority’
page.jsInline
AssetCollector::addInlineJavaScript() with ‘priority’
</head>
page.includeJSFooterlibs.forceOnTop
page.includeJSFooterlibs
page.includeJSFooter.forceOnTop
page.includeJSFooter
AssetCollector::addJavaScript()
page.jsFooterInline
AssetCollector::addInlineJavaScript()
 

Mit einer Content Security Policy (CSP) blockiert der Browser Inline-Skripte und -Styles, die die Richtlinie nicht erlaubt. Kennzeichnen Sie Inline-Assets für CSP, dann ergänzt TYPO3 den passenden Nonce oder Hash.

• CSP im Frontend aktivieren: Feature-Flag security.frontend.enforceContentSecurityPolicy setzen (oder reportContentSecurityPolicy für den Report-only-Modus) oder die Disposition in der csp.yaml der Site festlegen.
• TYPO3 v13: useNonce="1" bei f:asset.script und f:asset.css nutzen, im AssetCollector ['useNonce' => true].
• Ab TYPO3 v14.2: csp="1" bzw. ['csp' => true] nutzen. useNonce funktioniert noch, schreibt aber eine Deprecation ins Log und entfällt in v15.0. Für externe Dateien ist csp standardmäßig aktiv.
• Hashes statt Nonces (ab v14.2): Ein Nonce ändert sich bei jedem Request, daher kann ein Reverse Proxy die Antworten nicht cachen. Mit useHash: true und useNonce: false unter behavior in der csp.yaml sendet TYPO3 Hash-Quellen, und die Seiten bleiben cachebar.

<f:asset.script identifier="greeting" csp="1">
   console.log('Hello');
</f:asset.script>

Quellen: TYPO3 Explained: Content Security Policy, Deprecation #100887

Wie CSS und JavaScript in TYPO3 hinzugefügt werden, beeinflusst nicht nur die Funktionalität, sondern auch die Seitenleistung, das Rendering-Verhalten und die Core Web Vitals.

Das Verständnis dieser Auswirkungen hilft Ihnen, häufige Leistungsengpässe zu vermeiden, insbesondere in modernen TYPO3-Projekten.

Header vs. Footer-Laden

• CSS wird normalerweise im <head> geladen, um Layoutverschiebungen zu verhindern.
• JavaScript, das im <head> geladen wird, kann das Rendering blockieren, wenn es nicht sorgfältig behandelt wird.
• Im Footer geladenes JavaScript reduziert das Rendering-Blocking und verbessert die wahrgenommene Geschwindigkeit.

TYPO3 bietet mehrere Möglichkeiten, zu steuern, wo und wann Assets gerendert werden. Die Wahl der richtigen Methode ist entscheidend für leistungsabhängige Seiten.

Risiken durch Rendering-Blocking

• Inline- oder headerbasiertes JavaScript kann das Rendering der Seite verzögern.
• Das Laden unnötiger Assets global erhöht das Seitengewicht.
• Das Mischen mehrerer Methoden zur Asset-Einbindung kann zu Duplikaten oder ungeordnetem Output führen.

Moderne Ansätze wie AssetCollector helfen, diese Probleme zu vermeiden, indem sie Prioritäten und Rendering-Reihenfolge vorhersehbarer verwalten.

Warum AssetCollector die Leistung verbessert

• Zentralisierte Asset-Verwaltung
• Bessere Kontrolle über die Lade-Reihenfolge und Prioritäten
• Vermeidet unbeabsichtigte Duplikationen über Templates und Extensions hinweg
• Vereinfachte Fehlerbehebung bei assetbezogenen Problemen

Für TYPO3 v10 und höher ist AssetCollector in der Regel die sicherste Wahl für leistungssensitive Projekte.

Was hat sich in TYPO3 v14 für die Performance geändert?

TYPO3 v14 fasst Frontend-CSS und -JavaScript nicht mehr zusammen und komprimiert sie nicht mehr. Die TypoScript-Optionen config.concatenateCss, config.concatenateJs, config.compressCss und config.compressJs wurden in v14.0 entfernt (Breaking Change #108055).

Die offiziellen Alternativen sind ein Build-Tool wie Vite oder Webpack, Kompression durch den Webserver, HTTP/2 oder HTTP/3 sowie ein CDN für statische Dateien. Unsere Übersicht der kostenlosen TYPO3 CDN-Erweiterungen nennt Optionen für den letzten Punkt.

Best Practices für die Leistung (Kurzübersicht)

• Laden Sie JavaScript immer im Footer, wenn möglich, oder setzen Sie defer bei <f:asset.script>.
• Vermeiden Sie Inline-Assets, es sei denn, sie sind wirklich erforderlich.
• Injizieren Sie dasselbe Asset nicht über mehrere Methoden.
• Überprüfen Sie regelmäßig die Frontend-Ausgabe auf ungenutztes CSS oder JS.

Diese Praktiken helfen, TYPO3-Projekte schnell, wartbar und TYPO3 upgrade sicher zu halten.

Obwohl TYPO3 mehrere Möglichkeiten zur Einbindung von Frontend-Assets bietet, kann die falsche Nutzung zu Leistungsproblemen, unvorhersehbarem Verhalten oder Upgrade-Problemen führen. Vermeiden Sie die folgenden häufigen Fehler, um Ihr TYPO3-Projekt sauber und wartbar zu halten.

1. Verwendung von Legacy-TypoScript-Methoden in modernen TYPO3-Versionen

Was geht schief

• Methoden wie HeaderData, FooterData oder alte includeJS-Patterns werden in TYPO3 v10+ verwendet.
• Das Laden von Assets wird schwieriger zu steuern und zu debuggen.

Warum es ein Problem ist

• Diese Ansätze wurden für ältere TYPO3-Architekturen entwickelt.
• Sie erhöhen die technische Schuld und erschweren zukünftige Upgrades.

Was stattdessen zu tun ist

• Bevorzugen Sie Fluid Asset ViewHelpers oder den AssetCollector in modernen TYPO3-Projekten.

2. Mischen mehrerer Asset-Injektionsmethoden auf derselben Seite

Was geht schief

• CSS oder JS wird gleichzeitig über TypoScript, Fluid und PHP hinzugefügt.
• Assets erscheinen mehrmals oder in unerwarteter Reihenfolge.

Warum es ein Problem ist

• Die Render-Reihenfolge wird unvorhersehbar.
• Das Debuggen von Frontend-Problemen wird erheblich schwieriger.

Was stattdessen zu tun ist

• Wählen Sie eine primäre Methode zur Asset-Einbindung pro Seite oder Extension.
• Halten Sie das Asset-Handling im gesamten Projekt konsistent.

3. Zu starke Abhängigkeit von Inline-JavaScript oder CSS

Was geht schief

• Inline-JS oder CSS wird der Bequemlichkeit halber hinzugefügt.
• Logik und Styling werden verstreut und sind schwer zu warten.

Warum es ein Problem ist

• Inline-Assets sind schwieriger zu cachen.
• Sie können die Leistung und Lesbarkeit negativ beeinflussen.

Was stattdessen zu tun ist

• Verwenden Sie nach Möglichkeit dateibasierte Assets.
• Reservieren Sie Inline-Code für wirklich dynamische oder minimale Anwendungsfälle.

4. Laden von Assets global, wenn sie nur auf bestimmten Seiten benötigt werden

Was geht schief

• CSS oder JS wird auf der gesamten Seite eingebunden, obwohl die Funktion nur auf wenigen Seiten verwendet wird.

Warum es ein Problem ist

• Erhöht unnötig das Seitengewicht.
• Beeinträchtigt die Leistung auf der gesamten Seite.

Was stattdessen zu tun ist

• Begrenzen Sie Assets auf Templates, Seiten oder Extensions, auf denen sie benötigt werden.

5. Ignorieren der Render-Reihenfolge und Abhängigkeiten

Was geht schief

• JavaScript wird ausgeführt, bevor das DOM oder erforderliche Bibliotheken verfügbar sind.
• CSS-Überschreibungen werden nicht wie erwartet angewendet.

Warum es ein Problem ist

• Führt zu fehlerhafter Funktionalität oder Layout-Problemen.
• Wird oft als „zufällige“ Frontend-Bugs missverstanden.

Was stattdessen zu tun ist

• Seien Sie sich der TYPO3-Asset-Rendereihenfolge bewusst.
• Verwenden Sie moderne Methoden, die Prioritäten und Abhängigkeitsmanagement unterstützen.

6. Überspringen der Bereinigung bei TYPO3-Upgrades

Was geht schief

• Alte Asset-Einbindungsmethoden bleiben nach dem Upgrade von TYPO3 bestehen.
• Im Laufe der Zeit sammeln sich mehrere Legacy-Patterns an.

Warum es ein Problem ist

• Erhöht den Wartungsaufwand.
• Erschwert zukünftiges Debugging und Optimierung.

Was stattdessen zu tun ist

• Überprüfen Sie die Asset-Einbindungsmethoden während des Upgrades.
• Ersetzen Sie schrittweise Legacy-Ansätze durch moderne Methoden.

Danke, dass Sie diesen Leitfaden gelesen haben. Wir hoffen, er hat Ihnen geholfen, die verschiedenen Methoden zur Hinzufügung von CSS- und JavaScript-Assets in TYPO3 klar zu verstehen und wann welche Methode in realen Projekten verwendet werden sollte.

TYPO3 bietet mehrere gültige Methoden für die Asset-Integration, und die richtige Wahl hängt immer von Ihrem Anwendungsfall, Ihrer TYPO3-Version und der Projektstruktur ab. Wenn Sie bereits mit einer dieser Methoden gearbeitet haben, teilen Sie gerne Ihre Erfahrungen in den Kommentaren.

Wenn Sie neugierig sind, wie KI im TYPO3-Ökosystem angewendet wird, werfen Sie einen Blick auf das AI Universum für TYPO3, wo praktische TYPO3-Workflows auf intelligente Automatisierung treffen.

Und für Teams, die die Erstellung von Inhalten, die Code-Generierung und die Optimierung direkt in TYPO3 vereinfachen möchten, bietet der T3AI - AI Assistant eine fokussierte, All-in-One-Lösung.

Erstellen Sie saubere, wartbare TYPO3-Projekte mit der richtigen Asset-Strategie und verbesserter TYPO3 Barrierefreiheit.

Kostenlose TYPO3-Leitfäden für Ihr Team
Sieben kostenlose Leitfäden für TYPO3-Teams und Agenturen, jeweils als PDF mit Excel-Arbeitsblättern: Upgrade, Barrierefreiheit, Relaunch, Mehrsprachigkeit, MCP, EU AI Act und Cyber Resilience Act.
Kostenlose TYPO3-Leitfäden laden