i have a Google core web vitals CLS issue - Lighthouse says "A late network request adjusted the page layout"

Question

On https://www.insurancepanda.com , we are experiencing a CLS issue which causes a Cumulative Layout Shift of 0.129

Investigating in Lighthouse, it seems the error is this "A late network request adjusted the page layout"

This is the part of the page that is causing the layout shift:

<section class="elementor-section elementor-top-section elementor-element elementor-element-25b974f9 top-form-section elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="25b974f9" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
                        <div class="elementor-container elementor-column-gap-default">
                    <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5f7db390 content" data-id="5f7db390" data-element_type="column">
            <div class="elementor-widget-wrap elementor-element-populated">
                                <div class="elementor-section elementor-inner-section elementor-element elementor-element-6405ccf4 elementor-inner-line content elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="6405ccf4" data-element_type="section">
                        <div class="elementor-container elementor-column-gap-default">
                    <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-7cce47de slider-right-side" data-id="7cce47de" data-element_type="column">
            <div class="elementor-widget-wrap">
                                    </div>
        </div>
                <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-2f25a915 slider-left-side sidebar-contact-form" data-id="2f25a915" data-element_type="column">
            <div class="elementor-widget-wrap elementor-element-populated">
                                <div class="elementor-element elementor-element-c707b50 elementor-widget elementor-widget-html" data-id="c707b50" data-element_type="widget" data-widget_type="html.default">
                <div class="elementor-widget-container">
            <h5>Get <span>FREE</span>
<br>
Insurance Quotes
</h5>       </div>
                </div>
                <div class="elementor-element elementor-element-7624467e sub_headline elementor-widget elementor-widget-text-editor" data-id="7624467e" data-element_type="widget" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                            <p>Fast auto insurance quote comparison.<br>See rates instantly.</p>                        </div>
                </div>
                <div class="elementor-element elementor-element-a6bdc76 elementor-widget elementor-widget-html" data-id="a6bdc76" data-element_type="widget" data-widget_type="html.default">
                <div class="elementor-widget-container">
            <div class="enter-zip-code">
<form action="https://www.insurancepanda.com/form.php" method="get">
    <input type="text" name="zip" class="zip-code-input" value="" placeholder="Zip Code " size="40">
    <button type="submit" class="zip-code-submit">
    <span></span>Get Free Quote
    </button>
    <div class="clear"></div>
</form>
</div>      </div>
                </div>
                    </div>
        </div>
                            </div>
        </div>
                    </div>
        </div>
                            </div>
        </section>

Seems like CSS/java elements like this are taking too long to load: https://www.insurancepanda.com/wp-content/plugins/link-whisper-premium/js/frontend.min.js?ver=1694723046 https://www.insurancepanda.com/wp-content/plugins/elementor-pro/assets/css/frontend.min.css?ver=3.8.0

I've tried to update Elementor wordpress plugin. I thought the new version might fix this issue, but it's not helping.

Answer 1

You can see in the screenshots in PSI that the page layout shifts (particularly in the bottom of the page where the text rearranges itself):

This looks to be due to the use of the web font and it takes a while to load because it is discovered late.

This is one of the downsides of using Google Fonts as it needs to download the Google Fonts CSS, then use that to realise the font is needed, then download the font.

Your options are:

1. Self host the font and preload it.
2. Stop using this font.
3. Try and use CSS to make content the right size whether the default or webfont is used.
4. Live with this short delay (it's small and your real user CLS is even smaller).