'Woocommerce jQuery snippet causing heavy CLS on page render - can I load it before the rest of the page?
In my woocommerce store I'm resizing the product category description with class .archive-description
using a jquery script in Code Snippets.
This is causing heavy CLS (Cumulative Layout Shift), and Google is not very happy.
This is how it works right now - milliseconds of course, but google doesn't care.. Google have FULL panic over this:
- The page loads.
- The full .archive-description is visible
- The page are done loading
- The .archive-description resizes to height 120px
Anyone know what I can do to make this small jQuery snippet load before the rest of the page, so that the container doesn't resize while the page is loading?
Is it even possible, or do I have to do this another way?
Here is my script:
<script>
jQuery( function( $ ) {
$(document).ready(function() {
var maxHeight = 120;
let curHeight = parseInt($("header .archive-description").height(), 10);
if (curHeight >= maxHeight) {
$("header .archive-description").css({
"height": maxHeight + "px",
"overflow": "hidden",
});
$("<button class='read-more' style='margin:15px 0;'>Read more</button>").bind('click', function() {
$("header .archive-description").animate({height: 20+curHeight});
}).insertAfter("header .archive-description");
}
})
});
</script>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|