PageSpeed optimization with TYPO3

As of May 2021, the time has come: Google has announced to consider the so-called Core Web Vitals as ranking factors in the search result at that time (see: official blog post from Google). The optimization of loading times (so-called pagespeed) of websites will then become even more important and can become a decisive competitive advantage..

What are the Core Web Vitals?

The Core Web Vitals are three metrics defined by Google to measure the visitor friendliness ("user experience") of websites:

• LCP: The Largest Contentful Paint measures the "perceived loading time" of a web page, specifically: how long it takes until the largest component is displayed in the visible area ("viewport"). The value should be below 2.5 seconds. More information about the LCP from Google.
• FID: The First Input Delay measures the duration until the first interaction possibility. This can be, for example, the activation of a link or writing in an input field. The duration should be below 100 milliseconds. More information about the FID from Google.
• CLS: The Cumulative Layout Shift stands for the "Visual Stability". This refers to the shifts of the layout during the page build. The CLS can take a value from 0(very stable) to 1(high instability) and should be lower than 0.1. More info on the CLS from Google). 

The tool performs two evaluations: Once for the mobile site (left in the image) and once for the desktop version(right in the image). A total value is then calculated from the respective factors (LCP, FID, CLS and First Contentful Paint (FCP)) (in this case, both are at 100, which is very rare).

If you click on Open Report (top right), you can view details and possible errors for each page.

With 75%, the loading time is ahead of the intuition(how quickly I find what I am looking for) with 66%, the responsiveness(appearance on the respective device), the simplicity of operation  with 61% and the attractiveness i.e. the layout or the visual presentation with only 24%.

Load time should thus be an important part of optimizing the website for Google (SEO) .

Analyze the ACTUAL status

The first thing to do is to determine the status quo. With the free tool PageSpeed Insights from Google, the loading time of a website is measured and evaluated on both mobile devices and desktop PCs. In the process, 9 different criteria are evaluated and suggestions for improvement are made. The rating can be between 0 to 100 points. The higher the score, the better the performance of the website. Even if from a score of 85 the result is displayed in green, the goal should be 100 out of 100.

Another tool for measurement is the WebPageTest tool, which can be used to determine the effective loading time. The delivered graph is very detailed and lets you precisely see the sequence of data retrieval as well as the individual loading times.

2. Spruce up the core of the website: Validate HTML

No matter how simple or complex a website is, all are rendered using HTML and this code should always be correct in every detail. The structure, meanwhile, is dictated by the World Wide Web Consortium.

Even if a website is displayed correctly on one's screen, it does not necessarily mean that everything is fine in the code. And errors contribute to slowing down the loading speed. So every page should be checked before it is put online to catch any potential errors in advance.

For validating HTML code, the World Wide Web Consortium's free tool is useful: https://validator.w3.org/

3. Optimize images for the web

A website should not only be informative, but also attractive. And for that, visuals are necessary. This is one of the most important and at the same time the simplest steps in optimizing the loading time of a website.

For the presentation of images on the Internet is always about these factors:

• File size as small as possible (KB not MB!)
• Dimensions as large as necessary (px)

Tinypng.com is a free tool to reduce file size quickly and easily. We have compiled detailed information on the topic of image optimization for you in a PDF document.

Be sure to provide images in a display-dependent manner! Be sure to provide images only in the required dimensions. For smartphones, much smaller images are sufficient than for desktops. The good thing: You do not have to upload each image in different sizes. TYPO3 can "downsize" images automatically. However, you need to take this into account in your TYPO3 template . Here you can learn how images are played out in TYPO3 depending on the display resolution.

4. Avoid embedding external elements if possible

Whenever information is stored on an external web server, an additional request must be made when loading your own website. And this costs time. Therefore, external elements should be avoided as much as possible. Whether images or social networks (e.g. Facebook buttons, Google+), advertising banners or other external ads: they slow down the loading time of the website.

5. Use web-safe fonts

Fonts are like handwriting: very, very diverse. When designing websites, some people put a lot of emphasis on custom fonts. Technically, this is possible in which so-called web fonts are integrated. In the best case, this also looks quite nice. But . . . You probably already guessed: This is at the expense of loading time. Because the font files are large and these are downloaded when the website is called up. Google also provides some free fonts that can be included via CSS.

The best solution is to resort to websafe fonts. These are fonts that can be assumed to be already installed on every computer and thus cost 0.00% loading time.

6. Compress data

Data compression, according to the Duden dictionary, is the "alteration of data or characters with the aim of reducing the amount of storage space required or increasing the speed of transmission."

The procedure of data compression is known from ZIP files. With a website, the procedure can also be applied. Files can be compressed by GZIP to reduce the file transfer between browser and server. The compression program is free of charge and offers a good degree of compression. To use the module, a simple code is inserted in the .htaccess file.

To learn how to compress CSS and JavaScript files with TYPO3, see our article Data Compression with TYPO3

7. Use caches

When retrieving a website, there are many processes that repeat themselves. So that this does not always have to be started from scratch, there are two caches: the browser cache of the web browser and the server cache.

In the browser cache, resources that have already been retrieved (e.g. texts or images) are stored on the user's computer as a copy. If this resource is needed again later, it can be retrieved from the cache more quickly than if it had to be downloaded again. Each time the content for a URL is needed to display a page, the cache is first checked to see if it is already there.

A good example is the logo that is usually found on every page of a website. So that this file is not downloaded again and again with each page call, one can make use of the .htaccess file again and insert a simple code there.

In our know how article Browsercaching mit TYPO3 you will get concrete tips for TYPO3 cache management.

8. Content Delivery Networks (=CDN)

Using Content Delivery Network makes sense where the target audience of a website is international. The CDN has a simple principle. The website is kept in cache on different servers in different countries and distributed locally. If the website is called from Frankfurt, a local German server delivers the content. If the website is called up in LA, an American server delivers. The result? Speed in loading.

There are several content delivery network providers, such as OVH GmbH (Saarbrücken, Germany), Cloudfare (USA), Google Cloud CDN or Amazon CloudFront.

9. Use LazyLoading

With LazyLoading, the browser always loads only the images it needs at the moment (i.e. those that are in the visible part of the browser). This speeds up the page load enormously.

LazyLoading can be installed relatively easily in TYPO3 (you can find out how here). Starting with TYPO3 version 10 LazyLoading is set by default. Thereby, the so-called browsernative LazyLoading is activated via the "loading"-attribute of the img-tag.

10. Further development: HTTP/2

Since the first page was put on the Internet - in 1991 - browsers and servers have been communicating via the Hypertext Transfer Protocol (=HTTP) to request or send web pages.

For a long time, websites consisted mainly of HTML and a few images. In the past 25 years, a lot has happened, only HTTP remained as it has always been. The problem in the background: HTTP causes idle time when loading modern websites. And idle time means slower loading. With HTTP/2 should be approached, the transmission accelerated and optimized.

HTTP/2 provides, among other things, the ability to aggregate multiple requests and more advanced data compression. The most widely used browsers support HTTP/2, though many providers have yet to catch up. As far as TYPO3 is concerned, there is no need for action or change. Find out if your hosting partner supports http2 or find out for yourself under this link right away!