Mayor CLS issues on mobile

Hi there,

on initial load I see the site is loading with the browser system font and then later when the fonts have loaded those fonts are updated, which can cause layout shift.

To fix that; you should ensure the FONT DISPLAY property is NOT set to swap and instead set it to auto

The font-display is set to fallback. It looks like you are using a plugin to upload local fonts, can you change that to auto in the plugin?
https://app.screencast.com/tyBgZYqpa3nQg

The stylesheet is called wp-fonts-local, it does not look like from GP.

And based on the CSS that the theme generated, it does not look like you are using local fonts.

Any chance you can provide an admin login for us to check the backend?

Let me know 🙂

Hi there,

It looks like the font-display issue has been resolved and is now set to auto.

There may be other areas to address in the PageSpeed report, such as reducing the initial server response time. I noticed that no cache plugin is currently used on your site; implementing and properly configuring a caching plugin could improve this.

Additionally, consider optimizing any third-party scripts loaded on your page. A plugin like Autoptimize can help with this.

Ok, so changing the font display property did work to fix the Layout Shift it was causing. You will see on page load that no longer do your fonts change after load.

Now if you look

I ran several pagespeed tests on the site
And got various CLS reports from as little as 0.005

https://app.screencast.com/Bkauc6Ks4oDqr
https://app.screencast.com/PyPSlZ9NpnovI

to: 0.047

https://app.screencast.com/7HxsZOYsfLEec

Regardless of the CLS score, the same issues are reported under the Avoid Large layout shifts – see here:

https://app.screencast.com/XYODiPHKoErDq

All of the resources on the page are flagged as: A late network request adjusted the page layout.
And this would be related to the Reduce initial server response time and Serve static assets with an efficient cache policy at the top of the report.

https://app.screencast.com/hWVUjrWdTkmYh

Recommendations

Speak to your host about Page Caching on the server. As this will help Reduce initial server response time.

Use a plugin like PerfMatters to eliminate and defer loading of non critical resources to help Eliminate render-blocking resources.

Not only will those help with settling the CLS issue they will help with the LCP times.

I don’t have any direct experience with W3 , only that what I see in this forum.
But like all cache/optimziation plugins; they require careful configuration or things will generally break.

If you use it simply for page caching you should see some improvement.
And then look at the CSS and Script optimizations it offers. But test each setting one at a time to see what difference it makes to the site. Making sure nothing got broken.

Also you have a YouTube video on your home page, and I don’t thunk W3 offers otpimziations for that. So try this:

https://en-gb.wordpress.org/plugins/wp-youtube-lyte/

As a note; the Page Speed Test will sometimes load pages that got cached on the network. So you may need to wait between changes and testing or run a few tests before you see the any changes

You’re welcome !

I see a couple of potential issues:

1. the font-display for the Inter and Cardo fonts is set to fallback – I would recommend changing that to auto

2. Under the “Avoid large layout shifts ” page speed report, it lists several “A late network request adjusted the page layout” , which Google is citing as the possible cause. The CSS it lists does fluctuate which kind feels like a server concern…. but , have a word with PerfMatters support as those files; if they are critical to rendering the page, should be include in the plugins used CSS.