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
TypoScript
Via TypoScript you can concatenate and compress css and javascript files. JS and CSS files can be concatenated and compressed with the settings config.compressJS
, config. compressCSS
, config. concatenateJS
and config. concatenateCSS
.
Only the files, which are included via TypoScript and the corresponding options page.includeCSS
, page.includeJS
, page.includeLibs
, page.includeJSFooter
and 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.
InstallTool
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.
<FilesMatch "\.js\.gzip$"> AddType "text/javascript" .gzip </FilesMatch> <FilesMatch "\.css\.gzip$"> AddType "text/css" .gzip </FilesMatch> 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.
Responsive Images
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
Another option is to optimize javascript and css while creating it. The keyword in this area is “Frontend-Toolchain”. Such a toolchain can optimize javascript and css, while writing and testing it. It is based on taskrunners like gulp or grunt. They can be configured to run tasks on demand or by watching files and directories.
Typical tasks are to run css preprocessors like sass or less and to concatenate the resulting files. Other tasks are compressing (= removing comments and whitespace) and uglifying javascript files. This means that longer speaking variable name are changed to two or three letter variables, in order to reduce the transmitted code size. Also the used images can be optimized for the output in frontend in this step.
CSS / JS structure
Css and javascript data can be delivered at several points, at the beginning, at the end or asynchronously.
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.
Javascript should not be necessary to run the website. That means that is can be included at the end. Another possibility is to include the css files in the header, but to mark them for asynchronous load.
Conclusion
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
Credits
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:
I found the blog post image on pixabay . It was published by jingoba under the CC0 public domain license. It was modified by myself using pablo on buffer.