TYPO3 has a reputation for being a resource hog and has been mentioned for being a slow CMS. This article explores some performance tips and guidelines that you can apply to optimize the performance of your TYPO3 websites.
Speed matters and websites must be fast because page load speed directly affects business metrics such as User Experience (UX), conversions, and SERP positions. And, most importantly, it makes users happy.
Page speed matters to Google too.
The common rule of thumb is that Google prefers websites that load up under three seconds. Since the 2010 announcement, page load speed has been an important search signal that factor into where Google places your website in SERP listing.
How would you rate the performance on your desktop and mobile versions of your TYPO3 website – Good, Decent, or Poor?
If the question caused you to frown, it is high time for your website to be configured for optimum speed. It’s just not enough to use the best TYPO3 development strategies; the platform and the website also have to be configured properly for the fastest speed and best performance metrics.
For a high-functioning website, different building blocks have to come together and fit perfectly. In particular, the following areas can be distinguished:
- Infrastructure (Hardware and Middleware)
- Frontend – Programming, building blocks, and browser activities
- Backend – Programming, TYPO3 setup, and database
1. INFRASTRUCTURE
To run a web site, TYPO3 uses three applications: the HTTP server, PHP (as part of the former), and the SQL database. There are various ways to improve the efficiency of each app.
HTTP/2 with Push Server: When you click something in your browser, the transmission of information via the network happens. This works as a performance technique mostly that is helpful in loading resources preemptively.
Redis: Redis stands for Remote Dictionary Server and helps store information about the website when it loads and helps load the website faster the next time.
Brotli: The data transfer between the server and the browser can be compressed efficiently with this new approach. Brotli is at least 20% better than the previously available algorithms.
2. FRONTEND
There are numerous optimization possibilities, particularly in the transfer and rendering of the data to and through the browser. Following are the most used content optimization tools:
WebP: This format is considerably better at compressing images. TYPO3 delivers the WebP format images by default. WebP and is already supported by all major browsers (If not available, a “modern” graphic format would be transferred, as usual).
Srcset: Photos delivered on the user device are automatically optimized by TYPO3. It doesn’t serve high-quality images on mobile phones and offers higher quality when the website is loaded using a high-res display.
Lazy Loading: Non-critical resource loading is deferred until it is required.
3. BACKEND
Intelligent data caching and microservices architecture: Where a lot of performance is required, optimal internal caching should be given attention, and the required components should be isolated and ready for scale-on demand scenarios.
PHP Profiling: Analyze the internal performance actions methodically (in particular keep a close eye on sluggish database queries or a non-active cache). Are parts of the code sluggish and could use a speed boost? Some profiling tools often collect data on memory usage and could suggest optimization areas.
13 Tips for Improving the Performance of TYPO3 Web Applications
Choose Providers for Secure Web Hosting
In the process of finding out how to make your TYPO3 website faster, selecting a stable and fast server and successful TYPO3 host services can be among the most important decisions you can make.
Keep TYPO3 Up-To-Date
It is always a good idea to update your site to the new version of TYPO3 LTS at any time. Check out the most recent edition of TYPO3 LTS at https:/typo3.org/download/
Enable Cache for TYPO3
Use the below-mentioned settings in TypoScript to enable the internal, very robust caching system. The whole website would be cached and the site would load faster.
#setup
config.no_cache = 0
Image Optimization
Due to the large size of images, websites are often sluggish. Please take the following steps to optimize the images on your TYPO3 website.
Downsize pictures manually (using online tools or Photoshop)
I suggest:
http:/compressjpeg.com/
http:/compresspng.com/
Minification frees up more space. Set up the following TypoScript code,
#Configuration
Config.compressCss = 1
Config.compressJs = 1
CSS up top & JS down bottom
If required, all (inclusionary and inline) JavaScript will be pushed to the bottom of the HTML document after the content and before the body tag closes. Use the following lines to accomplish it:
#Setup: All JavaScripts are moved to the footer
Config.moveJsFromToFooterHeader = 1
# Setup: Push JavaScripts individually to the footer
Page.includeJSFooter
{Jquery = jquery.min.js
Bootstrap = bootstrap.min.js}
Use Content Distribution Network (CDN)
Content Distribution Networks (CDNs) have revolutionized the way web experiences are designed and delivered. You can cache files on the CDN provider’s distributed server network, rather than hosting your website on a single server. Google, Microsoft, Yahoo, and other major web companies offer a range of free CDNs.
Reduce the Number of TYPO3 Extensions
Disable all TYPO3 extensions that are not required by your app.
JavaScript Async
Async allows the script to be downloaded in the background.
< script async src=”foobar.js”></script >
Using Lazy Load for Photos & Videos
Images: Lazy load images to improve load time and reduce bandwidth consumption. Example: HTTP:/jquery.eisbehr.de/lazy/
Video: Speed up your site by substituting a clickable sample image for embedded YouTube and Vimeo images. To play the video, visitors simply click this image.
Don’t Use TYPO3 EXT: Indexed Search
The indexing of FULLTEXT is fast. However, for sites with more than 100 pages, the difference in search capability is visibly significant. Indexed Search is incredibly sluggish and places an immense burden on the TYPO3 database. Delete it and you will see how the load of the server decreases and website output improves.
Minimize Request to Servers
Determine the number of server requests (including both internal or external requests for CSS, JS, and images) specific TYPO3 page needs. To minimize the load time, you should focus on reducing the number of server requests. If you have too many files, you should use the CSS or Image Sprites.
Page Size Optimization
According to Google, your page should be under 500 KB and less than 3 seconds of loading time would be perfect. Check your total page size using GTmetrix and try to reduce the all-over page size.
Final Words
Last but not least, remember to keep a close eye on your website performance metrics as “Performance Optimization” doesn’t end with the above-mentioned tips and guidelines. There is a lot that can be done to extract the best speed and efficiency from TYPO3 websites.
From selecting a good TYPO3 web host and server to TYPO3 Configuration, frontend strategies, ways to utilize a CDN, database cleanups, server optimization, and more, I have tried to lay down the best ways to speed up the TYPO3 websites in this article.
I’d love to hear from you here. Share some other speed enhancement techniques for the TYPO3 website that I may not have listed above.