Dear team,
I am using a Newspaper theme, and we encounter a LCP issue with our website. When we check for solution, it said：
“Prioritize Image Loading: Since the LCP element is an image, you should prioritize its loading. You can do this by setting the fetchpriority attribute to high for the image”
May I ask how to set the fetchpriority attribute to high for the image?
Thank you.
Best regards
Hi,
This cna be done using a cache or an optimise plugin. For example, the WP Rocket plugin can do this.
Thank you!
Dear Calin,
Thank you. We are using Jetpack Boost as the optimise plugin, and wordpress suggest us not to use other cache plugin to avoid any potential conflict.
May I ask if there is anyway other ways to set the fetchpriority attribute to high for the image？
Best regards
Hi,
Unfortunately, the theme and Jetpack Boost don’t give UI-level control over fetch priority yet. In this case, I will recommend an Image Prioritizer plugin, you can try this one https://wordpress.org/plugins/image-prioritizer/
Thank you!
Hi Calin,
we have the same problem, only for mobile. We use LightSpeedCache. How we can solve the problem?
the site is http://www.sport24h.it.
Thank
Hi Antonio,
If you’re using LightSpeed Cache (LSCWP) in WordPress, you can ensure this is applied by:
Going to LiteSpeed Cache → Page Optimization → Media Settings.
Checking whether Lazy Load Images is on. If so, exclude your image/hero/LCP image from lazy loading.
Also, you can try the mentioned plugin to see if you get better results!
Calin thank you for your reply.
Lazy load is already excluded for that image, so this is not the source of the issue.
The real problem is that the LCP element in Newspaper is generated as a background-image inside a <span> (.entry-thumb) instead of a proper tag.
Because of this:
Google PageSpeed Insights reports that the image is “not immediately discoverable in the HTML”, and it keeps recommending that fetchpriority=”high” should be applied.
This recommendation cannot be satisfied as long as the LCP element is a CSS background and not a native . Preloading helps partially, but PageSpeed still flags the issue, because the image is not directly represented in the DOM as an
.
Could you please provide a solution or option within Newspaper to render the LCP image as an (with fetchpriority=”high”) instead of only as a background image? This seems to be the only way to properly fix the LCP problem reported by PageSpeed.
Best regards,
Antonio
Hi Antonio, in this situation, what can be done is to replace the elements/blocks that use the image as a background image with a block that set the image using the img element, for this you can create your own module and use the flex builder https://forum.tagdiv.com/modules-builder-newspaper-theme/
I hope this will help you!
Antonio Ungaro, kindly share your litespeed cache settings you are using on your website
