TYPO3 Pagespeed Optimierungen

• IDs von Feldern

CSS Loading (critical)

Kritsiches CSS beinhaltet sofort sichtbare Bereiche auf der Webseite, z.B. den Header und/oder die Navigation und sollte in einer seperaten CSS Datei definiert sein.

Über .inline im TypoScript bettet TYPO3 die CSS Datei direkt in den Header ein.

page {
    includeCSS {
        critical = EXT:distribution/Resources/Public/Dist/css/critical.css
        critical.inline = 1
    }
}

CSS Loading (non-critical)

Nicht kritisches CSS sollte asynchron geladen werden, kann in TYPO3 in der TypoScript wie folgt umgesetzt werden.

page {
    headerData {
        10 = TEXT
        10.value (
            <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
            <noscript><link rel="stylesheet" href="styles.css"></noscript>
        )
    }
}

Quelle: web.dev

JS Loading

JavaScript Datei im TypoScript preloaden lassen:

page {
    headerData {
        20 = TEXT
        20.value (
            <link rel="preload" href="/typo3conf/ext/distribution/Resources/Public/Dist/js/scripts.js" as="script" />
        )
    }
}

Preload JS File wird nicht ausgeführt, deshalb noch vor dem </body> einfügen:

<script>
  var index = document.createElement('script');
  index.src = '/typo3conf/ext/distribution/Resources/Public/Dist/js/scripts.js';
  document.body.appendChild(index);
</script>

Quelle: developer.mozilla.org | developers.google.com