Core Web Vitals: Show HTML Elements affecting Cumulative Layout Shift

[M4rt1n]

To drop in here my 2cents:

1. there is no need for any more details then how high the CLS is as all infos you need are provided by Google itself (in its Browsers Developers Console)

2. google does ATM not state what exactly is moving and producing CLS and probably will also not do this if Devs from Cloudflare will ask them nicely

3. If you optimize your sites according to Googles recommendations you will definitely be able to score 100/100 in GPSI
   Proof:
   

   
   
   
   
   
   (this both results are from “mobile”, not “desktop”)

4. If you want to find out what is producing CLS then you will have to understand why and how it is getting produced. Unless you have done this you will never be able to really fix this.

CLS:

is getting produced when your page is rendered and already accessable, but then loads something else and again have to RE-render and therefore things which are not above the fold are getting changed/influeced/moved.

One way to make sure that CLS is at least minimized it:

• make sure everything is getting rendered in one batch
• or make sure the time between eache rendered version is appropriate so it gets detected and displayed as “one rendering” but this information is not reliable as it can change anytime so better go for the first option!

What can cause renderblocking?
(assuming people have followed “best practice” while building the page)

1. CSS
2. Fonts
3. picurtes (without “width” and “height” attributes)

Notice: if JS is producing CLS then you have just made a big mistake and you are a bad human beeing (lol )! Never use JS to realise styling. Just use it for “functions”.

About (1.) CSS:

• Do combine ALL CSS files into one so they do not get rendered separately and do get rendered as one file together.
• Do render CSS ASAP, litteraly use every existing technic to deliver and reder it as soon as possible and best when DOM is not displayed already as this is the perfect time to render CSS and display them together to not trigger RE-rendering

What technic to use to speed optimize CSS:

1. concatination
2. compression
3. HTTP/2 Push

About (2.) Fonts:

1. include as less/few fonts as possible
2. optimize fonts natively to deliver them faster
3. include your fontfaces on top of your CSS files to make them apply faster
4. “preload” fonts and define them by doing this as prioritised assets which gets loaded faster

About (3.) Pictures:

Pictures can cause CLS aswell as they sometimes do not consume the space they should before getting loaded as width and height is not defined and therefore they later will consume more soace then initialy tought/defined by the layout.
Do always set width and height at pictures!

About CLS in general on top:

1. it does just apply “above the fold”
2. it just gets measured untill the final pageLoad.

How to detect CLS and where it comes from:

1. get Chrome (or any chromium based browser for desktop)
2. run audits with “Lighthouse”
   
   
3. Chose your Lighthouse Configs
   
4. Hit run and let the tab stay active unless finished
5. When finished please click on the “View Original Trace”
   
   
6. You will be redirected to the “Performance” Section
   (NOTICE: this “performance” page is not from the page you have seen above, as this does not have any “errors” and therefore would be a bad example)
7. The performance page will look somewhat like this
   
   
   
   You will want look out for the purple sections.
   7.1 on top there is a very short purple section (thi sis where the CSS gets loaded)
   7.2 you will find two other purple sections (which stands for rendering)
   One:
   
   
   Two:
   
8. you noticed there are more then two purole “rendering” blocks which indicates the page had to render twice to display it fully.
9. check your HAR (Waterfall) to check what can cause this
   9.1 HINT: mostly fonts are not loading fast enough or CSS files are not combined to one single file or in worst case people try to add “styling” with JavaScript

As Google is very sloppy when it comes to detect “TTB” and to “CLS” it actually opens a very big window for mistakes. So if Google detects CLS it really should be very easy to detect.

Anyway your goal always should be:

• render things together
• render things above the fold first (others can be rendered after… yes in this case its ok)
• do not re-render things that are above the fold!
• if you re-render please prevent making things shift! re-rendering color and such things is ok

(sorry for the typos!)