[Support request] SVG causing CLS movement

[Elvin]

Hi,

I’ve ran your site through GTMetrix and PageSpeed insight and I don’t see the CLS issue on the logo anymore.

GTMetrix – https://gtmetrix.com/reports/bookanalysis.com/T4cL9gSr/
Google PSI – https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fbookanalysis.com%2F&tab=desktop

The results will vary on different test but I’ve ran the test 5 times on each and there were no reports flagging the logo w/ CLS issue.

Can you verify on your end? Thank you.

[William]

Ah yes you are right – I’ve just enabled WP Rocket and EWWW image optimizer and the CLS increases again though, even with your code added from David etc.

[William]

I think the issue for CLS is this:

For a split second, the header appears without the image, which makes a small CLS appear when the image appears.

With this, is there a way to make the header the correct height for both desktop and mobile even when the logo has not loaded yet to prevent such CLS? I think that could fix the CLS issue.

[Elvin]

I don’t see the width and height attribute on your logo as shown here:
https://share.getcloudapp.com/v1u4Rgr8

Can you try purging/clearing cache?

Can you also disable EWWW image optimizer again w/ WP Rocket enabled to see if its the one removing the img attributes? Thank you.

[William]

Sure thing, EWWW disabled and WP Rocket purged – any luck?

[Elvin]

The img width & height shows back up as shown here:
https://share.getcloudapp.com/7KubdQWQ

To confirm, can you enable EWWW again? You can actually do the check yourself by right-clicking the page and clicking “Inspect”. https://share.getcloudapp.com/nOuDwR7r

Let us know. 😀

[William]

Yup you’re completely right – EWWW is causing the issue. I can’t see any option to stop them from tinkering with the image though.

[Elvin]

Yup you’re completely right – EWWW is causing the issue. I can’t see any option to stop them from tinkering with the image though.

I’m not exactly sure if they have a feature that excludes specific images from being affected by this.

Its best to check their documentation or ask their support about this.

[William]

I think you’re right on this.

Thank you sooo much for your guys help. I am actually in the process of thinking of going to a new theme for another site of mine, and skeptical due to their lack of clear and good support. It’s just another reason to get the site on GP!

[Elvin]

No problem. 😀

[William]

Hi there,
So I’ve spoken to the developer an fixed the issue! However, there is still a little CLS movement because when the image has not loaded, the header for desktop and mobile is a certain height, and then when the logo loads, the header increases in height to accommodate the logo.

Are you able to provide some CSS to prevent this shift from happening?

Many thanks,

Will

[Tom]

Try giving the logo a set height:

.site-header .header-image {
    height: 97px;
}

If you switch to our Flexbox structure, we add the logo dimensions directly to the HTML automatically: https://docs.generatepress.com/article/switching-from-floats-to-flexbox/

[William]

Hi there,
I’ve added the above CSS and that seems to fix the issue, thanks! On moving to flex, though, I notice my search bar is appearing in a different area than before for desktop and primary navigation buttons appear slightly different on mobile? How would these be pushed back to the right positions in flex if that is the better choice for the theme?

[William]

You can see the site on flex on a sandbox here compared to the live site here.

[Elvin]

The search bar moves slightly to the right because the “Books” and “Authors” buttons have less width on your staging site because they do not have icons.

Adding this buttons should replicate the same appearance you have with the non-flexbox live site.

As for the mobile view:

try adding this:

@media (max-width:768px){
/* Remove margin that pushes the buttons to the right on mobile */
.nav-float-right #site-navigation {
margin-left: unset;
}
/* adds 20px margin to replicate floats spacing */
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 20px;
}
/* adds 20px margin to replicate floats spacing */
.inside-header .header-widget {
margin-bottom: 20px;
}
}

[Author]

Posts