TYPO3 Website optimieren

Admin Panel

Das Admin Panel ist standardmäßig inaktiv. In der config.typoscript muss der Eintrag config.admPanel = 1 ergänzt werden:

config {
    headerComment (
        Seite erstellt von Klaus Hesbacher
        Web: https://www.klaus-hesbacher.de
        Mail: klaus.heba@web.de
    )
    admPanel = 1
}

Password Policies

Password Policies

Kann für Backend und Frontend separat konfiguriert werden. Die Konfiguration erfolgt in der ext_localconf.php oder in der additional.php:

$GLOBALS['TYPO3_CONF_VARS']['SYS']['passwordPolicies'] = [
    'akoe' => [
        'validators' => [
            \TYPO3\CMS\Core\PasswordPolicy\Validator\CorePasswordValidator::class => [
                'options' => [
                    'digitCharacterRequired' => true,
                    'lowerCaseCharacterRequired' => true,
                    'minimumLength' => 20,
                    'specialCharacterRequired' => true,
                    'upperCaseCharacterRequired' => true
                ]
            ]
        ]
    ]
];

$GLOBALS['TYPO3_CONF_VARS']['BE']['passwordPolicy'] = 'akoe';
$GLOBALS['TYPO3_CONF_VARS']['FE']['passwordPolicy'] = 'akoe';

E-Mail-Adresse im Quelltext kaschieren

In der config.typoscript ergänzen:

config {
    spamProtectEmailAddresses = -6
    #spamProtectEmailAddresses_atSubst = (=at=)
    #spamProtectEmailAddresses_lastDotSubst = (#)
}

Robots.txt

Die Konfiguration erfolgt über die Site Settings im Backend. Unter „Static Routes“ eine robots.txt erstellen und den gewünschten Code einfügen.

XML-Sitemap

Voraussetzungen

• Im Site Set sollte in der config.yaml die Abhängigkeit definiert sein
• Extension SEO ist erforderlich

Konfiguration

Im Backend unter „Active TypoScript“ unter „pageNum“ den Code auslesen:

http://akoe.ddev.site/?type=1533906435

Um den Link zu sitemap.xml zu ändern, in der Site config.yaml folgendes einfügen (am besten nach der Root Page ID):

routeEnhancers:
  PageTypeSuffix:
    type: PageType
    map:
      sitemap.xml: 1533906435

CSS und JS mergen, komprimieren und GZIP aktivieren

Im config.typoscript folgendes ergänzen:

config {
    # ... andere Konfigurationen
    compressCSS = 1
    concatenateCss = 1
    compressJs = 1
    concatenateJs = 1
}

[applicationContext == 'Development']
config { 
    compressCSS = 0
    concatenateCss = 0
    compressJs = 0
    concatenateJs = 0
}
[END]

Für den Development Context kann die Kompression deaktiviert werden, was für das Entwickeln sinnvoll ist.

.htaccess Konfiguration

Unter akoe/public/.htaccess folgenden Block aktivieren (Rauten entfernen):

<FilesMatch "\.js\.gz">
    AddType "text/javascript" .gz
</FilesMatch>
<FilesMatch "\.css\.gz">
    AddType "text/css" .gz
</FilesMatch>
AddEncoding x-gzip .gz

Wichtig: In den Installation-Wide Options nach „compression“ suchen und beide Werte auf 9 setzen. Unbedingt testen, da dies nicht bei allen Serverkonfigurationen funktioniert.

Cache optimieren

In der config.typoscript ergänzen:

config {
    cache_period = 604800
}

Im Backend können unter den Seiteneigenschaften unterschiedliche Cachezeiten eingestellt werden. Für das Impressum, wo es wenig Änderungen gibt, könnten auch höhere Werte genutzt werden.

Content Security Policies

Feature Toggles aktivieren

In den Settings folgende Einträge unter „Feature Toggles“ aktivieren:

• Security: frontend enforce content security policy
• Security: frontend report content security policy

CSP-Konfiguration

Neben der Site config.yaml eine Datei csp.yaml erstellen:

# Inherits default site-unspecific frontend policy mutations (enabled per default)
inheritDefault: true
mutations:
  # Results in `default-src 'self'`
  - mode: "set"
    directive: "default-src"
    sources:
      - "'self'"
 
  # Allow fonts from data URIs
  - mode: extend
    directive: 'font-src'
    sources:
      - 'data:'

Quelltext optimieren mit der Extension Sourceopt

Installation via Composer

ddev composer require lochmueller/sourceopt

in der setup.typoscript ergänzen

@import "EXT:sourceopt/Configuration/TypoScript/setup.typoscript"

Ein constants.typoscript erstellen

@import "EXT:sourceopt/Configuration/TypoScript/constants.typoscript"

sourceopt.formatHtml = 1

[applicationContext == 'Development']
#sourceopt.enabled = 0
sourceopt.formatHtml = 4
[END]

Mit sourceopt.formatHtml wird das html in eine Zeile geschrieben. Über den Development Context kann man sich für das Entwickeln den Code lesbarer halten.

WebP automatisch konvertieren mit Image Jack

Installation via Composer

composer require "sitegeist/image-jack"

Vorbereitung

• Alle verarbeiteten Bilder über das Maintenance-Modul löschen
• Caches leeren
• Server-Konfiguration anpassen oder Fallback-Driver aktivieren

.htaccess Konfiguration

Nach RewriteEngine on einfügen:

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(png|gif|jpe?g)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteRule ^ %{REQUEST_FILENAME}\.webp [L,T=image/webp]

<IfModule mod_headers.c>
    <FilesMatch "\.(png|gif|jpe?g)$">
        Header append Vary Accept
    </FilesMatch>
</IfModule>

Backend-Einstellungen

Under Settings → Extension Configuration folgende Optionen deaktivieren:

„Activate png processor“

„Only process images in processed folders“

„Activate jpeg processor“

Verarbeitung starten

ddev typo3 jack:process

Ausführen bis keine Bilder mehr gefunden werden.

Finale Schritte

• Frontend aufrufen und mehrere Seiten besuchen
• TYPO3 generiert dadurch neue Bilder und konvertiert sie automatisch

Die .htaccess-Regeln sorgen dafür, dass WebP-fähige Browser automatisch die WebP-Versionen der Bilder erhalten, während andere Browser die ursprünglichen Formate bekommen.