Archived topic
Site fails on cumulative layout shift
8 replies · Started by Martin on January 5, 2021
Hello,
first of all I managed to built an extremely fast word press website switching over to GeneratePress in late 2020. I am a very happy customer.
Website never shows any cumulative shift errors to me no matter which online tool I use. However the field data from google shows that its there for other users.
Typically it has to do with the logo or sticky navigation bar. I do use both.
I also use a .svg logo and I am not sure how to add a preset size to that logo image to avoid any Layout Shifts.I could need some support in that regard
This is the website I am talking about: https://thweis.com
best regards
MT
Hi there,
the sticky navigation logo is being lazyloaded... not sure if this would be an issue considering its off screen.
Most lazy loader plugins have an option exclude images from lazy loading using a CSS class. To exclude all logo images you can use this class: is-logo-image
Thank you David,
will give it a go!
You're welcome
Hi,
I still have issues with this. Google pagespeed insights also points out that I have an image without height and width information. I do get bad cumulative field results.
Any idea how to add seize and height to a .svg logo?
This is the code where I need to add width and height information.
This is what I found online: https://css-tricks.com/scale-svg/#the-height-and-width-attributes
But I don't know what to do.
Hi there,
i ran a page speed insights test and your site has 0 CLS
The warning Google provides is just a potential warning - as the Logo is restrained by the height of the menu items it won't cause any shifting unless the logo is lazy loaded.
If you're running GPP 2.0 - and you remove your logo publish the changes and then re-add your logo it should automatically update the width/height attributes.
But to be clear it is not causing any CLS issues.
Thank you for the reply! Problem solved!
Glad to hear that
