CSS background-image Can’t Be Lazy-Loaded, Hurting Performance

Posted in: Newspaper
Post count: 2

Hello support team,

I recently purchased the Newspaper theme and am using the “DEFAULT PRO” template because I was very impressed with its professional designs. I thought it would allow me to easily create a beautiful blog.
However, I discovered that most of the theme’s blocks (Flex Blocks, Big Grids, etc.) cannot be lazy-loaded, maybe because they use CSS background-image to display images ? I use lscache lazy load function and already tried others plugins.
This forces every single image in these blocks to load even if they are far below the fold. The lazy load option in the theme panel doesn’t improve performance metrics; it seems to be just a visual loading effect. Is that correct?
To keep a good performance score of 95+ on PageSpeed Insights, my only workaround has been to hide all images in these blocks on all single posts. While this fixes the speed issue, it completely defeats the purpose of buying a visually rich theme like Newspaper.
I already use others speed optimization like cache, css/javascript loading optimisation,etc. the only problem I can see is these theme’s blocks images on sidebar and footer not lazy-loaded.

My question is:
Is there a built-in setting or a recommended method to solve this? Or is this something that might be addressed in a future update?

This seems like a critical feature for any modern theme focused on performance.
My website : https://www.entrecampeurs.com/
Thank you for your help and guidance.

Post count: 35449

Hello,
The theme has a lazy load option, but this is only for blocks, as this option makes images load only if they appear within the screen (so not all images on the page are loaded if the user has not scrolled down to them). Problems often encountered are when this lazy load option is used by too many plugins and themes, it should only be used by a single plugin or theme. It is recommended from the plugin if there is an image optimization plugin and the one from the theme. For example, we recommend EWWW Image Optimizer https://wordpress.org/plugins/ewww-image-optimizer/
I hope this will help you!

Post count: 2

After clearing all the cache again and re-enabling the lazy load option in the theme panel, I used the network tool in Chrome DevTools to confirm that the images are correctly deferred until they are in the viewport. I was wrong, it works perfectly. I still haven’t optimized the LCP for other pages, but for now, single posts are hitting a performance score of 98 on mobile and 100 on desktop. I’m very happy with my purchase and thank you for your help.

Viewing 3 posts - 1 through 3 (of 3 total)
The forum ‘Newspaper’ is closed to new topics and replies.