Hi
I’m writing to you about the critical mobile performance issues on trikalatroll.gr. While the site’s SEO and Accessibility scores are excellent, the user experience is suffering due to extremely slow load times.
Here is the latest Google PageSpeed Insights report for your review: https://pagespeed.web.dev/analysis/https-trikalatroll-gr/laf5cx5p3t?form_factor=mobile
The most urgent problems that need immediate attention are:
Critical LCP (Largest Contentful Paint) Time: The mobile LCP is 10.6 seconds, which is far above the 2.5-second threshold.
LCP Element Implementation: The primary cause seems to be that the main article thumbnail (the LCP element) is being loaded as a CSS background-image on a <span> tag. This prevents the browser from discovering and prioritizing the image load. This must be changed to a standard tag with fetchpriority=”high” to fix the LCP delay.
Slow FCP (First Contentful Paint): The FCP is 5.9 seconds. Users are waiting almost 6 seconds to see any content on the page.
Render-Blocking Resources: There are significant JavaScript and CSS files blocking the initial render. These need to be properly deferred or inlined.
Image Optimization: Images are not being served in next-gen formats (like WebP) and are not properly sized for mobile, which significantly increases load time.
Could you please prioritize fixing these issues, especially the LCP background-image problem? These optimizations are essential for improving our user experience and maintaining our search rankings.
Thank you,
Hi,
About the image set with css background, what can be done is to create a module for the layout you want and replace the first block that is displayed when you enter the website. The module made with the module builder will use img tags for images and can be set in the flex block builder element.
Related to the Image Optimization, use a plugin like https://wordpress.org/plugins/ewww-image-optimizer/ and enable the webp format and from the theme, use this option – https://i.imgur.com/6qMAN1H.png
Also, if you are using the WP Rocket, you can check our guide with this plugin https://forum.tagdiv.com/wp-rocket-and-newspaper-theme-optimization-guide/
Thank you!
Hello again, I can only import modules at the Modules Templates area. So if I the solution you suggest is to import and modify a module with TagDiv, why not modify a block I already use?
The only thing I want to add is the code fetchpriority=”high” to the article image. Where does Flex Block 1 or in general block codes comes from? Maybe I can change the code there and make it work. I tried to find the code in the Newspaper theme but I can find it. Is this code in the plugin?
Regards
Giorgos
Hi Giorgos,
The thing is that the fetchpriority=”high” is used only on images set with the html tag img and the flex block have set the image using css as background therefore there is no way to set the fetchpriority=”high” on it, but the module made with module builder will display teh image in html tag so it will automatically attach the fetchpriority=”high”.
Thank you!
Hello Calin, OK I get it. But the main image we want to set fetchpriority=”high” is every time the image of the article we set as main.
I can make the module but is there a block or any other element I can use to display each time the main article with the image in HTML tag? Or do I have to use the code element to do that? I mean make the code with php/html and insert it in the module.
Thanks
Giorgos
Hi Giorgos,
If you install the tagDiv Standard Pack plugin, you’ll be able to use the simple blocks and Big Grids. These elements use images as img tags, and the fetchpriority=”high” attribute will be automatically applied. However, please note that this option provides only limited customization settings and may load many additional resources on your website.
The alternative option takes a bit more time to set up, as it requires creating custom modules. However, it gives you full flexibility to design the theme as you prefer. It also loads fewer resources and consumes less bandwidth than the tagDiv Standard Pack, while still automatically adding the fetchpriority=”high” attribute to images.
Thank you!
Hello Calin, we got the tagDiv Standard Pack plugin but my question about it’s elemements is about their source. For example I load the Module Featured Image, I cant see the source of this image.
We want the module to show the article we mark with a certain tag. These elements dont have a tag source available.
Also why dont you consider changing your code? I am sure we are not the only customers having issue with their LCP, if you load the image properly and not as background you can all your customer sites load faster.
Regards
Giorgos
Many sites and plugin builders, themes, and platforms use images as “backgrounds” – this is a normal practice, not unique to TagDiv.
Yes but it seems that Google does not like this practise.
Hi Giorgos, the module builder provides the possibility to display not only a category, you but also multiple categories, taxonomies, tags, and things that can not be done using other blocks from the theme – https://i.imgur.com/WtpQpu6.png https://i.imgur.com/6v0O27y.png
Changing the flex block mode of displaying teh image will break the block functionality, our developers already tried this. But the task is still open, so I think they are still searching for a solution.
Ok I think I got it, I am creating now the module etc
Thanks for your help guys!
Hi there,
I followed all the settings exactly as you suggested, but on the homepage I can still only reach around 59–60 points because of FCP and LCP. I’m not necessarily aiming for 100, but it would be great to get into the 70–80 range.
Site: https://ajovokezdete.hu/
I configured WP Rocket based on your guide:
https://forum.tagdiv.com/wp-rocket-and-newspaper-theme-optimization-guide/
I’m also using Bunny CDN, mostly WebP images, and I’ve disabled unnecessary plugin assets with Asset CleanUp Pro.
On the first (top) section of the homepage I’m using Modules Builder:
https://forum.tagdiv.com/modules-builder-newspaper-theme/
My questions:
In Flex Block Builder, is it recommended to enable “Cache block results”?
Under Filter → “Content preloading”, should this be set to “preload all” or “no preloading”?
And in general, what else would you recommend to improve the performance metrics and overall speed? I’ve tried quite a few things already without much success.
Thank you in advance for your help!
Hi,
Do you have the tagDiv Standard Pack plugin enabled? If you have it, please do a test, disable the plugin, clear the cache, create a new cache, and check teh results.
From WP Rocket try touse the Remove Unused CSS and see if there are better results
Thank you!
Thanks, I set both things up as you wrote (I disabled tagDiv Standard Pack with Asset CleanUp on the main page), but I only see a minimal improvement from FCP 6.8 to 6.4. It’s still at 60 points.
Hi,
What else can be done is to use a plugin that checks what is consuming the most resources on the website and tries to optimize that section. block cache it or even remove it or replace it with something that is consuming fewer resources.
Query Monitor to analyse WordPress performance problems
