I looked at the Performance panel in Chrome DevTools and it identified the Largest Contentful Paint is for the images.
OK, the issue here are the images. You’re not doing anything wrong, however. The delay is due to the AMP runtime needing to load before the images can be downloaded. One way to improve this would be to add link[rel=preload]
element for those each of those 4 images.
So the head
of the page could have included:
<link rel="preload" as="image" href="https://***.com/wp-content/uploads/2020/04/test-orientation--741x486.jpg">
<link rel="preload" as="image" href="https://***.com/wp-content/uploads/2020/04/Agriculture-Low-Tech-1-741x486.jpg">
<link rel="preload" as="image" href="https://***.com/wp-content/uploads/2020/04/Biblilowtech-741x486.jpg">
<link rel="preload" as="image" href="https://***.com/wp-content/uploads/2020/04/Transport-Logistique-Low-Tech-741x486.jpg">
If you can add these links via the wp_head
action yourself for that template, this will fix the issue.
It’s important to note that this will work because these images lack srcset
. Preloading images with srcset
is not yet supported in non-Chromium browsers, as noted on https://web.dev/preload-responsive-images/
We’re going to be addressing this issue in AMP itself so in the future you won’t need to do anything. You can follow progress on this here: https://github.com/ampproject/amphtml/issues/28672
-
This reply was modified 4 years, 8 months ago by
Yui. Reason: remove domain