Google Page Speed Insights Optimization

[DEsteva]

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! 😁.

[Jnix284 · Accepted solution]

@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!

[Jnix284]

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

[DEsteva]

Hey Jen! Thanks, sure the link that i'm checking is the next one: https://driv.in/

[Jnix284 · Accepted solution]

@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!

[DEsteva]

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

[Jnix284 · Accepted solution]

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 and this guide has more about speed optimization - both are from the HubSpot Developer Docs.

[DEsteva]

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

[Jnix284]

You're welcome @DEsteva, happy it worked!