Effective Solutions to Improve Website Speed with TYPO3
Understanding Core Web Vitals
Optimizing Core Web Vitals (CWV) is crucial for improving user experience and search engine rankings. When Google introduced these metrics back in 2020, it made website performance measurable through uniform components. It also allowed website owners to compare their efforts with those of their competitors or, on a larger scale, compare CMSs to choose what best fits their company’s needs while delivering fast user interfaces (UIs) and online experiences for their visitors and consumers. This case study demonstrates how TYPO3, a high-performance enterprise CMS, effectively enhances CWV through targeted improvements.
Read more on how to get the most out of your TYPO3 installation in our blog
Core Web Vitals Explained: Optimizing Website Performance
TYPO3 has been at the forefront of web development, continuously updating its features every 18 months through its Long-Term Support (LTS) release cycle. Even before the introduction of core web vitals metrics, the Google Lighthouse report provided valuable insights for improvements. In order to measure core web vitals, there are key indicators that Google bases its ratings on.
The Chrome UX report highlights the distribution of First Contentful Paint (FCP) times across various CMS platforms, with categories for fast, average, and slow load times which assess page speed. Below, the data shows that most CMSs have a significant portion of pages loading quickly on desktop, while mobile performance generally lags behind, emphasizing the importance of optimization for user experience. Data from the Chrome UX report and the HTTP Archive reveals:
“Sorting the content management systems (CMSs) by popularity, there isn't a clear correlation with performance, but it's still interesting to see the relative performance of each one.”
Rick Viscomi, co-maintainer of the HTTP Archive and Web DevRel at Chrome, in August 2018.
Desktop First Contentful Paint in the CMS Landscape
Desktop First Contentful Paint in the CMS Landscape. Source: CMS Performance Analysis (August 2018, link); Artwork: TYPO3 GmbH
Mobile First Contentful Paint in the CMS Landscape
Mobile First Contentful Paint in the CMS Landscape. Source: CMS Performance Analysis (August 2018, link); Artwork: TYPO3 GmbH
Viscomi continues: “Some observations:
- Drupal has a higher density of fast FCP than WordPress
- Wix, Squarespace, Joomla, and WordPress have < 25% fast FCP
- All CMSs are average FCP (between 1 and 3s) at the 50th percentile
- TYPO3 has the highest density of fast FCP”.
Challenges in the TYPO3 core are historically identified through feedback from TYPO3’s active community, ensuring that performance issues are addressed promptly. Although TYPO3 often outperforms its competitors, certain performance issues still need to be addressed in order to meet and exceed its high standards while adhering to Core Web Vitals benchmarks.
The role of agencies in implementing the frontend is crucial in achieving optimal performance. While TYPO3 provides powerful tools, it is the responsibility of the implementing agencies to utilize these tools effectively to meet core web vitals testing benchmarks. TYPO3's community boasts numerous agencies with deep expertise in delivering engaging and high-performing front-ends.
How to Improve Website Performance? TYPO3’s Key Optimizations
Optimizing Frontend Techniques:
Advanced frontend techniques play a significant role in optimizing Core Web Vitals. Agencies implementing TYPO3 can leverage the following methods:
- Asynchronous JavaScript Management: Loading JavaScript asynchronously reduces First Input Delay (FID) by allowing critical resources to load first.
- Advanced CSS Techniques: Utilizing modern CSS approaches such as Flexbox and Grid helps reduce Cumulative Layout Shift (CLS) by ensuring stable and responsive layouts.
- Progressive Enhancement: Ensuring the website functions well on older devices and under poor network conditions improves overall Core Web Vitals metrics.
Automated Image Optimization:
TYPO3 excels in automated image optimization, a crucial factor for improving Largest Contentful Paint (LCP). TYPO3’s media management capabilities allow for automatic resizing and compression of images, ensuring fast load times and responsive image rendering across different devices. These features directly contribute to better LCP scores.
Technical and Environmental Factors
Optimizing Core Web Vitals involves considering several technical and environmental factors:
- Use of Content Delivery Network (CDN): CDNs significantly improve load times by delivering content from geographically closer servers.
- Compression Techniques: Compressing transmitted data, including HTML, CSS, and JavaScript, reduces bandwidth usage and speeds up load times.
- Modern Protocols (HTTP/2 and HTTP/3): Utilizing these protocols accelerates asset delivery, enhancing overall site performance.
- Server-Side Rendering (SSR) vs. Client-Side Rendering (CSR): SSR can improve initial load times, especially for JavaScript-heavy applications, by reducing the browser's workload.
Rundown of Core Web Vitals Improvements by Version
TYPO3's core development team, with community input, implemented several crucial optimizations across multiple versions with the aim of allowing end users to improve website performance
Impacts on LCP across versions:
Upgrading to PHP 7, and later to PHP 8, has significantly improved the overall performance of the CMS. These upgrades have enhanced speed and efficiency, positively impacting frontend performance and improving the Largest Contentful Paint (LCP) values. TYPO3 v13 LTS introduced built-in support for modern image formats like WebP and AVIF, which reduce file sizes by up to 30% compared to JPEG while maintaining high visual quality and transparency features. This significantly improves LCP, especially on image-heavy pages, contributing to faster perceived load times and overall better Core Web Vitals scores.
In detail:
- Performance boost due to PHP 7 (v8)
- Human-readable URLs and native URL routing (v9)
- Built-in SEO features and XML sitemaps (v9)
- Webhooks for integration and automation (v12)
- Native support for WebP and AVIF image formats (v13)
Impacts on CLS across versions:
Handling mobile responsive layouts better, improving stability with automatic redirects, and reducing visual shifts have all helped enhance CLS. The addition of drag-and-drop and improved content editing features have also boosted visual stability.
In detail:
- Standalone Fluid (v8)
Impacts on INP:
TYPO3 v12 LTS introduced asynchronous processing of webhooks with Symfony Messenger, preventing main thread blocking and ensuring fast response times. The new 'Reactions' feature allows easy configuration of incoming webhooks, enabling seamless integration in low-code environments and efficient automation.
In detail:
- Webhooks for integration and automation (v12)
Ongoing Benefits of TYPO3's Long-Term Support Versions
TYPO3 has always been ahead of the curve. Features like merging CSS and JavaScript have been available since TYPO3 v4.5 (before 2008), and image compression and optimization have long been standard practices. Since January 2020, Core Web Vitals have been measured, highlighting TYPO3's impressive performance. As of April 2020, the most used TYPO3 version was v4, with more than 27% of TYPO3 websites running on this outdated release. Three versions were in their ELTS cycle (v6, 7, and 8; released 2014, 2015, and 2017), with version 9 having entered its bug-fixing status and v10 released that same month as the latest LTS release. Based on this core web vitals audit results, it’s evident that website owners benefited from early technological implementations well before they impacted overall web measurements.
Google Tech Report: CMS comparison on mobile devices (Screenshot: July 2024) and current TYPO3 versions online at the early stages of CWV.
Consistent performance improvements across TYPO3 versions demonstrate the long-term value of TYPO3 service providers. They ensure even older versions align with Google's metrics, maintaining excellent CWV scores. This ongoing support is crucial for leveraging TYPO3's full potential. With TYPO3 v13 LTS, the CMS continues to improve Core Web Vitals through native support for modern image formats, ensuring optimized performance for the next generation of websites.
Results: Quantifying the Improvements Across Releases
- LCP: PHP 7 improvements, cleaner URLs, built-in SEO, and webhooks contribute to better LCP in various releases.
- CLS: Enhancing mobile layouts and reducing visual shifts have improved CLS.
- INP: INP metrics are improved with asynchronous webhooks and streamlined integration using Symfony Messenger and 'Reactions'..
These technical improvements translated into tangible business benefits, such as lower bounce rates, higher conversion rates, and increased user satisfaction.
Extended Context: TYPO3 in Broader Performance Comparisons
Core Web Vitals data enables flexible comparisons across a wide range of systems, including both traditional CMS platforms and other web technologies used to build and deliver digital experiences. Depending on the selected parameters, reports may include enterprise, headless, or API-driven solutions alongside TYPO3.
Across these comparisons, TYPO3 remains among the top-performing systems in terms of the share of websites achieving “good” Core Web Vitals scores – on both desktop and mobile. The data is based on real-world usage and demonstrates consistent performance trends across multiple reporting periods and delivery platforms.
The Role of TYPO3 Agencies in Enhancing Core Web Vitals
To get the most out of a content management system, it’s important to understand the value web developer agencies bring to their clients, and what factors they can influence in order to optimize overall performance. Agencies bring expertise in areas such as JavaScript management to optimize First Input Delay (FID) through techniques like asynchronous loading, advanced CSS techniques including Flexbox and Grid to reduce Cumulative Layout Shift (CLS), and progressive enhancement strategies to ensure websites perform well on older devices and under poor network conditions. Additionally, they manage user interactions and animations to avoid delays and optimize FID.
Exemplary TYPO3 Agency Successes Across Diverse Industries
In various industries, TYPO3 agencies have driven substantial improvements with tangible outcomes. For SIMONSWERK, a leading hinge manufacturer, TYPO3 upgrades led to a 55.51% increase in website sessions and a 47.21% growth in users, thanks to enhanced website speed and accuracy. The French Senate saw a 28% increase in visitors, achieving 14.8 million in 2023, with their website complying with 79% of the RGAA (French accessibility standards). OTH Regensburg’s revamped website increased click-through rates from 6.5% to 9.9%, significantly enhancing student engagement and content accessibility. Steute Technologies achieved 100% mobile-friendly URLs and saw significant growth in impressions and conversions through an extensive TYPO3 update from version 6 to 11. These diverse cases illustrate the impactful enhancements achieved by TYPO3 agencies across different sectors.
Conclusion: Achieve Excellent Core Web Vitals with TYPO3
Improving Core Web Vitals requires targeted optimizations, and TYPO3 provides the necessary tools and features to build high-performing websites. By leveraging these capabilities and the expertise of TYPO3 partner agencies, websites can achieve significant performance improvements. Achieving excellent Core Web Vitals requires a holistic approach involving the CMS, frontend implementation, and technical infrastructure. While TYPO3 offers a robust foundation, it is the collaboration with skilled agencies and the application of advanced frontend techniques that truly maximize web performance and user experience and which can ultimately improve core web vitals.