CSS, JavaScript und Bilder mit TYPO3 komprimieren

Die Ladezeiten von Webseiten spielen nicht nur für ungeduldige Internetbesucher eine wichtige Rolle. Vielmehr verweisen Suchmaschinen auf die Wichtigkeit schneller Seitenzugriffe und das damit verbundene Ranking. Wir haben uns daher mit der Datenkomprimierung - insbesondere den CSS-, JavaScript und Bilddateien - bei TYPO3-Seiten beschäftigt. Einiges kann man recht schnell umsetzen, aber Vorsicht: immer überprüfen, ob es "Nebeneffekte" gibt:

1. Ergänzung typoscript

config.compressJs = 1

config.compressCss = 1

config.concatenateJs = 1

config.concatenateCss = 1

--> Das fasst die css- und JavaScript-Dateien zuammen(aber nur, wenn sie über includeCSS, includeJS oder includeJSFooter eingebunden sind).

2. Einstellungen im Installtool

Compression-Level sollte größer als 5 sein

Debuggen sollte ausgeschalt sein

Bilder: Jpg-Qualität im Install-Tool auf 70 oder 65 setzen, Browsercache für Bilder aktivieren.

3. Änderungen in der .htaccess

<IfModule mod_expires.c>

    ExpiresActive on

    ExpiresDefault                                      "access plus 1 month"


  # CSS

    ExpiresByType text/css                              "access plus 1 year"


  # Data interchange

    ExpiresByType application/json                      "access plus 0 seconds"

    ExpiresByType application/xml                       "access plus 0 seconds"

    ExpiresByType text/xml                              "access plus 0 seconds"


  # Favicon (cannot be renamed!)

    ExpiresByType image/x- icon                          "access plus 1 week"


  # HTML components (HTCs)

    ExpiresByType text/x-component                      "access plus 1 month"


  # HTML

    ExpiresByType text/html                             "access plus 0 seconds"


  # JavaScript

    ExpiresByType application/javascript                "access plus 1 year"


  # Manifest files

    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"

    ExpiresByType text/cache-manifest                   "access plus 0 seconds"


  # Media

    ExpiresByType audio/ogg                             "access plus 1 month"

    ExpiresByType image/gif                             "access plus 1 month"

    ExpiresByType image/jpeg                            "access plus 1 month"

    ExpiresByType image/png                             "access plus 1 month"

    ExpiresByType video/mp4                             "access plus 1 month"

    ExpiresByType video/ogg                             "access plus 1 month"

    ExpiresByType video/webm                            "access plus 1 month"


  # Web feeds

    ExpiresByType application/atom+xml                  "access plus 1 hour"

    ExpiresByType application/rss+xml                   "access plus 1 hour"


  # Web fonts

    ExpiresByType application/font-woff                 "access plus 1 month"

    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"

    ExpiresByType application/x-font-ttf                "access plus 1 month"

    ExpiresByType font/opentype                         "access plus 1 month"

    ExpiresByType image/svg+xml                         "access plus 1 month"


</IfModule>