- This topic has 13 replies, 3 voices, and was last updated 5 years, 1 month ago by
.
-
Posts
-
Hi,
On the site, I add the avatar image, author name, and date using the snippet below. I think this is how most people do this with generate press.
If I use the full-size 150-pixel image I get no CLS issue.
So I tried to set the size equal to 40px in the PHP but that did not solve the problem.
add_filter( ‘generate_post_author’, ‘__return_false’ );
add_filter( ‘generate_post_date_output’, function( $date ) {
printf(
‘<span class=”meta-gravatar”>%s</span>’,
get_avatar( get_the_author_meta( ‘ID’ ), $size = 40 )
);echo ‘<span class=”meta-data”>’;
printf( ‘ <span class=”byline”>%1$s</span>’,
sprintf( ‘<span class=”author vcard” itemtype=”http://schema.org/Person” itemscope=”itemscope” itemprop=”author”><span class=”author-name” itemprop=”name”>%3$s</span></span>’,
esc_url( get_author_posts_url( get_the_author_meta( ‘ID’ ) ) ),
esc_attr( sprintf( __( ‘View all posts by %s’, ‘generatepress’ ), get_the_author() ) ),
esc_html( get_the_author() )
)
);
echo $date;
echo ‘</span>’;
} );This is the CSS that I have. Some if it is commented out as I was trouble shooting the issue. Before I change the size commenting out between /* start here*/ and /* end here */ remove the CLS issue but the formatting was not complete.
.single-post .entry-meta .meta-data {
flex-direction: column;
margin-left: 0.75em;
}
/* start here*/
.single-post .entry-meta .meta-gravatar img{
/*height: 40x;
width: 40px;*/
border-radius: 50%;
}
.single-post .entry-meta, .single-post .entry-meta .meta-data {
display: flex;
}
/* end here */
.single .byline {
font-weight: 700;
}
.single-post .entry-meta .meta-data .posted-on {
font-size: 14px;
}
/* margin above image */
/*
.page-content, .entry-content, .entry-summary {
margin: .7em 0 0 0;
}*/
/* padding above gravitar */
.single-post .entry-meta {
margin-top: 15px;
line-height: 1.2em;
font-size: 16px;
}Doing a page speed test on google page speed insights it shows a small CLS shift (around .021) in the lab data. I think in the field data it might be causing a bigger issue though so I would like to solve bring the CLS to zero.
Any ideas would be greatly appreciated.
Customer Support
Hi there,
Have you sorted this out?
I’ve checked your site’s performance on GTMetrix, Google PSI, Google Lighthouse (unthrottled) and Webpagetest.org and the all give 99-100% perfomance scores.
While there was an instance of CLS flag (Google PSI), it wasn’t something related to entry meta as it was a content. It doesn’t always show up on repeat tests.
Let us know.
Elvin,
Thanks for the response. I have not sorted this out. The site does not pass google core web vitals due to a small CLS issue. Even though the score is good, 100 that does not matter if it does not pass google core vitals. In this case, it does not pass for desktop.
The lab data has been showing a small issue but the field data has been getting worse over a 20 data period. I think the small CLS shown (.021) in the lab data ends up being over the .1s threshold requirement around (.16) seconds.
I did make a few other changes to try and fix this but want to try and remove the small CSL caused by the top gravatar image, author name, and date published.
Thank you,
Cody
I think it is caused by A3 Lazy load. I tried excluding the class, meta-gravatar, but excluding classes never seems to help CLS issues for some reason.
In the A3 lazy load help, someone commented.
I am seeing similar issues. A3 lazy load adds its placeholder gif into src which has an aspect ratio of 1:1. The browser thinks the actual img has an aspect ratio of 1:1 and scales the entire frame.If I use wp-rocket to lazy load it does solve the CLS issue but when doing a google live test only half the images loaded so I am trying to stick with a3 lazy load.
I guess this might not be a generate press issue as it is a lazy load problem. However, it is just the top avatar and only a problem on desktop. Any further things to try and solve this would be appreciated.
Customer Support
Hi there,
i just checked your site using the chrome developers tools using a Slow 3G network and there was no CLS related to the Avatar – but there was huge shift coming from the first image in the content, the lazyloader placeholder was much taller then required…. which is odd as the
<img>has width and height attributes…. might be worth asking A3 Lazy Load about that.David,
Thanks for the timely response. That is interesting!
What is strange is that even if I remove the top image, google insights still shows the CLS issues relative to the paragraph.
Sometimes the cls issue is shown as the date, and other times it is the text below the image. It looks like there are two separate CLS issues.
I have been trying to solve this problem for over a month. The sites have good CLS lab data but if the sites CLS field data does not improve soon the sites will not pass core vitals for the May google update.
Everything was fine until January when something changed somewhere. I see lots of generate press sites with the same issue. We have the issue on 5 websites, some with a CLS over .3s. Non generate press sites speeds are just terrible so hard to compare. ha ah
The tricky part is google speed lab data looks good. But over the past 20 days the field data keeps getting worse.
I was going to remove the top gravatar, author, and date and just add it to the content directly. This will show zero CLS but as you pointed out might not solve the problem if it is actually with all the lazy-loaded content or images using a3 lazy load.
I will contact A3 lazy load about this. I doubt their support will get back to me though. Not everyone has responsive support like generate press. 🙂
Do you know of sites that do not have this issue that lazy load images in generate press? Any other thoughts on what to look at?
Thank you!
David,
I removed the top image so you can see.
I now get Avoid Large layout shifts- 2 elements found.
First paragraoh text.
<p>
0.001
First Header
<h4>My other thought was this could be a font issue, but not sure about that.
Thank you!
David,
I do see the large shift you were talking about when using slow 3G.
Maybe the image should not be in a paragraph?
Another thought I had was the threshold for lazyload could somehow be changing the image size.
I set this to zero though and the image area still changes before loading the image. Whatever is causing this probably is the big issue that has been causing the problems.
Thank you.
David,
It almost looks like the area initially loaded is the image width rather than the height.
The img has width and height attributes. Maybe the height needs to be defined before the width?
Maybe the lazy load functions just pull the first value rather than the height value.
Thank you.
David,
Actually going back to what was said on the a3 lazy loader forum.
I am seeing similar issues. A3 lazy load adds its placeholder gif into src which has an aspect ratio of 1:1. The browser thinks the actual img has an aspect ratio of 1:1 and scales the entire frame.
This means that if the width is defined first then that is the space that will be saved for the image. This seems like a bad way to code but maybe A3 assumed height would always be defined first.
If generate press changed the image to height then width this may solve the issue. Is there anyway we could test this?
I would just change to wprocket for lazyload but in google search console live test only half the images load.
Thank you!
GP isn’t responsible for the img html in the content. Its a core WP thing.
I haven’t seen the issue with A3 Lazy Loader – but i haven’t seen the spinny gif loader being used … is that an option in the plugin ? If so maybe worth disabling that…. if not may be best to find an alternative plugin.I think that is just how A3 Lazy Loader works, with the gif placeholder. I put in a request for help from A3 Lazy Loader. If I get good news I will let you know. It seems like there is little support from that end though. Otherwise, yeah I will have to try alternatives or just not lazy load on sites will short pages.
Thanks for your time and for helping me get to the heart of the issue!
David,
I did know this but forgot. WordPress pushed lazy loading images by default a few months back. This is likey what created the conflict and rise of CLS issues. There are still a few small CLS things I am looking at fixing, but removing a3 lazyload for images is a good idea as it is done by default.
Thank you!
You’re welcome
- You must be logged in to reply to this topic.
