topic Re: Google Page Speed Insights Optimization in CMS Development

Google Page Speed Insights Optimization

DEsteva — Wed, 13 Dec 2023 15:21:03 GMT

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

Re: Google Page Speed Insights Optimization

Jnix284 — Wed, 13 Dec 2023 17:00:07 GMT

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

Re: Google Page Speed Insights Optimization

DEsteva — Wed, 13 Dec 2023 18:18:37 GMT

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

Re: Google Page Speed Insights Optimization

Jnix284 — Thu, 14 Dec 2023 17:35:48 GMT

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

Re: Google Page Speed Insights Optimization

DEsteva — Thu, 14 Dec 2023 17:45:54 GMT

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

Re: Google Page Speed Insights Optimization

Jnix284 — Thu, 14 Dec 2023 17:53:57 GMT

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.

Re: Google Page Speed Insights Optimization

DEsteva — Wed, 10 Jan 2024 15:50:44 GMT

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

Re: Google Page Speed Insights Optimization

Jnix284 — Wed, 10 Jan 2024 16:00:42 GMT

You're welcome @DEsteva, happy it worked!