06082 928047Anfahrt

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>