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.
Hinweis
Bilder komprimieren
Bilder in folder /fileadmin/images/ sollen nach Möglichkeit immer manuell komprimiert und von Metadaten befreit werden. Hilfreich dafür sind Tools wie TinyPNG hilfreich. Im Mediacake passiert dies automatisch.
Beispiel: route-serfaus.svg – animierte SVG-Grafik
Diese SVG-Animation wurde mit SVG Artista erstellt, unter folgenden Einstellungen:
HTML
`element class` set to `route-serfaus`
`animation type` set to `Transition`
`Fill Animation` activated (`Stroke Animation` deactivated/not available)
`animation duration` set to `0.6s`
`stagger step` set to `0.1s`
`animation delay` set to `0.2s`
`animation easing` set to `linear`
Image Lazy-Loading
Das Bakehouse unterstützt Lazy-Loading für Bilder. Während des Ladeprozesses wird eine Farbfläche mit der Durchschnittsfarbe des später geladenen Bildes angezeigt. Die Aktivierung des Features erfolgt über TypoScript.
Javascript-Event für img:
Um im Javascript auf das Laden der Bilder reagieren zu können (z.Bsp. Anpassen der Höhe eines Swipers etc.) wird ein Event auf dem img-Tag mit dem Namen bhLazyImageLoaded getriggert, sobald das Bild geladen wurde.
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;
...
}
TrueType-Fonts (.ttf) sollten derzeit nach Möglichkeit in das .woff2-Format umgewandelt werden. Dieses Format ist deutlich kompakter, schneller ladbar und wird von allen modernen Browsern unterstützt. Die umgewandelten .woff2-Dateien können anschließend im Verzeichnis /fileadmin/ abgelegt und eingebunden werden.