CLS – Avoid Large Layout Shifts – Div inside HTML

As most of us have witnessed, there is a “semi new” scan entitled CLS in GTMetrix. I am at the start of learning to resolve these, and really need an example of doing so that is worthwhile (I believe this can help thousands of others as well when searching for a more informative tutorial)

The URL in question is: www.Darnalls.com

The GT Metrix reads:

I have attempted to add width and height variables to and no resolution was experienced. I am sure the solution goes beyond this..can someone please educate me (and others) on what intuitive steps to take to resolve such an issue in regards to locations. I have read other articles in regards to this process, but am looking for a human to human explanation

UPDATE: If I remove the “Preload” of my css, the CLS drops to 0.16 (Still the same elements contribute however)

Answer

The following is a part of <head>:

    <!-- Preloading -->
    <link rel="preload" href="assets/fonts/Montserrat-Regular.ttf" as="font" type="font/ttf" crossorigin>
    <link rel="preload" href="assets/fonts/Montserrat-Bold.ttf" as="font" type="font/ttf" crossorigin>
    <link rel="preload" href="assets/fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="assets/fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="assets/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>

    <!-- Styles -->
    <style>
        <?php
        // Inlining critical CSS, so it's known before DOM load (preventing CLS)
        include_once __DIR__ . '/assets/css/critical-inline.min.css';
        ?>
    </style>
    <link rel="stylesheet" href="assets/css/critical-link.min.css?v1" type="text/css" />
    <link rel="stylesheet" media="none" onload="this.media = 'all'" href="assets/css/main.min.css?v1" type="text/css" />

I initially only wanted two files (critical and main), but having both of them loaded through <link> resulted in CLS. Moving just critical CSS to inline <style> fixed CLS issues, but fonts stopped loading. Hence I moved fonts to critical-link and renamed critical to critical-inline.

Works for me, but I’m not saying that’s the best practice!

Advertisement

Answer