Archived topic
Fix Cumulative Layout Shift in Header
3 replies · Started by Markus on January 24, 2021
Hello,
I saw in the Core Web Vitals of my Search Console, that after my switch to Generatepress almost every blog post on mobile and desktop are flagged as bad CLS.
For example on this page: https://journal.markusthoma.com/5-tipps-gute-fotos-machen/
I tried to figure out what to do with the help of PageSpeed Insights:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fjournal.markusthoma.com%2F5-tipps-gute-fotos-machen%2F&hl=de
In the layout shift recommendations it says, it has found 5 critical elements:
"GUTE FOTOS MACHEN – 5 TIPPS DIE ICH GERNE FRÜHER GEKANNT HÄTTE
<h1>
0,004
Am 16. Juli 2016 in Porträt-Tricks veröffentlicht.
16. Juli 2016
<time class="entry-date published" datetime="2016-07-16T13:17:12+02:00" itemprop="datePublished">
0
MT Journal Fotografie Blog
0
Am 16. Juli 2016 in Porträt-Tricks veröffentlicht.
All of those are elements, that are placed in my custom element header of the blog posts. I think it must be the Title of the blog post, date, etc.
I already tried to exclude the site logo from lazy loading. But the 5 errors still appear.
So my question: What can I do with my header to fix the bad CLS score? Maybe add some fixed heights for all those elements in the header to prevent CLS?
With kind regards,
Markus
Hi there,
the issue is related to the late loading of your Fonts.
If you right click inspect your site, and go to the network tab, clear your browser cache and reload the page you will see what is being loaded and when.
You're font requests are one of the last requests to be made...
And they come after some very large cached CSS and JS files.
You should check your cache settings to see why it is deferring the font loading - its generally related to options that 'Eliminate Render Blocking'
Hi David,
thank you very much for your quick response! I just updated my website by adding a header hook for preloading my two main woff2 font files. I will have to inspect, if it's gone by now - but I think it looks good!
Thank you very much! After I tested it out maybe I will come back again.
With kind regards,
Markus
Looks good to me !
