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.
.htaccess rules
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:
# Brotli compression
<IfModule mod_brotli.c>
<IfModule mod_filter.c>
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css application/json
AddOutputFilterByType BROTLI_COMPRESS application/javascript
AddOutputFilterByType BROTLI_COMPRESS text/xml application/xml text/x-component
AddOutputFilterByType BROTLI_COMPRESS application/xhtml+xml application/rss+xml application/atom+xml
AddOutputFilterByType BROTLI_COMPRESS image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>
# Gzip compression
<IfModule mod_deflate.c>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>
# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/cache-manifest "access plus 0 seconds"
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType text/x-component "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
# Do not cache source map files
<IfModule mod_headers.c>
<FilesMatch "\.map$">
Header set Expires "0"
Header set Cache-Control "no-cache, no-store, must-revalidate, max-age=0, proxy-revalidate, no-transform"
</FilesMatch>
</IfModule>Image optimization
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:
PageSpeed module
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!