Blog, Website & Page Publishing

thepankajkumar
Participant

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

SOLVE

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?

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE

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

 

Anton Bujanowski Signature

View solution in original post

5 Replies 5
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE

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

 

Anton Bujanowski Signature
thepankajkumar
Participant

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

SOLVE

Thank you Anton,

 

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

 

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE

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

Anton Bujanowski Signature
Teun
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE

Hi @thepankajkumar ,

 

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



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


TiphaineCuisset
Community Manager
Community Manager

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

SOLVE

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


Saviez vous que la Communauté est disponible en français?
Rejoignez les discussions francophones en changeant votre langue dans les paramètres !

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !