# Google Page Speed Insights Optimization

**URL:** <https://community.hubspot.com/t/google-page-speed-insights-optimization/95989>\
**Category:** CMS Development\
**Tags:** hubdb, javascript\
**Created:** [December 13, 2023, 3:21pm UTC](https://community.hubspot.com/t/google-page-speed-insights-optimization/95989 "2023-12-13T15:21:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![DEsteva](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/desteva/32/2232_2.png) [@DEsteva](https://community.hubspot.com/u/DEsteva)\
**Post date:** [December 13, 2023, 3:21pm UTC](https://community.hubspot.com/t/google-page-speed-insights-optimization/95989/1 "2023-12-13T15:21:03Z")

</div>

Hello!  
I’m going throught an optimization following the recomendation from Google Speed Insights. Anyways, two of the recomendation are:  
01. “Postpone loading of images that do not appear on the screen”.

02. “Use an appropriate size for images”

About the first point i have added the Lazy loading for the images that are used on the modules, but it doesn’t working for the google page speed.  
The second point… I’m trying to adapt the size of the images. Any one have some info about how i can make it work?  
Thanks! 😁.

 ![Screenshot 2023-12-13 at 12.19.46.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/8/c8516e0580010c0fe9c5a4ac1577719726b738b5.png)

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [December 13, 2023, 5:00pm UTC](https://community.hubspot.com/t/google-page-speed-insights-optimization/95989/2 "2023-12-13T17:00:07Z")

</div>

Hi @DEsteva happy to help, can you share a link to the page that you’re testing?

---

<div class="post-metadata">

**Author:** ![DEsteva](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/desteva/32/2232_2.png) [@DEsteva](https://community.hubspot.com/u/DEsteva)\
**Post date:** [December 13, 2023, 6:18pm UTC](https://community.hubspot.com/t/google-page-speed-insights-optimization/95989/3 "2023-12-13T18:18:37Z")

</div>

Hey Jen! Thanks, sure the link that i’m checking is the next one: [https://driv.in/](https://driv.in/)

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [December 14, 2023, 5:35pm UTC](https://community.hubspot.com/t/google-page-speed-insights-optimization/95989/4 "2023-12-14T17:35:48Z")

</div>

@DEsteva thanks, that’s really helpful (it’s a little easier to review the results in English for me).

Here’s an example of what it means to resize the images:

In your testimonial slider, you have multiple images for the people who wrote reviews.

They are being rendered on the website at 60 x 60 px.

The image is set to 295 x 294 px - which is much larger than needed so the browser has to resize the image.

To account for Retina displays on Mac, I typically size images to be 1.5 times the size they’ll be used.

So for a 60 x 60 px image, you could resize the file to be 90 x 90 px and that should address the issue from PageSpeed Insights - and also reduce the file size to speed up load times further.

This is true for the logos in the slider and testimonials - they are all much smaller in the modules than the original size of the image.

I hope this helps!

---

<div class="post-metadata">

**Author:** ![DEsteva](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/desteva/32/2232_2.png) [@DEsteva](https://community.hubspot.com/u/DEsteva)\
**Post date:** [December 14, 2023, 5:45pm UTC](https://community.hubspot.com/t/google-page-speed-insights-optimization/95989/5 "2023-12-14T17:45:54Z")

</div>

Hello Jen! Thanks! I’ll try that out!

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [December 14, 2023, 5:53pm UTC](https://community.hubspot.com/t/google-page-speed-insights-optimization/95989/6 "2023-12-14T17:53:57Z")

</div>

You’re welcome @DEsteva, happy to help!

In addition to lazy loading, you might want to look at deferring any assets that aren’t in the browser viewport on page load.

This [dev doc has more on lazy loading](https://developers.hubspot.com/docs/cms/lazy-loading)and this [guide has more about speed optimization](https://developers.hubspot.com/docs/cms/guides/speed) - both are from the HubSpot Developer Docs.

---

<div class="post-metadata">

**Author:** ![DEsteva](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/desteva/32/2232_2.png) [@DEsteva](https://community.hubspot.com/u/DEsteva)\
**Post date:** [January 10, 2024, 3:50pm UTC](https://community.hubspot.com/t/google-page-speed-insights-optimization/95989/7 "2024-01-10T15:50:44Z")

</div>

Hello! Just to let you know that it works! Thanks Jenn!

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [January 10, 2024, 4:00pm UTC](https://community.hubspot.com/t/google-page-speed-insights-optimization/95989/8 "2024-01-10T16:00:42Z")

</div>

You’re welcome @DEsteva, happy it worked!

---

<div class="post-metadata">

**Author:** ![IMakkar](https://avatars.discourse-cdn.com/v4/letter/i/b38774/32.png) [@IMakkar](https://community.hubspot.com/u/IMakkar)\
**Post date:** [October 30, 2026, 5:42am UTC](https://community.hubspot.com/t/google-page-speed-insights-optimization/95989/9 "2026-10-30T05:42:58Z")

</div>

Hi, @DEsteva

For the lazy-loading recommendation, it is worth checking the actual image output from your modules. Adding lazy loading in the module settings doesn’t always mean every image is being loaded as expected. Some images may be loaded through CSS backgrounds or JavaScript instead. You can inspect the page source or browser DevTools to check whether below-the-fold images have the loading lazy attribute.

One important thing: keep lazy loading disabled for the main hero image and other images visible immediately when the page opens, as delaying those can increase LCP.

For image sizing, open the Properly size images section in PageSpeed Insights. It will show which images are larger than their displayed dimensions. Try serving appropriately sized images rather than using one large image everywhere. WebP can also help reduce file sizes without a noticeable loss in quality.

I’d start with the specific image URLs flagged by PageSpeed and check their actual display size against the downloaded image dimensions. This will help you narrow down which changes are needed without affecting the rest of the page.

Note: I wrote this myself and just used AI to tidy up the wording.
