Archived topic
CLS Issue only on Desktop pages
29 replies · Started by Evenit on May 12, 2022
Hi I have a CLS issue on my desktop pages (mobile works good). You can see here an example: https://www.viaggi-usa.it/fuso-orario-stati-uniti/
According to Google Page Speed, I have CLS issues on:
<div class="page-hero grid-container grid-parent">
<div class="site grid-container container hfeed grid-parent">
<div class="grid-container">
<div class="main-nav">
<div class="widget-area sidebar is-right-sidebar grid-25 tablet-grid-25 grid-parent">and many issues in the footer for Unsupported CSS propriety...
may you help me to solve them?
Thanks
Hi there,
the main issue is related to the font loading, if you slow the network down and load the page you can see the fonts are being swapped. This is due to the WP Rockets optimizations enabling display=swap on the fonts:
https://docs.wp-rocket.me/article/1312-optimize-google-fonts
I would suggest you a. disable that so the font display=auto and b. load the fonts locally to improve loading times:
Hi David thanks, I did as you suggest but it seems a CLS issue persists yet...
So it is better :)
The issue is related to other WP Rocket settings. If you test this URL:
https://www.viaggi-usa.it/fuso-orario-stati-uniti/?nowprocket
That will test the page without WP Rocket.
Hi David, testing without WP Rocket the CLS is still an issue for Desktop. It doesn't seem like the score has changed that much ...
Hmmm.... the fonts are being loaded very late.
So:
1. remove the @font-face CSS from Additional CSS.
2. Create a new Hook Element in Appearance Elements.
2.1 Add the @font-face CSS inside <style> tags to the Hook Text area.
eg.
<style>
Your @font-face CSS
</style>3. Set the Hook to wp_head
4. Set the Priority to 5
5. Set the Display Rules to Entire Site.
This should make sure the fonts are loaded sooner.
Hi David, I did it but CLS metrics for Desktop don't change...
Hmmm.. can you change the hooks priority to 0
I did it, CLS is still 0,198
Jeez... lol what i cannot understand is why the page is loading before the font. We don't have display=swap so it should wait for the font then display the page. Weird.
In the @font-face, you have all the versions including eot, ttf etc. Can you change it to just load the .woff and .woff2 fonts ?
Hi David, even in this case things don't change, I put back the eot, ttf files since they don't seem to affect the CLS
Are there any server side optimizations ? As i cannot see whats causing the site to load initially with a different set of font styles.
I have a server with a Varnish Cache and Cloudflare APO, the site is a wordpress multisite. I have no idea if those things affect font loading...
Hmmm... is it possible to flush the varnish cache ? And refresh the CDN ?
I have flushed all the caches, as far as I see the issue in the page persists
