CODEWITHSUNDEEP
jquerylighthousecore-web-vitals
user2033464
user2033464

Reputation: 143

cumulative layout shift and jquery

I am using materialize css 0.100.2 and have been looking into CLS on my website I have identified the problem as being this piece of code:

$(window).resize(function() {
      $('.lt-slider').height($(window).height() + 15).css('position', 'relative');
  });

With this code in place my CLS is 1.13 if I remove it 0.039 but I loose a chunk of the screen so that the content disappears behind the slider is there a solution to keep the content and reduce the CLS.

Upvotes: 1

Views: 1428

Answers (2)

user2033464
user2033464

Reputation: 143

I have been digging a little deeper into my problem an as far as I can tell it is to do with Materialize CSS and jquery version. I have tried .097 0.100.2 and 1.00 all with the same results the CLS is 0.4 if I use jquery 2.2.4 but if I use jquery 3 and above the CLS shoots up to 1.4 but if I use materialize CSS version 1 and use javascript the CLS drops and I can use the above to reduce to 0

Upvotes: 1

user2033464
user2033464

Reputation: 143

I found this posted by gerald:

First, create a class "antiCls" and add it to your custom CSS (in the HEAD element) as follows:

.antiCls { 
    visibility: hidden;
}

then use this bit of javascript:

var cls = document.getElementsByClassName('antiCls'),
    i = cls.length;
    
for (i = 0; i < cls.length; i++) {
    cls[i].style.visibility = "visible";
    }

then I added the class to every element that was affected by "Avoid large layout shifts" in lighthouse you may need to test each element applied the antiCls class to but it worked

Upvotes: 2

Related Questions