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