Pagespeed Optimization with TYPO3

LCP (Largest Contentful Paint): Measures "perceived load time" – how long it takes for the largest visible element in the viewport to appear. Target: under 2.5 seconds.

INP (Interaction to Next Paint): Evaluates the page's responsiveness to user interactions and replaced the earlier "First Input Delay" (FID) metric in March 2024. A low INP value shows that the page consistently responds quickly to input.

CLS (Cumulative Layout Shift): Measures "visual stability", i.e. unwanted layout shifts while the page is loading. Target: under 0.1.

Google Lighthouse is a free analysis tool built directly into Chrome DevTools for assessing a website's quality. It checks, among other things, performance, accessibility, best practices, and SEO, and provides concrete optimization pointers.

Analyze the current state: Start with a baseline assessment, e.g. using Google's PageSpeed Insights or WebPageTest. Both tools score mobile and desktop load time separately and provide concrete improvement suggestions – we recommend a target of at least 90 out of 100 points.

Clean up the source code: Lean, error-free HTML, CSS, and JavaScript without unnecessary nesting renders pages faster. Minification removes unnecessary characters, and combining multiple files reduces additional requests.

Compress and deliver images appropriately: Serve images at the smallest possible file size and the dimensions actually needed. TYPO3 can automatically shrink images and convert them to the efficient WebP format.

Reduce external elements: Every resource from a third-party server – such as social media buttons or ad banners – creates an additional request and slows down page rendering. Use them as sparingly as possible.

Prefer web-safe fonts: Custom web fonts have to be downloaded on every visit. Fonts already pre-installed on most devices, on the other hand, cost virtually no load time.

Compress data: GZIP can significantly shrink files before they're transferred between server and browser – set up with just a few lines of server-side configuration.

Use caching: Browser and server caching ensure that recurring resources like the logo don't need to be reloaded on every visit, but are served from cache instead.

Use a content delivery network: For an international audience, a CDN distributes the website across servers in different countries, so content is always delivered from the nearest location.

Enable lazy loading: Images outside the visible area are only loaded once actually needed. As of TYPO3 10, browser-native lazy loading via the loading attribute is already the default.

Adopt HTTP/2: The more modern transfer protocol bundles multiple requests together and compresses data more thoroughly – provided both browser and hosting support it.