|

This post is part of the Core Web Vitals Guide series.

Core Web Vitals Guide 🧑‍⚕️ - die wichtigsten Metriken im Web

Die Core Web Vitals: Einheitliche KPIs unabhängig vom Tool. Diese Werte sind zukünftig die Werte, nach denen man Performance bewerten wird; und damit die Werte, die wir mit Kund:innen kommunizieren werden.

bitspeicher.blog · Tipps und Tricks für Webworker.Maxi Becher

CLS, or "Cumulative Layout Shift" indicates how visually stable a page remains during an interaction.

The value should detect shifts in the layout, which are caused by an element that is reloaded.

Classification of the results

The same applies here: the lower the value, the better.

Calculation basis

To calculate the layout shifts, Google uses the following formula

Impact Fraction x Distance Fraction = Layout Shift Score

Impact Fraction = Percentage area (%) of the screen affected by visual shifts.
The sum of the area before and after the shift counts (result: value between 0 and 1)

Distance Fraction = Percentage (%) of the viewport height that an element was moved by the shift. (Result: value between 0 and 1)

So we compare the differences between two frames and use them to calculate the layout shift score.

Details on the calculation and examples can be found here.

Opportunities for optimization

Tag image and videos with sizes (inline).

• Images marked with width and height specifications (width and height) ensure that the browser keeps space for the image while it is still loading.

• Alternatively, the aspect-ratio can be defined via css (! note browsersupport)

• Or (crazy) you can use the [unsized-media feature policy](https://github.com/w3c/webappsec-permissions-policy/blob/main/policies/unsized-media.md#unsized-media- policy-explainer) must be activated in the browser.

Do not insert unexpected elements before existing content

• Always insert suddenly appearing elements at the end
• Change/add elements only if explicit interaction has taken place (e.g. click)

Estimate ad container sizes

• Label advertising (largest cause of layout shifts) with fixed size information. (Google Ads ads usually have dynamic ad sizes, but these can be estimated based on experience in order to partially reduce CLS.)

Schedule dynamic content with placeholders

• Content that is added dynamically, such as a cookie banner, offer/newsletter promotion, etc. causes many shifts.

• This problem can be avoided by using placeholders.

Use transform

• CSS transform only shifts the displayed content and thus does not cause any re-rendering and thus prevents layout shifts.
• Avoid direct animation of CSS properties.

Insert animations/transitions

• Although this only improves the CLS score to a limited extent, it gives users more knowledge that something is happening and can therefore provide a better user experience.

Dealing with web fonts

• Web fonts are often reloaded, which leads to layout shifts called FOUT (flash of unstyled text) and/or FOIT (flash of invisible text)
• Host and preload fonts yourself.

More tips

Google itself lists other tips for optimizing CLS: see web.dev/optimize-CLS

Further information

see web.dev/CLS