LCP issue with Flex Block featured image rendered as CSS background

Posted in: Newspaper
Post count: 17

Hello,

I’m using Newspaper 12.7.7 with the latest tagDiv Composer.

My homepage scores around 60 on Google PageSpeed Insights (mobile).

Lighthouse identifies the homepage LCP element as:

<span class=”entry-thumb td-thumb-css”
style=”background-image:url(…)”>

The image is rendered as a CSS background instead of an element.

Lighthouse reports:

fetchpriority=high should be applied
render-blocking CSS, especially:
td_legacy_main.css
style.css
tds-front.css

I already tested:

latest Newspaper and tagDiv Composer versions
Jetpack Image Accelerator enabled
cache enabled
manually adding a preload for the LCP image

My questions are:

Is there any supported setting or Flex Block that renders the featured image as a real instead of a CSS background?
Is there an official hook/filter to customize the thumbnail markup?
Is there a recommended way to improve LCP for Newspaper homepages?
Can td_legacy_main.css or other legacy CSS resources be safely disabled on Newspaper 12.7.7?

Website:
https://actugeekgaming.com
PageSpeed test :
https://pagespeed.web.dev/analysis/https-actugeekgaming-com/hodhlqczsz?form_factor=mobile

Thank you!

Post count: 20685

Hi,

There isn’t unfortunately. All flex blocks display the image as a background, that’s how they were built. We did have plans some time ago to add an option to choose how the image should be displayed, either img or background, but it was complicated and the plans were dropped.

You could create your own module -> https://forum.tagdiv.com/modules-builder-newspaper-theme/ This loads the image as img, not background. Then you could use this module in a flex block builder at the top of the page, which is where the LCP is most likely happening. You could give it a try.

Thank you!

Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.