Bild-Daten
Bilder – auch Hintergrundbilder in Content-Elementen – sollten nur mit den Bakehouse-ViewHelpern geladen werden. So wird immer die kleinstmögliche Dateigröße geladen.
Achtung
Bilder komprimieren
Wenn vom Integrator direkt auf /uploads/tx_bh/* referenziert wird, kann das Bakehouse, Bilder nicht in der Größe reduzieren.
Bilder in folder /fileadmin/images/ sollen nach Möglichkeit immer manuell komprimiert und von Metadaten befreit werden. Hilfreich dafür sind Tools wie TinyPNG.
Es sollte, wenn möglich, immer JPG oder SVG verwendet werden. PNG sollte nur in Ausnahmefällen Verwendung finden.
Background Lazy-Loading
Das Bakehouse unterstützt Lazy-Loading für Background-Images. Während des Ladeprozesses wird eine Farbfläche mit der Durchschnittsfarbe des später geladenen Bildes angezeigt. Die Aktivierung des Features erfolgt über TypoScript.
Typoscript
plugin.tx_bh.settings.lazyloading = 1
Video-Daten
Videos, im Header zum Beispiel, sind mitunter ein enormes Problem für die Ladezeit. Eine effiziente Komprimierung der Video-Datei(en) ist daher unerlässlich. Generell sollte eine maximale Datenrate von mehr als 2 Mbit pro Sekunde nicht überschritten werden.
CSS und JavaScript
Sowohl CSS als auch JavaScript können das Laden einer Seite nicht nur verzögern, sondern sogar anhalten. Sogenanntes "Render-Blocking" wird von PageSpeed Insights massiv abgestraft. Wir empfehlen deshalb, folgende Codes im Root-TypoScript zu integrieren. Diese fassen CSS- und JS-Dateien in jeweils eine Datei zusammen und schieben diese an eine möglichst späte Stelle innerhalb des Renderprozesses. Der Vorgang wird nur im Front-End ausgeführt, um ein einfaches Debugging der Seite im Back-End nicht zu verhindern.
Teile dieser Codes sind Bakehouse-spezifisch und wurden im Rahmen der Bakehouse-Entwicklung erstellt, um das Verhalten von TYPO3 weiter zu verbessern.
Typoscript
config.concatenateJs = 1
config.compressJs = 1
config.concatenateCss = 1
config.compressCss = 1
[backend.user.isLoggedIn]
config.concatenateJs = 0
config.compressJs = 0
config.concatenateCss = 0
config.compressCss = 0
[global]
Erweiterte Einstellungen
Diese Einstellungen können sich dauf die Anzeige der Webseite auswirken, können aber zusätzliche Geschwindigkeitsvorteile bringen.
Typoscript
config.concatenateJsAsync = 1
config.moveJsFromHeaderToFooter = 1
config.lazyLoadingCss = 1
[backend.user.isLoggedIn]
config.concatenateJsAsync = 0
config.moveJsFromHeaderToFooter = 0
config.lazyLoadingCss = 0
[global]
Achtung
Probleme bei der Komprimierung
Es gibt Ausnahmefälle, wo Komprimierungen und Konkatenationen zu Problemen führen, beispielsweise ...
- Skripte innerhalb des TYPO3-Elementes werden nicht berücksichtigt. Das bedeutet, wenn die Funktion moveJsFromHeaderToFooter verwendet wird, dann wird das Skript des Elements vorab geladen und kann beispielsweise kein jQuery finden, falls das Skript davon abhängig ist.
- Skripte, die regelmäßig Inhalte verändern, führen dazu, dass TYPO3 bei eingeschalteter Komprimierung die Merge-Datei neu generieren muss. Dadurch kann der Webspace schnell vollgeschrieben werden, wenn beispielsweise über includeJS TagManager oder Adwords eingebunden werden. Diese können mit excludeFromConcatenation ausgenommen werden.
- lazyLoading hat durch das verspätete Anzeigen von Inhalts-Elementen einen visuellen Einfluss auf das Online-Projekt und ist daher nicht für alle Projekte geeignet.
Schriften (Webfonts)
Schriften werden oft von externen Quellen geladen und blocken mit ihrem @import das Rendern der Seite. Gerade Adobe Fonts (vormals Typekit) stellt hier ein bekanntes Problem dar, aber auch Googles eigene Lösung Google Webfonts sorgt für einen schlechten Score bei PageSpeed Insights.
Wir empfehlen, Schriften – wenn möglich – immer lokal im folder /fileadmin/ zu speichern und direkt von dort einzubinden.
Google Webfonts können beispielsweise vom google-webfonts-helper geladen werden.
Schriften sollte außerdem eine Fallback-Methode mitgegeben werden. Damit kann Text auch dann schon gerendert werden, wenn die Schrift noch nicht geladen ist:
CSS
@font-face {
...
font-display: swap;
...
}