I’ve been doing a lot of optimising to one of my websites, so far with great success.
The issue I have though is with images.
I have a Collection List that responds down from four columns on desktop, to two columns on tablet, to one column on mobile. The image dimensions on mobile are larger than desktop, so naturally I make my listing images to this size.
Of course it means on desktop larger images than needed are being loaded, but my thinking is that’s better than loading in separate images for desktop, mobile and tablet.
GTMetrix doesn’t like this however and says my listing box images are too big:
Has anyone got any ideas/ways around this that won’t require additional images?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
@radicalrooster could you share your read-only link? https://university.webflow.com/article/sharing-your-sites-read-only-link. This way we could take a look and see what you’re doing . I would also suggest using google lighthouse to test your website.
Sure, here it is - https://preview.webflow.com/preview/luxury-train-tickets?utm_medium=preview_link&utm_source=designer&utm_content=luxury-train-tickets&preview=f9342647edfd8e4db93389692827ab7c&pageId=5dca86246beadf3b4be6fedb&mode=preview
I use Lighthouse as well - It seems to be fussier but it does offer more info. Lighthouse simply tells me to ‘use next gen formats’ which I’m told isn’t the best thing and to load images to scale (the same as GT Metrix).
ah, the next gen images. There’s a topic here on the forum if that’s something you would like to explore. It’s a custom code solution so it’s more cumbersome. I don’t bother with them for now. I had a look at your images and they seem to be sized properly for the largest size you’re displaying them at on your website . Are you running them through a compressor like tinypng? That shaves off some weight as well for each image. Looking at the weight of some of the images you’ve uploaded, they all seem to be reasonable though!
Thanks for taking a look, Sarah!
Yeah I didn’t want to risk it either with next gen formats!
I use a Mac-based compressor called ‘ImageOptim’ and after exporting from Photoshop I wizz them all through there.
I guess it’s not a huge problem but it seems like I won’t be able to get that ‘A’ rating on GTMetrix!
While I have your attention (and you clearly know what you’re doing!) do you have any experience with lazy loading or triggering scripts?
@radicalrooster you’re welcome! Ah, good. I always make sure to check since that’s a step that people tend to skip. Removing your unused css classes is a good one to keep an eye on as well. In fact, I checked one of my main sites on webflow and saw that I had 14 classes that could be cleaned.
I’m not super familiar with triggering/lazy loading scripts. I did see your other post on the lazy load topic so I’m sure someone will come to your aid there.