Core Web Vitals: Show HTML Elements affecting Cumulative Layout Shift

Hi,

I really appreciate that Cloudflare added the Core Web Vitals section under Browser Insights.

I was wondering if it’s possible to get the HTML Elements affecting Cumulative Layout Shift? I see that we can get different bits of information like URL, Browser, Operating System and Country, but I can’t find information about the HTML Elements actually causing the Cumulative Layout Shift.

If this is not currently supported, it would be extremely useful to have access to this information. Sometimes, CLS will only occur on some configurations, and it is very hard to reproduce the issue in a testing environment. Having access to HTML Elements causing the Cumulative Layout Shift would provide webmasters all the information they need to fix the issue on their websites.

Thank you.

Hello! Thank you for using Browser Insights! We are talking with Google to see whether it is possible to add more information like what you’ve requested. At this moment, CLS doesn’t provide the info you are looking for, but stay tuned!

2 Likes

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 :wink:

  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 :sunglasses:)! 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
    Lighthouse Config
  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!)

2 Likes

Hi @M4rt1n,

Thanks for the detailed message.

The reason I believe it would be a great addition if Cloudflare was showing more information about CLS is because CLS can be hard to detect on an individual basis.

When testing CLS, I often get a score of 0, which essentially means there is no CLS. But Cloudflare still detects a percentage of CLS, because maybe some ads or other dynamic elements are causing CLS for some users and not others.

It is impossible for a web developer to test every possible scenario out there. Fortunately, Cloudflare has some information about each user that visits a website, so it could possibly also find the problematic elements that are causing CLS if this information was available just like in DevTools. If Cloudflare would show the elements that are causing CLS, then we would know where it is coming from and could fix it pretty easily.

I understand this is not something that can be done at the moment, but it would still be a nice feature to have in the future.

1 Like

Seems like your prayers were answered or Cloudflare (just against my expectations) has done a fukking good job and pushed this at Google very hard. But today I noticed on GPSI and Lighthouse a very clear CLS hint which shows EXACTLY which parts of your site are moving and which not.

Try it and use it wisely:

2 Likes

Thanks for the info.

I’ve seen this before, and although it is helpful indeed, it does not repressent real-world CLS since it is only testing a single browser.

The reason I would like Cloudflare to provide this info is because it has access to every user’s browser configuration. So in theory, Cloudflare could know exactly what elements on various browsers / network connections / countries are causing the highest CLS. Because since CLS is often caused by ads, and ads are different for each user, it is really difficult to know what exactly is causing CLS without inspecting every single user’s browser and confiruation.

Thats just the case if you have implemented your ads in a bad way. GPSI actually states clearly how to solve that. And I am 100% sure Cloudflare will never implement something and opting to support “all browsers” and all connections and all countries.

Also if you have optimized it once your ads will change as new ads will come and old ones will go therefore this request (for optimizing ads) does not make sense to me at all as you normaly do not control how often they rotate and which one is getting displayed.

What I would recommend:

  1. optimize your site measured on the highest standards available. You will find them in mobile ranking
  2. optimize your site natively and understand why it is causing CLS

About the ads:

  1. they are normaly in a container/div which you initially set a fixed width and height to. If it is set correct it will be able to contain all ads which are made for this width and height. Good Ads-Vendors will check this and just load ads that fits that container without creating CLS.
  2. CLS is just measured untill the SiteLoad event (and some ms after) and therefore you can just defer your ads untill after SiteLoad and you should be good to go.

About different locations and different countries:
just test with a VPN from a different location GPSI will test from a server close to the person who is testing. Therefore you can simulate with this different locations. All these “Core Web Vitals” you are refering to are created by Google and are measured on Chromium which is developed by Google and will be the very same for all other Chromium based browsers, but when it comes to other browsers like Safari and FireFox I dont know of any way to measure the CLS there anyway. Yes maybe Cloudflare could realise this… but like I said, for everything beside chromiumbased browsers very unlikely IMHO.

1 Like