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

Marketing & Content Hub Blog, Website & Page Publishing
1

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?

2

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

3

Hi @thepankajkumar ,

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

4

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

5

Thank you Anton,

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

6

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