0

On a client's site I have an element, which produces CLS, content layout shift. This element is not critical for the site's functioning.

According to Nic Jansma, CLS measuring ends up with onLoad event.

My idea is to remove this element from the source code and load it after onLoad event with Google Tag Manager. Sadly I can't go the usual way, because of the issue nr. 3, according to Simo Ahava's classification.

<script>
    var d1 = document.getElementById('article');
    d1.insertAdjacentHTML('afterend', '<div id="quicknavi-button-container">Content</div>');
</script>

What should I adjust on my javascript? It fires an error I can't interpret:

Cannot read properties of null (reading 'insertAdjacentHTML')

Evgeniy
  • 2,337
  • 2
  • 28
  • 68
  • You're asking if your solution will work? Maybe you should just try it and test with Lighthouse if the CLS is still an issue. – jcubic Nov 28 '21 at 14:13
  • sad to say, I have no stage or similar. If I would have a possibility to test it on the corresponding setup, I wouldn't ask :) But the question is rather about javascript. – Evgeniy Nov 28 '21 at 14:23
  • Sorry if you can't test and see if it works, how we? Do you expect that we have crystal ball and tell you. No one will create whole project to test if your code is doing what you want. I think that you don't know how SO works. You need to provide [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) no one will do this for you. – jcubic Nov 28 '21 at 14:28
  • as I said, the question is about javascript, not about the functionality of concept. – Evgeniy Nov 28 '21 at 14:29
  • 1
    The error say it's all. This is common error. You just need to put the script thag before closing `

    ` tag, because it can't find element with id="article" that is probably no rendered yet. This have nothing to do with CLS and Google Tag mangager.

     – jcubic Nov 28 '21 at 14:31
  • Does this solve the issue [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/q/14028959/387194) – jcubic Nov 28 '21 at 14:33

1 Answers1

1

When CLS ends depends on the tool measuring it. For Lighthouse, it "ends" when the tool stops profiling the page (which may be multiple seconds after onload). For the Chrome User Experience Report, CLS is measured up through unload (i.e. the entire page view experience). For most Real User Monitoring (RUM) tools, CLS ends when they send the beacon, which is often at the onload event.

So it's not that CLS always ends at onload -- it's a cumulative measurement and the value reported depends on the tool you're using or care about.

The best way to address CLS concerns isn't to play tricks with avoiding the measurement tools (e.g. trying to only load content after onload to avoid detection), but to understand the user experience and address those shifts in the right way. For example, by either pre-allocating vertical "space" for the element, or load it in a way that doesn't shift the content.

NicJ
  • 4,070
  • 1
  • 25
  • 18
  • You are hundred times right. But I'm affected by the very inflexible organization on the client's side, making it impossible to go the way of battle the cause instead of impact. – Evgeniy Nov 29 '21 at 07:56
  • @Evgeniy I feel with you, but you are creating an UX issue for the users in an attempt to fool Google, and as soon as both things backfire on you with a vengeance your client will not blame Google, they will blame you (and rightly so - you build it, you own it). Some problems cannot be solved without fixing the underlying issue. Better be honest about it. – Eike Pierstorff Nov 29 '21 at 11:20
  • @EikePierstorff honesty is the first thing my client gets from me. Two ways are clearly communicated - which way we take, depends on what the client will be able internally to achieve. – Evgeniy Nov 29 '21 at 12:59