Cumulative Layout Shift (CLS) problem

Hi there,

Try setting the font-display to auto instead of swap at customizer > typogrpahy.

Hi there,

On initial load, the site is displaying with the browser’s system font, which is then replaced by your custom fonts once they are loaded. This can cause layout shifts.

To fix this, ensure that the font-display property is set to auto rather than swap.

Hi there,

in yoru Customizer > Additional CSS; you have the following CSS:

/* Local fonts */
            /* poppins-300 - latin */
            @font-face {
                font-display: auto;
                /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
                font-family: 'Poppins';
                font-style: normal;
                font-weight: 300;
                src: url('/wp-content/themes/redress_compliance/fonts/poppins-v20-latin-300.woff2') format('woff2');
                /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            }

            /* poppins-300italic - latin */
            @font-face {
                font-display: auto;
                /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
                font-family: 'Poppins';
                font-style: italic;
                font-weight: 300;
                src: url('/wp-content/themes/redress_compliance/fonts/poppins-v20-latin-300italic.woff2') format('woff2');
                /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            }

            /* poppins-regular - latin */
            @font-face {
                font-display: auto;
                /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
                font-family: 'Poppins';
                font-style: normal;
                font-weight: 400;
                src: url('/wp-content/themes/redress_compliance/fonts/poppins-v20-latin-regular.woff2') format('woff2');
                /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            }

            /* poppins-italic - latin */
            @font-face {
                font-display: auto;
                /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
                font-family: 'Poppins';
                font-style: italic;
                font-weight: 400;
                src: url('/wp-content/themes/redress_compliance/fonts/poppins-v20-latin-italic.woff2') format('woff2');
                /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            }

            /* poppins-500 - latin */
            @font-face {
                font-display: auto;
                /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
                font-family: 'Poppins';
                font-style: normal;
                font-weight: 500;
                src: url('/wp-content/themes/redress_compliance/fonts/poppins-v20-latin-500.woff2') format('woff2');
                /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            }

            /* poppins-500italic - latin */
            @font-face {
                font-display: auto;
                /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
                font-family: 'Poppins';
                font-style: italic;
                font-weight: 500;
                src: url('/wp-content/themes/redress_compliance/fonts/poppins-v20-latin-500italic.woff2') format('woff2');
                /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            }

            /* poppins-600 - latin */
            @font-face {
                font-display: auto;
                /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
                font-family: 'Poppins';
                font-style: normal;
                font-weight: 600;
                src: url('/wp-content/themes/redress_compliance/fonts/poppins-v20-latin-600.woff2') format('woff2');
                /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            }

            /* poppins-600italic - latin */
            @font-face {
                font-display: auto;
                /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
                font-family: 'Poppins';
                font-style: italic;
                font-weight: 600;
                src: url('/wp-content/themes/redress_compliance/fonts/poppins-v20-latin-600italic.woff2') format('woff2');
                /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            }

            /* poppins-700 - latin */
            @font-face {
                font-display: auto;
                /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
                font-family: 'Poppins';
                font-style: normal;
                font-weight: 700;
                src: url('/wp-content/themes/redress_compliance/fonts/poppins-v20-latin-700.woff2') format('woff2');
                /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            }

            /* poppins-700italic - latin */
            @font-face {
                font-display: auto;
                /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
                font-family: 'Poppins';
                font-style: italic;
                font-weight: 700;
                src: url('/wp-content/themes/redress_compliance/fonts/poppins-v20-latin-700italic.woff2') format('woff2');
                /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            }

I assume that is the CSS from when you manually added the fonts locally.
Can you delete that CSS as its no longer required as you’re loading the fonts using the GP Font Library

Now edit your child theme styles.css.
In there you also have the @font-face CSS. Delete that too.
Then clear any caches on your site.

Now your site will only load your fonts once instead of 3 times.

In the child theme folder there is a stylesheet called fonts.css – you need to remove that.

Can you clear the WP Rocket caches and refresh the unused CSS as its still loading the old CSS

I still see the old CSS loading in the WP Rocket Used CSS.
So that needs clearing.

And you need to edit your child themes functions.php and remove the enqueue for the fonts.css file