Archived topic
CLS - Grid Container Issue
1 reply · Started by Vijay on July 15, 2021
Hi,
This is causing a CLS load issue on mobile:
<div id="page" class="site grid-container container hfeed"> - 0.109s
and
<div class="gb-shape gb-shape-1"> - 0.030s
Can you please take a look?
Steps I have taken:
Disabled critical css in wp rocket
removed logo and background image from lazy load
purged all cache in cloudflare and wprocket multiple times
Hi there,
the issue is the font-display: swap; property in your local fonts @font-face CSS.
You can see on initial load the browser font loads and then the local font. The difference in font sizing causes it to reflow. The first element impacted is the shape divider below the main title, followed by the main page container (#page).
You can remove the font-display swap - and let google complain about Ensuring Fonts are visible on load.
Or you can just ignore it as the browser will only report CLS on first visit, after which it will have cached the font, so accumulative CLS will be very minimal in the Google Field Data. ( same goes with the ensuring fonts are visible on load ).
Other things to do is to optimize the font loading, by reducing the number of fonts being used and removing unused variants:
https://docs.generatepress.com/article/google-font-variants/
