Site logo

Archived topic

CLS Issues

3 replies · Started by Daniel on June 23, 2021

Viewing posts 1–4 of 4

The following element is causing a 0.71 Layout shift:
<div class="site grid-container container hfeed">

I tried disabling autoptimize but it did not change. Please advice.

Hi there,

the elements that PSI reports under CLS are the elements contributing to the metric, but aren't necessarily and most often are NOT the cause of the CLS.

I checked your site in Chrome Dev tools with a throttled 3G network so i can see whats happening.
I notice you have google fonts loading after the text is first displayed. This is causing a shift as there is a big difference in size/spacing between System font and Oswald.

Changing the font for the nav to a system font would stop this from happening. But to keep the google font we need it load faster. You cant try loading the font locally to help with that:

You can do this manually following this guide:

https://docs.generatepress.com/article/adding-local-fonts/

or use the OMGF plugin which will do it for you.

Then it would be a case of optimizing the site to improve the overall load times.

Thanks David!

You're welcome

This archived topic is closed to new replies.