Images and Page Speed

1

Apologies if this is a little vague, possibly convoluted and not necessarily MODX related.

I’m using PageSpeed Insights and generally able to achieve desktop performance of 95 and mobile 80.

I’m using MODX with Foundation.

I’m trying to achieve the fastest speeds possible but really going round in circles when it comes to handling responsive images - in short I’m looking for the most consistent way to do this where…

HTML should validate (including when image is also a link).
Cumulative Layout Shift is kept to a minimum.
Images are resized ‘on the fly’.
Images are served in webp format with fallback.

…in Foundation, I’ve tried interchange but the proves to be slower than using visibility classes.

Currently the best result I’m getting is by using a combination of Foundation visibility classes along with images resized using pthumb.

Can anybody give me examples of how you’re handling responsive images, especially ‘hero’ images?

Thank you

2

I have dropped frameworks like Bootstrap and Foundation for quite some time not for leaner and more modern frameworks like Tailwind and Astro.

Still I use this:

  • Image+
  • pThumb

I also use pThumb to generate more images for different resolutions and support webp.
Combine this with page caching and correct image sizes and it should be fine.

Hero chunk:

[[ImagePlus? 
&tvname=`hero_image`
&type=`tpl` 
&tpl=`hero_image_tpl`
]]

hero_image_tpl chunk:

<picture>
    <source type="image/webp" media="(max-width: 639px)" srcset="[[+source.src:pthumb=`[[+crop.options]]&q=80&w=640&zc=1&aoe=1&f=webP`]]"
    />
    <source type="image/jpg" media="(max-width: 639px)" srcset="[[+source.src:pthumb=`[[+crop.options]]&q=80&w=640&zc=1&aoe=1`]]"
    />
    <source type="image/webp" media="(max-width: 1279px)" srcset="[[+source.src:pthumb=`[[+crop.options]]&q=80&w=1280&zc=1&aoe=1&f=webP`]]"
    />
    <source type="image/jpg" media="(max-width: 1279px)" srcset="[[+source.src:pthumb=`[[+crop.options]]&q=80&w=1280&zc=1&aoe=1`]]"
    />
    <source type="image/webp" media="(min-width: 1280px)" srcset="[[+source.src:pthumb=`[[+crop.options]]&q=80&w=1600&zc=1&aoe=1&f=webP`]]"
    />
    <source type="image/jpg" media="(min-width: 1280px)" srcset="[[+source.src:pthumb=`[[+crop.options]]&q=80&w=1600&zc=1&aoe=1`]]"
    />
    <img width="1280" height="600" src="[[+source.src:pthumb=`[[+crop.options]]&q=80&w=1600&zc=1&aoe=1`]]" alt="[[+name]]">
</picture>

You could even go more advanced, loading different image+ Tv’s (with other resolution and crop sizes) for different image sizes.

Using visibility classes is not so good, you end up lading a lot of images and only using 1.

Good posts about tag:

3

Here’s some additional info on quality settings for each image format that might be worth considering: AVIF and WebP encoding quality settings

Also if you have pThumb/phpThumb installed, makes sure to disable the phpThumbCacheManager plugin so it doesn’t blow out your image cache on every save!

4

Thank you Ryan - I didn’t realise the quality of webp could actually be set - it never crossed my mind so that’s really useful.

5

Thank you Menno - I was struggling to understand how Image+ works in the ‘real world’ but that’s a great example exactly what I need to do. I’ve read loads of articles but couldn’t relate them to MODX / pThumb. It’s starting to make sense now. When you mention ‘page caching’ is there any particular setting I might be missing in MODX3?

You got me into Foundation many years ago and it’s still a good fit for me. I do need to understand Tailwind but I’m not sure if it would be right for the small sites I build.

6

Haha nice to hear!

With page caching I actually mean more server caching. Make sure images are cached on the server also. PageSpeed checks for this.

Obviously use the tool that works for you! Tailwind is also fine for smaller site, just need a build script

7

It looks generally, like I wasn’t doing too much wrong. From what others are saying, PageSpeed Insights does not do a good job of recognising webP images.

Is there a better testing tool that doesn’t require a sign-up?