-
Posts
-
Hi
No matter what I do I cannot get PageSpeed Insights to prevent a Largest Contentful Paint error on images above the fold in grids.
I have WP Rocket installed and all lazy loading is switched off but activated through WP Rocket. I get that Lazy Loading will essentially cause an LCP issue as it is delaying the image from loading.
However, I have added an exception to the WP Rocket optioons to exclude a test image – theoretically telling the Enfold Theme to NOT lazy load and serve the image normally. This is not the case as PSI still reports an error.
Any ideas?
It appears on all Portfolio pages see this example: https://swarezart.com/modern-art-paintings-for-sale/vanishing-point/ this URL does have the first image excluded from lazy loading but it still apears to lazy load and that must be why I have the error yes?PSI reports back this code for the element:
<img decoding="async" fetchpriority="high" class="wp-image-61006 avia-img-lazy-loading-not-61006 avia_image entered lazyload…" src="https://cdn.swarezart.com/wp-content/uploads/2024/03/black-and-gold-and-bl…" alt="black and gold and blue art hanging on a wall" height="684" width="703" itemprop="thumbnailUrl" data-lazy-srcset="https://cdn.swarezart.com/wp-content/uploads/2024/03/black-and-gold-and-bl…" data-lazy-sizes="(max-width: 703px) 100vw, 703px" data-lazy-src="https://cdn.swarezart.com/wp-content/uploads/2024/03/black-and-gold-and-bl…" data-ll-status="loaded" …>
The test can be run live here: https://pagespeed.web.dev/analysis/https-swarezart-com-modern-art-paintings-for-sale-vanishing-point/loisuour9h?form_factor=mobileAny help wpuld be greatky appreciated.
Thanks in advance
EdHey Swarez,
Thank you for the inquiry
Based on the Pagespeed Insight tool, you can improve LCP by preloading the associated element, which, in this instance, is an image. To test this, please try adding the following code into your functions.php file:
function ava_preload_image_in_wp_head() { $image_url = 'https://cdn.swarezart.com/wp-content/uploads/2024/03/black-and-gold-and-blue-art-hanging-on-a-wall-703x684.jpg'; $mime_type = 'image/jpeg'; $image_handle = 'blue-gold-art'; echo '<link rel="preload" href="' . esc_url($image_url) . '" as="image" type="' . esc_attr($mime_type) . '" id="' . esc_attr($image_handle) . '">'; } add_action('wp_head', 'ava_preload_image_in_wp_head');Best regards,
IsmaelHi Ismael
Thank you very much for responding.
I shall try this later. If it works then how do I roll that out for every image affected (currently over 250 on 250 individual pages)? I can’t put that code in every time I create a new portfolio item so is there a way to specify that the first image on any portfolio page needs to be pre-loaded?
Thank you for your time and energy
EdHi,
If the solution works, we’ll try to add an option that can preload specific images. Let us know of the result.
Best regards,
IsmaelHi Ismael
I have inserted the code and cleared, purged and flushed everything (WP Rocket, Cloudflare, KeyCDN and old theme JS and CSS) but unfortunately nothing has changed.
The code that PSI returns still looks exactly the same and the LCP error remains.
Kidn regards
EdHi,
Thank you for the update.
The performance score on mobile is now 95, and LCP is green (1.6s). The desktop performance is 100, with LCP less than 1 second. Please check the screenshots provided in the private field. Have you tried checking it on a different browser or device?
Best regards,
IsmaelHi Ismael
Do you want to show me the rest of the page then?
The one screenshot shows the SITE averages, not the page score. The other screenshot doesn’t show how the score is calculated. If you scroll down a little further you will see that LCP is always RED!! This is a key metric for Google and has a negative impact on every page it crawls.
Let me know what your test says.
Mine is attached to show you what I mean.
regards
EdHi,
Looks like I missed the LCP metric below the performance scores. Sorry about that. The LCP is still 3.1s as of our last check today, but the suggestion above did satisfy the “Preload Largest Contentful Paint image” and the “Largest Contentful Paint image was not lazily loaded” audits.
What happens when you set a cache policy for the site assets?
If you’re using WP Rocket, please check out the following link: https://wp-rocket.me/google-core-web-vitals-wordpress/serve-static-assets-with-an-efficient-cache-policy/#section-3. Go to the “How to Serve Assets With an Efficient Cache Policy with a Plugin” section.
Best regards,
IsmaelHi,
Based on the value of class attribute, the image is still lazy loaded.
<img decoding="async" fetchpriority="high" class="...classnames lazyloaded" src="https://cdn.reducted.com/wp-content/uploads/reducted/black-and-gold-and-blue-art-hanging-on-a-wall-703x684.jpg" >Did you configure the Image element’s Advanced > Performance > Lazy Loading Of Images settings? There might be another plugin that is still applying lazy loading to the image.
Another suggestion is to run the image through a compression tool before uploading it. When we used the following tool, we were able to reduce the size of the gold-and-blue-art image by about 35%.
Best regards,
IsmaelHi Ismael
Thank you for your replies.
I read the WP Rocket page son cahce control and checked the htaccess file against the recommendation from Wp Rocket and it matches – meaning that the plugin has lready written these cahe control settings. So that matches what they recommend. For example, image’jpeg and image’webp have “access plus 4 months” as a value, as per WP Rocket’s recommendations.
I do see however, that when I run a Pingdom test the image in this example only returns a cache lifespan of 7 days. I can’t find any setting within Cloudflare to change this. Why would the information not be read from the htaccess file?Back to the image though – I use RIOT compression and this has reduced the image to around 75kb. Further compression may help a little but 20KB may still result in an LCP issue. I think the problem is that we can’t override the LAZY LOAD. As far as I can see it is only Wp Rocket that is enabling it. There is nothing on Asset Clean Up Pro , nothing enabled in Advanced (images) and nothing enabled in the Enfold Theme. I even have a sitewide rule for WordPress to disable by defualt in the functions.php file.
So do you know what we can do next?
Thanks EdHi,
I think the problem is that we can’t override the LAZY LOAD.
Normally, you can tell that WordPress lazy-loads an image by checking for the presence of the “loading” attribute with the value set to “lazy” in the image markup. However, in your installation, the “loading” attribute doesn’t exist. Instead, there are multiple attributes related to lazy loading, indicating that lazy loading is controlled by either a plugin or a custom script. These additional attributes include “data-lazy-sizes”, “data-lazy-src”, and “data-ll-status”. Looks like these attributes are added by the WP Rocket plugin.
<img decoding="async" fetchpriority="high" class=".. lazyloaded" data-lazy-sizes="(max-width: 703px) 100vw, 703px" data-lazy-src=black-and-gold-and-blue-art-hanging-on-a-wall.jpg" data-ll-status="loaded">Please check the following link: https://docs.wp-rocket.me/article/1141-lazyload-for-images#is-it-working
Best regards,
IsmaelHi,
Have you tried excluding both the original and CDN version of the images from lazy loading? Please check the private field.
Best regards,
IsmaelHi Ismael
Thanks for your sugegstions.
I reached out to WP Rocket and they said I should exclude the CDN image in their exlcusion box. This does work but I will have to do it 250 times! Unless you have another solution??This process has also uncovered some potential theme issues which could be improved. I will open these on new threads
Thanks again
Ed
- You must be logged in to reply to this topic.