CLS Issue only on Desktop pages

Is it possible to disable the varnish cache ?

I have excluded Varnish cache for that url and then flushed the cache... no improvements yet...

I am really lost on this one, as the site is still loading a fallback font first, which it shouldn't...

In your @font-face, its worth removing the EOT,TTF etc. and just keep the .woff and .woff2 to improve performance.
And just before that CSS add this:

body, button, input, select, textarea {
    font-family: Cabin;
    font-size: 17px;
}

This should ensure that ONLY that font is loaded to begin with.

I did it, could you check on that url if I did right?

Can you clear the WP Rocket Cache ?

I have cleared wp rocket cache and cloudflare cache too for the url https://www.viaggi-usa.it/fuso-orario-arizona-utah/

OK
in the Customizer > Typography field where you added Cabin.
Change it to: Cabin, sans-serif

And likewise in the CSS added to the hook:

body, button, input, select, textarea {
    font-family: Cabin, sans-serif;
    font-size: 17px;
}

What i am hoping for is we can find out why there is a serif font being displayed first - see here:

https://www.screencast.com/t/Yikvo9wGcATm

Here i am testing the URL with WP Rocket disabled.
I have set the network speed to a slow 256kb so we can see the page load.
And the responsive screen size has been set to 1350px which is the size Google uses in its Desktop page speed test.

As you can see, on initial load the page is displayed with a serif font, and then the Cabin font gets loaded.

Ok David, I did it. This changed the fonts

Sorry i was meant to say, then under the Customizer typography settings where you set the Font for example on the Body, you will need to reselect the Cabin, sans-serif font.

Ok David now the Cabin font is back, anyway the issue seems to be still

So we make a small step forward - you can see here its loading a sans-serif font whilst it waits for the Cabin to load:

https://www.screencast.com/t/Go5XdlrXAUg2

Annoyingly i still cannot see what is on your site that is allowing the fallback to be displayed though.
I am not sure if something on the CDN is still loading first some WP Rocket optimizations or its another server optimization somewhere.

As most of the CLS seems to be related to that shift in the navigation, the only thing i can suggest is to reduce the amount of space the navigation menu is occupying by either removing a menu item or reducing its font size to around 13px. Then it should not jump on load.

Hi David thank you very much. I have removed an item from the menu and it solved the CLS issue in the desktop. Do you have a similar workaround also for mobile CLS ?
Thanks

Thats great to hear, just a shame we could not pin down what was going on with that font switching.

The mobile ( and the desktop ) are being affect mainly by WP Rocket settings now.

If i compare move with WP Rocket the CLS is: 0.118 and without i am seeing CLS: 0.054

This is going to be related to how its optimizing the CSS, could you ask their support to take look ? As they would be better suited to know which setting is most affecting it

Hi David, ok thank you very much

You're welcome - let us know how you get on!