Anyone using next-gen image formats as suggested by Google Page Speed Insights?

CMS > SEO
1

I really need to get a site loading much faster. I’ve always skipped the Google Page Speed Insights suggestion for using next-gen formats because I thought that they weren’t widely supported.

Does anyone have experience with this?
Or any other tips in our Treepl world that make sites load much faster.

Thanks!
Shannon

2

Does anyone know if .webp images are supported by the Treepl server? I’m getting an error message just trying to display the image with the full path in the browser URL.

3

Hi @shannonlynd.
Yeah, like you I feel support is still a bit patchy for webp so you still need to maintain the regular image formats as fallbacks.
https://caniuse.com/#feat=webp

And yes, I don’t think the Treepl server is configured for webp support either as a test webp file tries to load as a text/plain file type. Might need to be a backlog request…
image

I’ve been experimenting with the imageProcessor for image optimisation, with mixed results so far. So maybe that’s worth exploring as well.
https://docs.treepl.co/documentation_group/extras/image_processor

4

I looked into webp earlier this year and decided against it because there wasn’t enough support and I don’t have any clients where the effort of having fallback jpg is worth the penitential increase in page load times.

5

@shannonlynd Just came across this for accessing advance compression options. May be of assistance. Apparently it’s google developed. https://squoosh.app/
Obviously can’t run the server side web app, but the tool might be useful.

6

My .webp images now work, with a fallback to .jpg.

The Treepl team configured this specific server to allow .webp images for me. THANKS!

7

I’ll look into this! Thanks!

We do quite a bit of work for an ad agency, and they are now scouring the Google Page Speed Insights and Lighthouse reports, so this will continue to be an issue for us.

Shannon

8

Are most doing this now?
I’m playing around with this https://css-tricks.com/using-webp-images/ got it to work but now I’m stuck
I need it to work in tag style and I did read you can give it an id with the style tag in the head.
Is this how it would be done or using liquid to detect browser?