[Support request] Content Shifts or Adjust when Loads

[Theodore]

Alright. I use the WP Rocket option. I have enabled it.

[Fabien]

Hi,

I have the same issue regarding width / height attribute.

I’ve tried what @Elvin is suggesting (GP Premium 2.1.0 beta and removing > reuploading > re-applying the logo) but it doesn’t work. My logo is in SVG. Could it be the reason ?

[David]

Hi Fabien,

if you can raise a new topic with a link to your site i can take a look at the issue.

[David]

Hi Theodore,

retesting the site now shows the LCP time is within the recommended guidelines – ie. it passes the test.

If you want you can exclude the first featured image from lazy loading which may improve it even more.
To do that – add this PHP Snippet:

// Add first-featured-image ( or any class ) to featured image of latest post
function skip_lazy_class_first_featured_image($attr) {
  global $wp_query;
  if ( 0 == $wp_query->current_post ) {
      $attr['class'] .= ' skip-lazy';  
  }
  return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );

Then we can disable the WP native lazy loading as well by adding this PHP Snippet:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

[Theodore]

Thanks for this update. The content shift (such as shaking ) before the content is fully loaded. And that is why the is still happening. Please focus on the arrow in the image.

View post on imgur.com

[David]

You’re looking at the Origin Summary – that date is collected over 28 days. It won’t update immediately. If you check the Lab Data you will see this:

https://www.screencast.com/t/DtA1eXQD

Overtime ie. 28 days you will see the Origin Summary will improve.

[Theodore]

Thanks for this clarity. But the individual post cumulative layout shift causes errors on individual posts.

View post on imgur.com

[David]

Did you add the code i provided here:

https://generatepress.com/forums/topic/content-shifts-or-adjust-when-loads/page/2/#post-1961986

[Theodore]

I was thinking if I could define ads height under the fold could help to fix this. Please, how do I set the height of the ad under fold for auto ads?

[David]

When i tested your site the main CLS issue is the lazy loading featured on the Single Post. If you use the code i provided it will stop that image from lazy loading.

[Theodore]

I have added the code and disable WP Rocket lazy load but this increase the LCP to 4.9s

[David]

Leave the WP Rocket Lazy Load enabled.
The code i provided simply excludes the featured image from lazy loading.

[Theodore]

Ok. I have done that but the code probably affected the LCP… Now reading more than expected as it was before. I think if defining a fixed ADS SPACE for AUTO-ADS could help fix this. Is there a way to do this?

[David]

Its really difficult to diagnose an issue when things keep changing.
I ran two tests this morning on:

Front page
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fgadgetswright.com%2F

First Post
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fgadgetswright.com%2Fandroid-device-not-connecting-to-pc-over-usb-in-mtp-mode&tab=mobile

The total scores are lower, but all core web dev metrics ie. FCP, LCP, CLS are within accepted values.

The only CLS on Load is from the Cookie Consent notice – which i don’t recall being there before. You can see it in both filmstrips in the test above.

Your overall score had dropped, the major issue there is the loading of the Advert scripts, you may want to look at deferring ad script loading.

Regarding auto inserted advert sizes, i am not sure how you would do that, you would need to inspect an Auto Advert in the browser developers tools to see if there is CSS Class on the advert container, with that you could add some CSS to give it a min height.

[Author]

Posts