Datei-Optimierung

    Es mag wie eine Binsenweisheit klingen, aber: je schlanker eine Seite, umso besser. Vollbildgalerien mit unzähligen Slidern auf einer Startseite schauen zwar gut aus, sind aber ein Problem für die Ladezeiten. Generell gilt: je weiter die Daten komprimiert und zusammengefasst werden können, umso besser. 

    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.

    Image-ViewHelper

    Backgroundimage-ViewHelper

    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 LazyLoading 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 sind mitunter ein enormes Problem für die Ladezeit und eine effiziente Komprimierung 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 Bakehouseentwicklung erstellt um das Verhalten von Typo3 weiter zu verbessern.

    Typoscript
    config.concatenateJs = 1 config.compressJs = 1 config.concatenateJsAsync = 1 config.moveJsFromHeaderToFooter = 1 config.concatenateCss = 1 config.compressCss = 1 config.lazyLoadingCss = 0 [backend.user.isLoggedIn] config.concatenateJs = 0 config.compressJs = 0 config.concatenateJsAsync = 0 config.moveJsFromHeaderToFooter = 0 config.concatenateCss = 0 config.compressCss = 0 config.lazyLoadingCss = 0 [global]
    Achtung

    Probleme bei der Komprimierung

    Es gibt Ausnahmefälle, wo Komprimierungen und Konkatenationen zu Probleme 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; ... }