Blog, Website & Page Publishing

donrua
Top Contributor

How do I make my blog Featured Image lazy load?

I set all of my blog images in the article to lazy load, but I don't know how to set that for the Featured Image, which is set in the Settings and doesn't have the same image options on that screen.

We have a 'related articles' module at the bottom of blog posts, and that's pulling in 3 featured images from 3 blog posts, none of them lazy loaded, and we're getting flagged by Core Web Vitals for it.

7 Replies 7
donrua
Top Contributor

How do I make my blog Featured Image lazy load?

Yes, we should all have a sharp focus on UX, but when tne company that determines who lives or dies on page one (Google), ALSO makes the tool and says to use it, the risk and downside of ignoring their advice seems imprudent. Bullet 5 in your performance guide recommends Lazy Loading. I'm just trying to determine how to do it when the image is used as Featured image, not baked into an img component in the editor.

0 Upvotes
LPitcher
HubSpot Employee
HubSpot Employee

How do I make my blog Featured Image lazy load?

An essential thing to remember about performance recommendations surfaced in tools like PageSpeed is that they do not always make sense. These tools typically use bots and automated measures to evaluate a site and assign a score or grade. With that in mind, tying oneself to a number or grade from a web grader tool may not always make sense, so take them with a grain of salt.

 

You should make decisions with the visitor's experience at the forefront, not a bot's experience.

 

Here are some typical ways you can reduce loading time. However, I would recommend you visiting the website and seeing how long it loads for you, most times it is not noticiable and if that is the case, I wouldn't recommend any changes. Here is a great post from one of our developers on this topic. We also have a performance guide here with recommendations.

Let me know if this helps. 🙂

Lily Pitcher | Senior Customer Support Specialist
0 Upvotes
RTeuch
Participant

How do I make my blog Featured Image lazy load?

I'm wondering about the same thing! 

0 Upvotes
donrua
Top Contributor

How do I make my blog Featured Image lazy load?

Google Pagespeed Insights suggests it for every blog page I have, since we have an automated "related post" feature that pulls in 3 featured images for those at the bottom of each blog. So by solving that one issue, I improve the page across 100's of blog posts, per Pagespeed guidance. At least that's my understanding from what Google is saying.

donrua_0-1641413475440.png

 

WOliver
Member

How do I make my blog Featured Image lazy load?

Hi, why you want lazy load? 

 

Regards

0 Upvotes
webdew
Guide | Diamond Partner
Guide | Diamond Partner

How do I make my blog Featured Image lazy load?

Hi @donrua ,

 Here's an article I found. U can see if this could be of any help.
https://developers.hubspot.com/docs/cms/guides/speed/lazy-loading

Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

donrua
Top Contributor

How do I make my blog Featured Image lazy load?

Thanks, webdew. I'm not a developer, so I wouldn't even know if that would work for our situation or not, but I appreciate the file. When I look at the hubl for the blog template, it says I cannot modify it, and must use the drag and drop template maker, but that doesn't give me access to .json etc ,to modify code. And even then, I'm not entirely sure how the changes would affect a module that is pulling in 3 other blog posts and their feature images.