how to add lazy load to Blog RSS feed Hubspot blog post?

[thepankajkumar]

We have been getting SEO Performance Issue (Load Time), In the blog section, we have right hand side, Blog RSS Feed where we are trying to show Top 5 Popular post. Those RSS feed has a image with title. And I want to apply lazy load to it. Is it possible to apply lazy load to RSS Feed? If yes, then How?

[Anton · Accepted solution]

Hi @thepankajkumar, 

to get it right - when talking about "RSS" you're talking about the blog listing page, right?

If so - it's possible. 

There are several places you should look for the top 5 posts. 

1. Blog listing template

2. If the "Top 5" is a custom module then you should look for the custom module

The code you're looking for looks something like this(a very basic example)

{% for recent_post in recent_posts %}
<img src="{{recent_post.featured_image.src}}" alt="{{recent_post.featured_image.alt}}">
<h3>{{recent_post.name}}</h3>
{% endfor %}

Add

loading="lazy"

 to the image-tag so the whole code should look something like this

{% for recent_post in recent_posts %}
<img src="{{recent_post.featured_image.src}}" alt="{{recent_post.featured_image.alt}}" loading="lazy" >
<h3>{{recent_post.name}}</h3>
{% endfor %}

If you'd like to go the JavaScriptp route - here's a guide for lazy loading images. But this can have a negative impact on speed.

hope this helps

best, 

Anton

[thepankajkumar]

Thank you Anton,

I would also like to know how to add this code in the predefined RSS Listing module [Blog Post Template]. 

[Anton]

You're welcome @thepankajkumar, 

since the Blog post Content is a single "rich-text" you can add this by

1. JavaScript/jQuery (most likely the easiest way to go)

2. set it individually on each image in the content (select image -> click on "pen"-icon -> advanced)

3. Adding 'loading="lazy"' to each image via Source-code edit (I don't recommend this)

4. Coding a custom blog post module with several options (very advanced)

best, 

Anton

[Teun]

Hi @thepankajkumar ,

I suppose you do control the HTML? Here is a great guide on how to implement lazyloading.

[TitiCuisset]

Hi @thepankajkumar 

Thank you for reaching out.

I want to tag some of our experts here - @Teun @Anton do you have any thought for @thepankajkumar on this? 

Thank you!

Best

Tiphaine