Issue after updating the plugin

Hello @zotezo

1) Regarding Webfonts
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading check this guide
Also, preload critical fonts, check this guide for more information

2) I’m assuming the poor server response time because it’s the dev server? 2,190 ms is very poor, Improving the server response time should resolve the Third-party code block issue. here is an issue related to that

Additionally, please check your sites CSP so the https://amp.dev/page-experience/
can access your dev site, the Page experience tool can help you fix other common issues which are critical for your site’s performance.

@zotezo As we haven’t received a response, I’ll mark this as resolved. Feel free to open a new support topic if you continue to encounter issues, or reopen this topic and we’d be happy to assist. Thank you!

Hi,
I have made it live. But after making it live it is showing an error still showing some error in AMP page experience
<amp-img src=”https://www.zotezo.com/in/wp-content/uploads/sites/2/2020/05/final-logo-167×56.png&#8221; layout=”intrinsic” width=”167″ height=”56″ …>
<amp-img src=”https://www.zotezo.com/in/wp-content/plugins/sitepress-multilingual-cms/res/flags/hi.png&#8221; layout=”intrinsic” width=”18″ height=”12″ …>
How to fix the issue?
Thanks

Hello @zotezo

Can you please send us the URL on which you seen the error, did the Page experience tool provide you any suggestions regarding those issues?

Hi,
https://www.zotezo.com/in/medicines/calpol-650mg-tablet/?amp
Showing high LCP score by adding the data-hero attribute
Calpol 650mg Tablet

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.zotezo.com%2Fin%2Fmedicines%2Fcalpol-650mg-tablet%2F%3Famp

Also how to add the data-hero attribute for site logo which is conming from settings? <amp-img src=”https://www.zotezo.com/in/wp-content/uploads/sites/2/2020/05/final-logo-167×56.png&#8221; layout=”intrinsic” width=”167″ height=”56″ …>

Thanks

Hello @zotezo

Can you please try and preload the hero image,
You can use this plugin to force preload hero image.

You can read more about LCP in this article

Can you please check how your site logo is being added, if it has the_custom_logo function then you can use the
get_custom_logo_image_attributes filter to add attributes to it.

I case it’s added any other way, adding amp-specific header file header-amp.php and using that on AMP endpoint is recommended.

eg:

if ( function_exists( 'amp_is_request' ) && amp_is_request() ) {
    get_header( 'amp' );
} else {
   get_header();
}

The site logo was added via theme settings in admin.
Now how to fix this hero images issue in main logo?

Hello @zotezo

I am assuming you are using Astra, Please try and see if the below code snippet helps you in making your site logo a hero image.

Please add code snippet in themes functions.php or in a custom plugin

/**
 * Add hero attribute to logo.
 *
 * @param array $attributes logo attributes.
 * @return array
 */
function amp_custom_logo_attribute( $attributes ) {
	if ( function_exists( 'amp_is_request' ) && amp_is_request() ) {
		$attributes['data-hero'] = '';
	}

	return $attributes;
}
add_filter( 'get_custom_logo_image_attributes', 'amp_custom_logo_attribute' );

Please add code snippet in themes functions.php or in a custom plugin

Thanks, it is working perfectly.
How to get of from this
<amp-img src=”https://www.zotezo.com/in/wp-content/uploads/sites/2/2020/12/oximeter-banner.jpg&#8221; layout=”intrinsic” width=”800″ height=”400″ …>
for this page https://www.zotezo.com/in/top/best-oximeter-in-india/?amp

Also Images
<amp-img src=”https://www.zotezo.com/in/wp-content/plugins/sitepress-multilingual-cms/res/flags/hi.png&#8221; layout=”intrinsic” width=”18″ height=”12″ …>
for this pages.
https://www.zotezo.com/in/medicines/calpol-650mg-tablet/?amp

How to fix the high LCP issue in AMP pages for featured images?

Hello @zotezo

are you able to try this mini plugin? which I mentioned earlier, it should help you preload the hero images reducing LCP, please check below article on how you can reduce LCP of various assets

https://web.dev/optimize-lcp/
https://web.dev/fast/#i18n.paths.fast.topics.optimize_your_images

Hi,
When I try to install it is showing this error-
Installing a plugin from uploaded file: 6110fbc4bef0c4b8c021a112012f7e9c-fbdd8005145dab7b30e0af4306f34008ab79782a.zip
Unpacking the package…

Installing the plugin…

The package could not be installed. No valid plugins were found.

Plugin installation failed.
What is the issue?

Sorry I was managed to downloads it. Now how to test…for these pages https://dev1.zotezo.com/in/medicines/calpol-650mg-tablet/?amp
https://dev1.zotezo.com/in/reviews/dr-trust-professional-series-finger-tip-pulse-oximeter-with-audio-visual-a larm-and-respiratory-rate/?amp
It is not allowed me to test zmp page experience in and also not able to see any improvement of LCP score after adding the above plugins for hero images.
What is the other solution to reduce LCP score issue…

• This reply was modified 3 years, 6 months ago by zo.

Hello @zotezo

that’s strange the zip file should be 50abd71d9becb5a34f01136052effef5-f98d8e00e4b06b4bb6b60dfed9b54b8ae560f9a7.zip

Please try and re-download it from link given above.

you can also try and download it from this repo which should be simpler.

Hello @zotezo

The plugin preloads hero images which should improve your LCP score.

refrence for LCP : https://web.dev/optimize-lcp/#preload-important-resources

You dev site is unreachable from search console possibly blocked with robots.txt
taking down such restrictions may help you able to test site on Page experiance tool

Hi,
Okay I have added the plugin in live site for hero images in live site but the pages
https://www.zotezo.com/in/medicines/calpol-650mg-tablet/?amp showing error in <amp-img src=”https://www.zotezo.com/in/wp-content/plugins/sitepress-multilingual-cms/res/flags/hi.png&#8221; layout=”intrinsic” width=”18″ height=”12″ …>

https://www.zotezo.com/in/top/best-oximeter-in-india/?amp
<amp-img src=”https://www.zotezo.com/in/wp-content/uploads/sites/2/2020/12/oximeter-banner.jpg&#8221; layout=”intrinsic” width=”800″ height=”400″ …>

https://www.zotezo.com/in/reviews/dr-trust-professional-series-finger-tip-pulse-oximeter-with-audio-visual-alarm-and-respiratory-rate/?amp