#Improve CLS of Section Element

1 messages · Page 1 of 1 (latest)

native mica
#

Here is the code for the section element:

    <section id="about-section">
        <div id="about-left">
            <h1 id="about-header">...,</h1>
            <p class="about-text">... <b>...</b> ... <a class="link" href="https://www.ivytech.edu/about-ivy-tech/">Ivy Tech</a> ... </i>. ... <b>...</b> ...</i>.</p>

            <p class="about-text">... <b>...</b> ...</i>. ... <i>...</i> 😅.</p>

            <p class="about-text"><i>...</i>, ... <a class="link" href="https://scratch.mit.edu/">Scratch</a> ... <a class="link" href="https://github.com/SkriptLang/Skript">SkriptLang</a> ... <i>...</i>.</p>
        </div>
        <div id="about-right">
            <Image src={Me_Suited} id="about-image" alt="..." width={500} height={500}/>
        </div>
    </section>

CSS

#about-section {
    max-height: fit-content;
    position: relative;
    min-width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

    #about-header { font-size: clamp(1.3rem, 2.8vw, 3rem); }

    /* Description of myself */
    #about-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        width: 50%;
        min-height: 100%;
    }

        .about-text {
            font-size: clamp(1rem, 1.5vw, 1.4rem);
            line-height: 2rem;
            text-indent: 2rem;
        }

    /* Image of myself */
    #about-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100%;
    }

        #about-image {
            width: clamp(250px, 35vw, 500px);
            height: clamp(250px, 35vw, 500px);
            max-height: 500px;
            border-radius: var(--main-border-radius);
            animation: image-change 60s ease-in infinite;
        }    

@media (max-width: 1000px) {
    #about-section {
        padding-top: 25px;
        gap: 25px;
        flex-direction: column-reverse;
        justify-content: space-evenly;
    }

        #about-left { min-width: 100%; }
            #about-header { text-align: center; }
            #about-image { border-radius: var(--secondary-border-radius); }
}

The scores came back as:

section#about-section : 0.205 (CLS Contribution)
i : 0.012 (CLS Contribution)

How can I remove this huge CLS contribution? Because of this 0.205 CLS Contribution the Performance score is 89.

somber wharfBOT
#

Hi @native mica. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Cumulative Layout Shift (CLS) is a metric that measures visual stability on a webpage. It's one of the Core Web Vitals that Google uses to assess the overall quality of user experiences on the web. To improve your CLS score, you should aim to reduce unexpected layout shifts to near-zero.

From the information provided in the extracts, it's not entirely clear what's causing the high CLS score for your section#about-section element. However, common causes of layout shifts include images without dimensions, dynamically injected content, web fonts causing FOIT/FOUT, and actions waiting for a network response before updating DOM.

Here are some general suggestions to improve your CLS score:

  1. Add width and height attributes to your images and videos: This allows the browser to allocate the correct amount of space on the page while the image is loading.

  2. Avoid inserting new content above existing content: Unless it's in response to a user interaction, this can cause layout shifts.

  3. Use CSS transform animations for animations: Animations that trigger layout changes can cause layout shifts.

  4. Preload key resources: You can use <link rel="preload"> to load key resources, such as fonts, earlier.

  5. Keep CSS universal and simple: Overly complex or micro-targeted CSS can lead to unexpected layout shifts.

Remember, improving CLS is about minimizing unexpected layout shifts. So, any change that achieves this goal could potentially improve your CLS score.

Unfortunately, without more specific information about your website's structure and behavior, it's hard to provide more targeted advice. If you're still having trouble, consider seeking help from the Astro community or a web performance expert.

#

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: