HTML Ausgabe minimieren im TYPO3 CMS 7 und 8

Vorbereitung

Zuerst einmal eine lauffähige TYPO3 Instanz. Ich verwende in meinem Beispiel die Version 7.6.x. Diese sollte mittels Composer installiert werden. Wie man eine TYPO3 Instanz mit Composer aufsetzt, kann man sich auf der Seite https://composer.typo3.org/ ansehen.

Sobald die TYPO3 Instanz steht. Brauchen man als nächstes das html-compress Paket von wyrihaximus welches man auch auf Packagist finden. Mit diesem Befehl kann man es instalieren.

composer require wyrihaximus/html-compress

Nach dem Installieren steht uns die komplette Bibliothek zu Verfügung.

Als Nächstes brauchen wir eine Extension in der wir dieses Packet aufrufen und über einen Hook den Quelltext verändern. In meinem Beispiel verwende ich einfach die Provider Extension, die ich für die Website erstellt habe.

In dieser Extension benötigen wir eine Datei namens "ext_localconf.php". In dieser werden die Hooks registriert, die für die Verarbeitung des Contents verantwortlich sind.

Hierzu stehen und 2 Stück zu Verfügung.

  1. contentPostProc-output
    1. Dieser Hook greift in die Verarbeitung von "no_cache" Einträgen ein. Wenn man zum Beispiel ein Formular einbindet und hierfür die Seite auf no_cache stellt.
  2. contentPostProc-cached
    1. Hier werden alle Inhalte Verarbeitet die den Eintrag "cache" haben. Dazu gehört der normale tt_content

Beide Hooks werden auf die gleiche Klasse Registriert so das man nur eine Datei Pflegen muss.

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['tslib/class.tslib_fe.php']['contentPostProc-output'][] = 'Markussom\\MyExtension\\Hooks\\ContentPostProcessor->render';
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['tslib/class.tslib_fe.php']['contentPostProc-cached'][] = 'Markussom\\MyExtension\\Hooks\\ContentPostProcessor->render';

Nachdem wir das gemacht haben Erstellen wir dem Namespace gemäß eine Datei unter "/typo3conf/ext/my_extension/Classes/Hooks/" mit dem Namen ContentPostProcessor.php.

Hierbei ist es wichtig das wir das Autoloading in Composer anpassen. In unserer composer.json fügen wir im Bereich autoload folgenden Eintrag ein.

{
  ...
  "autoload": {
    "psr-4": {
      "Markussom\\MyExtension\\": "Web/typo3conf/ext/my_extension/Classes"
    }
  },
  ...
}

Nachdem wir das gemacht haben führen wir composer dump aus um die Klasse in den autoload prozess mit aufzunehmen.

Jetzt kümmern wir uns um Klasse an sich. Diese muss nämlich gar nicht mehr viel können :)

Lediglich muss, wie in der Doku des Vendor Paketes von „WyriHaximus\HtmlCompress“ beschrieben, die Factory aufgerufen werden und anschließend die Funktion „compress“ auf unser HTML angewendet werden.

Das Ganze sieht dann in Etwa so aus.

<?php
namespace Markussom\MyExtension\Hooks;

/**
 * This class provides functions to compress the html
 * output from TYPO3 CMS
 *
 * @author Markus Sommer <[email protected]>
 */
class ContentPostProcessor
{
    /**
     * Render function
     *
     * @param $_funcRef
     * @param $_params
     */
    public function render($_funcRef, $_params)
    {
        $parser = \WyriHaximus\HtmlCompress\Factory::construct();
        $_params->content = $parser->compress($_params->content);
    }
}

So nachdem das erledigt ist einfach mal alle TYPO3 CMS Caches löschen und das Wunder im Frontend bestaunen :)

Viel spaß beim herum Experimentieren.

p.s. Man kann hier nämlich noch einiges Bauen. Denn momentan wird das komplette HTML „Minified“. Mit einer kleinen RegEx kann man das nur auf den Body beschränken.

$pattern = '~<body.*?>(.*?)<\/body>~is';
preg_match($pattern, $_params->content, $body);
$_params->content = preg_replace('/<body .*<\/body>/is', $parser->compress($body[0]), $_params->content);