Speed is better in 2.0 (lazy load first image)

Resolved Laura530
(@laura530)

1 year, 1 month ago

Version 2.0.11 is faster on my website. I think this is because it loads the first image, which is not necessary in my case, because it is far below the viewport. Is there any way to lazyload this image?

Regards

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Weston Ruter
(@westonruter)

1 year, 1 month ago

Please share the URL for an example AMP page on your site so we can see the what’s going on.

Thread Starter Laura530
(@laura530)

1 year, 1 month ago

https://loanah.com/cortes-de-pelo/?amp

In 2.0: First Contentful Paint 1,1 s /// Largest Contentful Paint 2,2 s

In 2.1: First Contentful Paint 2,0 s /// Largest Contentful Paint 2,5 s
Plugin Author Weston Ruter
(@westonruter)

1 year, 1 month ago
I see that you have hidden the figure.post-thumbnail element with CSS. Is there a reason why you’re not just removing the element entirely from that template? If you’re adding it for the purpose sharing on social media, this should be unnecessary because the image is captured in the head metadata already:
```
<meta name="twitter:image" content="https://loanah.com/wp-content/uploads/2019/11/00_guetzli-8.jpg">
<meta property="og:image" content="https://loanah.com/wp-content/uploads/2019/11/00_guetzli-8.jpg">
```
Interestingly I’m not seeing this same featured image in the Schema.org metadata. This seems to be something that “The SEO Framework por Sybre Waaijer” is missing.
- This reply was modified 1 year, 1 month ago by Weston Ruter.
Plugin Author Weston Ruter
(@westonruter)

1 year, 1 month ago
Alternatively, what you can do is ensure that loading=lazy is added to that featured image on the singular template on AMP pages. When a lazy-loaded image is hidden, it does not get loaded. The following PHP plugin code should do the trick:
```
function loanah_add_loading_lazy( $attr ) {
	$attr['loading'] = 'lazy';
	return $attr;
}

add_action( 'wp', static function () {
	if ( ! is_singular() || ! function_exists( 'amp_is_request' ) || ! amp_is_request() ) {
		return;
	}

	add_action( 'begin_fetch_post_thumbnail_html', static function () {
		add_filter( 'wp_get_attachment_image_attributes', 'loanah_add_loading_lazy' );
	} );

	add_action( 'end_fetch_post_thumbnail_html', static function () {
		remove_filter( 'wp_get_attachment_image_attributes', 'loanah_add_loading_lazy' );
	} );
} );
```
Thread Starter Laura530
(@laura530)

1 year, 1 month ago
Thank you very much, you are very very kind. I removed the feature image from the template, the social media tags (are not necessary), and added the lazy-loading php plugin above (just in case). The numbers on lighthouse improved remarkably. Now I’ll wait a few days for the real numbers from the search console.
- This reply was modified 1 year, 1 month ago by Laura530.
- This reply was modified 1 year, 1 month ago by Laura530.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Speed is better in 2.0 (lazy load first image)’ is closed to new replies.

Views