Early Bird TYPO3 Guide to Google Core Web Vitals

Yes, they are important!

Core Web Vitals are important because they help you measure the performance of your TYPO3 site. They provide concrete metrics that you can track and test to assess the UX of your site and then make improvements as necessary.

In addition, from May 2021, Google will be utilizing Core Web Vitals as an important SEO ranking factor. Core Web Vitals will be an important part of the new page experience signals, together with HTTPS-security, safe-browsing, mobile-friendliness, and intrusive interstitial guidelines.

LCP measures the loading performance of the page.

Here it is not about the loading speed of the page, but the perceived page speed. It measures the time it takes in the loading of the first largest impressionable element of the page.

A page loads elements by elements in stages. So, the main content at the top of your pages must load quickly. The sooner it will happen, the better be the LCP. LCP should not be more than 2.5 seconds.

Let’s understand with an example, on the desktop version of the site we took for reference, the LCP element is an image:

If your content on your TYPO3 site takes a long time to load, it increases the chance that users will get frustrated and leave your site. Therefore, if you’re getting poor LCP scores taking the following steps to improve this metric is crucial.

Of course, the solution you use will depend on the cause of the poor score. There are a handful of reasons why you might be dealing with LCP issues. Some of the most common problems include a slow server, as well as render-blocking JavaScript and CSS.

A few methods you can use to improve LCP are:

• Eliminate large elements. 

If you used PageSpeed Insights to test your website, it will notify you if there’s a specific element on your page that is an issue. If so, you can consider removing it (or making it smaller) to help improve LCP.

• Minify blocking JavaScript and CSS. 

Reducing the number of resources on your site that contains blocking CSS and JavaScript can lower the amount of time it takes to fully load your page’s main content. 

You can use Manifier for TYPO3 Extension to manify JS and CSS.

• Leverage lazy loading.

Lazy loading is when images on a page only load once a user scrolls down to them, enabling you to achieve LCP at a faster rate. You can do this with Lazy Load TYPO3 Extension.

• Use a Content Delivery Network (CDN).

A CDN is a network of servers that loads your site’s content from a data center in close proximity to your visitors. https://extensions.typo3.org/extension/cloudflare

• If none of the above recommendations help improve your LCP, it might be time to upgrade your TPO3 web hosting. Typically, the higher-quality hosting you have, the better servers and overall site performance you can expect.

CLS measures the frequency of layout shift the user has to experience during the loading of the webpage. Such an unexpected layout shift happens because various page resources are loaded asynchronously, or the DOM elements get added at the top of the existing content.

For example, ads, images, videos, fonts, headings — they all change sizes dynamically.

It is annoying and frustrating for the user as he might want to click something, and then the shift happens, and he accidentally clicks something else.

If you go to the Avoid large layout shifts section in the Diagnostics area of PageSpeed Insights, you can also see the individual elements on your site that are “shifting” and affecting your score:

The CLS score of less than 0.1 provides a good user experience.

How to Improve Cumulative Layout Shift (CLS)

If elements on a page shift as the page loads, it often results in a high CLS – which isn’t good. Visual instability can lead to a user clicking on the wrong element, or simply being confused about why items have moved once the page is fully loaded.

Ideally, your CLS should be no more than 0.1. If it is higher than that, there are some steps you can take to improve it.

• Specify image dimensions. 

If you don’t have set attributes for the length and width of your images, this can cause your CLS score to increase. The same is true for any media, such as GIFs, videos, and infographics.

• Consideration is the dynamic ads. 

Any ads included on your website should have their own reserved space that isn’t overly intrusive to the user’s viewing experience. For example, placing large ads at the top of the page can make reading the content more difficult.

• Undefined Element sizes

A third way to improve your CLS score is to reserve a spot for embeds and iframes on your pages. If these elements don’t have defined dimensions, they can move around and affect the layout of the page when they load, ultimately thwarting its UX.

FID measures the user’s first impression of the site.

Again, we are not talking about how fast the page loads, but how quickly the user can interact with it. This Core Web Vital metric captures the user’s first impression with a page to the time when the browser can respond to that interaction.

The interaction could be when the user clicks a link, tap on a button, or use a custom form.

How long it takes for a link to become clickable. If the user fills a form and has to wait for the next page to load, because the browser is busy loading some other parts of the web page, then the FID is high.

This builds frustration as the user has filled in the information, and he wants to move on to the next page.

First Input Delay of less than 100 milliseconds provides an excellent experience to the users.

How to Improve First Input Delay In TYPO3 (FID)

As you might recall, the ideal time for FID is 100 ms or less. Therefore, if your site takes any longer than that, your UX is likely suffering as a result.

The most effective method for improving FID is to optimize your JavaScript. There are a variety of ways to do this.

• Minimize or defer JavaScript. 

Doing so will allow visitors to interact with your website while its JavaScript is still loading in the browser. You can do this by using a plugin such as Async JavaScript:

• The Async JavaScript TYPO3 Method.

Not only can this help to improve FID, page speed, and UX, but it can also boost your search engine rankings.

• Deleting unnecessary third-party scripts

Another way you can improve FID is by removing any unnecessary third-party scripts. Too many scripts can clog your network and lead to slower response times.

• Leverage browser caching 

Finally, you may want to consider using a browser cache. By making it easier for your site’s content to load in users’ browsers, a cache can make JavaScript tasks quicker.