The second layer of the performance onion is about building the “frontend stuff”. The goals are to minimize, what’s delivered to the client, and to deliver the asset at the right time. At the end of this post, you will know which strategies, tools and TYPO3 options, you can use to improve in this area.
The main goal in this area to minimize the data, which is transferred between server and client. The average size of a website grew from 703kB in 2010 to 2.332 kB in 2016 (Source: KeyCDN). Now imagine how it takes to transfer a website of this size via a 56k mobile connection. If not, you can simulate this via the dev tools of Google Chrome in the network tab. So it is really necessary to take the overall size of a website into account.
The good thing is that there are several possibilities to reduce the size of a website and to influence the loading time. TYPO3 provides several options to support you with this task.
Options via TYPO3
config. concatenateJS and
Only the files, which are included via TypoScript and the corresponding options
page.includeJSFooterlibs are included in the concatenating and compression activities of TYPO3. It is possible to to exclude exclude each of them from the process. For details, please look at the official TypoScript Reference.
All (most ?) browsers are able to receive and process compressed contents. You can use this feature, if you have these three things in place:
1) Apache and Nginx need to be able to deliver gzip compressed content. In case of apache, this means that the module “deflate” is available and activated. If you are using nginx, you must look for the module “gzip”.
2) You need activate the compression rules for Apache and Nginx. You can activate that for the Apache web server in the htaccess file.
AddType "text/css" .gzip
AddEncoding gzip .gzip
If you are using the default htaccess file as a base, you just need to uncomment these lines at the very beginning of the file.
For Nginx, I cannot give you are certain advice, but this stackoverflow question / answer pair should bring you on the right track: https://stackoverflow.com/questions/5131916/how-to-deflate-js-file-in-nginx
3) The last thing is, to tell TYPO3 to deliver js and css contents gzip compressed. You must enable the settings in the TYPO3 InstallTool by setting the
compressionLevel to the desired level.
$GLOBALS['TYPO3_CONF_VARS']['BE']['compressionLevel'] = 9;
$GLOBALS['TYPO3_CONF_VARS']['FE']['compressionLevel'] = 9;
The first is used for the backend and the second for the frontend, as you might know from the notation. ;-)
TYPO3 extensions for image handling
There are two extensions for TYPO3, which are enhancing the image handling very much. Both will help you to optimize the size of the images in your TYPO3 installation.
The extension “imageautoresize” will resize all images, which are uploaded to the TYPO3 backend. In the configuration of this extension you can define the maximum image dimension while uploading. If they are exceeded, the image will automatically be resized .
The extension “imageoptimizer” will optimize the images while upload or on delivery depending on your settings. It depends on packages, which must be installed on the server, like optipng, jpegoptim, or gifsicle. Optimizing SVGs is available via npm and svgo. You must set the options via the extension manger.
The goal of responsive images is to deliver the right image dimensions and image size to a certain client, may it be a widescreen desktop or a mobile device.
These are supported by default via TYPO3. Yes, you might look astonished now, but it is the truth … not extension is necessary, but just a bit of brooding. The key is a proper combination of crop variants and fluid templates.
My colleague Dirk Döring (faulancr) worked on this topic the last weeks and held a talk about it at the Munich TYPO3 User Group. He found out, that TYPO3 supports responsive images by default. It needs just a proper combination of crop variants and fluid templates.
We are planning one or two blog posts about this topic.
Frontend – Tool – Chain
CSS / JS structure
In the this area the buzzword these days is “above the fold”. It was introduced by Google and means all css which is needed for the display of the content should / must be delivered inline. Every other css should be included later on.
As you see, also in the are of frontend creation there are several ways to improve the performance through optimizing the files used for the frontend.
The next layer will deal with topics, which you can influence as a TYPO3 integrator.
In case you are interested in the other articles of this series, here is an overview of all already published posts:
- Layer 4 – Extension Development
- Layer 3 – Caching, TypoScript and more
- Layer 2 – Frontend Optimisation
- Layer 1 – Asset Delivery and Caching
- Introduction – Tools and Overview
I want to thank my supporters via patreon.com, who make this blog post possible. Unfortuately this week there is no new bronze sponsor. If you appreciate my blog and want to support me, you can say “Thank You!”. Find out the possiblities here: