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

  1. The page loads.
  2. The full .archive-description is visible
  3. The page are done loading
  4. 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