Contao page speed optimization
Page speed optimization is one of the most critical factors in making your website accessible and performant. It will also help you get your website higher in the search results. Learn a few simple tricks how to do it.
Enable page cache in Contao
One of the most significant speed improvements you can make for the website is to enable the page cache. If your site is not updated frequently, setting a long cache timeout is usually a good idea. Furthermore, if you don't have any member modules on the page, it might be worth always loading the page from the shared cache.
You can read more about caching in the Contao documentation.
Responsive, lazy-loaded images in WEBP format
Contao provides some excellent image features out of the box. You should definitely consider making the images responsive so they are not loaded in full size on mobile devices. Images should also be delivered in modern formats, such as WEBP. Contao provides autoconversion to that format, but it needs to be explicitly enabled.
To improve images even further, make sure they are lazy-loaded. It's a feature that is available natively in all modern browsers. There is one catch here, though! The images seen first on the initial page load should not be loaded lazily, as this would decrease the Largest Contentful Paint (LCP) metric!
Hey, and what about content images in different sizes? Do I have to create an image size record for every single image on the website?
Well, that would be the best 🙂 but it is sometimes just non-realistic. What you can do, however, is set the default image size densities in the page layout settings. It is maybe also worth setting the lightbox image size instead of displaying a raw image that can weigh dozens of megabytes.
Optimization settings in Veello Theme
Once you activate the Veello Theme features in the page layout settings, some new optimization options will appear. The HTTP/2 support will ensure the assets are not bundled, the deferred loading of JS files will help the browser parse the DOM faster, lazy-loaded images will improve the page load, and local fonts will load faster than fetched from external services like Google Fonts.
Do not miss to minify the HTML output markup:
Remove inactive extensions
The default Contao edition installed in most cases comes with several extra bundles out of the box (e.g., calendar or newsletter). They are redundant for some websites but still consume resources while rendering the page. Hence, uninstalling unnecessary extensions (e.g., Contao Manager) is recommended.
A modern website requires improvements on a variety of levels. One of them is certainly a
.htaccess file which can be updated by the below rules (highly inspired by Contao 3) to provide even more performance:
One of the most important things when publishing media files on your website is their quality and size in kilobytes. To avoid uploading raw and exaggerated images, you can use some tools below to compress them while maintaining a decent quality:
For Apache or Nginx servers, there is a superb PageSpeed Module that can greatly increase the performance of your website. For more information, please visit: https://developers.google.com/speed/pagespeed/module/
Check our Optimization guide
This article was based on the Optimization guide available in the documentation. We will keep adding our findings in the future there, so it can be used as a checklist before launching your website!