# Lazy loading in blog post content

**URL:** <https://community.hubspot.com/t/lazy-loading-in-blog-post-content/22060>\
**Category:** CMS Development\
**Tags:** content\
**Created:** [June 24, 2020, 5:51pm UTC](https://community.hubspot.com/t/lazy-loading-in-blog-post-content/22060 "2020-06-24T17:51:36Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Xenor](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/xenor/32/99949_2.png) [@Xenor](https://community.hubspot.com/u/Xenor)\
**Post date:** [June 24, 2020, 5:51pm UTC](https://community.hubspot.com/t/lazy-loading-in-blog-post-content/22060/1 "2020-06-24T17:51:36Z")

</div>

Hello!  
I’m creating a blog, in which posts are based around high-quality pictures. Currently, I’ve implemented native lazy loading within all img tags. For example, below is I display a featured post image:

`<img loading="lazy" class="post-body__featured-image" src="{{ content.featured_image }}" alt="{{ content.featured_image_alt_text }}" />`

I’m using Google’s PageSpeed to measure my site’s performance and currently image lazy loading is still number one suggestion to speed up page loading because there’s plenty of images inside a blog post. Is there a way to add lazy loading to those images as well?  
Example blog post: [Tajlandia Największe Turystyczne Atrakcje W Tajlandii - Twoje przygody na całym świecie](https://adventure.travelduck.pl/tajlandia-najwieksze-turystyczne-atrakcje-w-tajlandii)  
PageSpeed for example page: [https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fadventure.travelduck.pl%2Ftajlandia-najwieksze-turystyczne-atrakcje-w-tajlandii](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fadventure.travelduck.pl%2Ftajlandia-najwieksze-turystyczne-atrakcje-w-tajlandii)

---

<div class="post-metadata">

**Author:** ![Xenor](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/xenor/32/99949_2.png) [@Xenor](https://community.hubspot.com/u/Xenor)\
**Post date:** [June 25, 2020, 9:40am UTC](https://community.hubspot.com/t/lazy-loading-in-blog-post-content/22060/2 "2020-06-25T09:40:43Z")

</div>

Okay, I’ve figured it out.

`{{ content.post_body|replace('<img', '<img loading="lazy"') }}`

---

<div class="post-metadata">

**Author:** ![Jenny](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jenny/32/24_2.png) [@Jenny](https://community.hubspot.com/u/Jenny)\
**Post date:** [June 29, 2020, 9:13pm UTC](https://community.hubspot.com/t/lazy-loading-in-blog-post-content/22060/3 "2020-06-29T21:13:40Z")

</div>

Thank you for sharing your solution @Xenor!
