CLS Issues

  • With the new Google Core Web Vitals, Cumulative Layout Shift is a problem with this plugin.

    According the web.dev, “all of these values (except optional) can cause a re-layout in one of the above ways.”

    So it looks like font-display: optional may help these scores? If this slows down page loads speed some maybe there should be a toggle for “Improve Cumulative Layout Shift (CLS)”

    Images without dimensions and ads without dimensions can also be a problem for CLS.

    My LCP scores are a little low too and not sure if that’s anything you can fix on your end.

    https://web.dev/optimize-cls/
    https://web.dev/vitals/

    Thank you,
    Kyle

Viewing 1 replies (of 1 total)
  • Plugin Author Albert Peschar

    (@kiboit)

    Hi @kw11,

    If I understand correctly font-display: optional will cause the font not to display if it isn’t loaded very quickly. As that would break most people’s expectations, I’m not convinced it’s a good idea to add this to the plugin.

    But as web fonts are only one of the mentioned possible causes of relayouting, I’m not sure that this is actually what is triggering the issue on your site.

    Usually it is due to certain parts of the page being rendered by JavaScript. And because PhastPress delays JavaScript execution so that the page can be rendered as quickly as possible, that can cause layout shift. This should still not lower your PageSpeed Insights score as compared to not using PhastPress, as the First Contentful Paint should be much earlier.

    You could try loading your page with throttling set to 2G or 3G in dev tools. Then you can see where the layout shift happens exactly. If you can make sure those parts are rendered correctly using only HTML and CSS and don’t depend on scripts, that will help. If there is really nothing shifting except for the web fonts, try removing the web fonts temporarily and seeing if that changes the result.

    –Albert

Viewing 1 replies (of 1 total)
  • The topic ‘CLS Issues’ is closed to new replies.