PageSpeed Insights - achieving 100% score

[Webdeersign]

@habitualshaker

ImageOptim (via Open in App node) and it will take the files and do its thing with them.

Retrobatch used to do a file save and then a file open of the saved file in ImageOptim which somewhat spoilt the process. I don’t know if that’s still the case.

Edit update:

I tried the demo version which is the standard Retrobatch (14 day trial) version and not the Pro version.

The Pro version is required to use plugins.

There doesn’t appear to be any obvious way to optimise an image in the compression sense. Converting to a webP image, has a quality slider but no way to see the effects of the quality slider will have on visual quality of size.

[habitualshaker]

@Webdeersign

Retrobatch used to do a file save and then a file open of the saved file in ImageOptim which somewhat spoilt the process.

Yeah - that’s how it works. Save to a folder then Open in app. ImageOptim does its thing without any intervention and the optimised files overwrite the orginals.

[Webdeersign]

@habitualshaker

Yeah - that’s how it works. Save to a folder then Open in app. ImageOptim does its thing without any intervention and the optimised files overwrite the orginals.

I thought so. That obviously degrades the jpg image through another save.

There’s an opportunity for someone to create decent app here.

[Webdeersign]

I have been trying different online converters and one of them stands out.

Squoosh.

The rate of jpg and png compression seems quite high but does reduce filesize impressively without appearing to degrade an image.

There are plenty of tools to resize and edit but there is a hidden feature that will convert the image type from jpg or png to optimised webp. You just need to select “Compress” type to be WebP and the downloaded image will be converted to webP.

It doesn’t have a batch mode, and processes images one at a time. I.e. drag an jpg or png image in, set resize dimension, download, then set Compress to WebP and download for every image.

[wolf]

Yep, Squoosh seems to be really great in terms of compression. Just noticed that also Realmacs “Squash” app is able to save images as WebP. But I have no time to make tests and compare the results of both…

[Webdeersign]

There is also a desktop Squoosh App (free of course) available for download at https://squoosh-desktop.vercel.app. This is every bit as impressive as the web based version.

This has just made quite a few of my image resize and optimisation Apps redundant.

[Gianluca]

To compress I am very happy with Animated WebP Maker
It even converts animated gifs to animated webp.
Then I also often use pixelmator.

[Webdeersign]

Using Squoosh, I optimised 6 large 2000px wide jpg images using Squoosh used on this page - Webdeersign Project28 for Source

To my surprise with these 6 big images, the page still gets a 100% PageSpeed for Desktop, and putting aside that that is impressive for a full page Splider based Poster2 page, it reinforces what I was saying about PageSpeeds emphasis on reporting and factoring image type. So if you are not getting 100% PageSpeed, and you have well optimised images, it is most likely something else affecting your score.

The PageSpeed reports on the page above, the “opportunity” to “Serve images in next-gen formats”

This advice should include the phrase “well optimised” next gen formats and include a backup of old gen formats that will guarantee all users will be able to see them.

Also, Google’s image compression examples are missleading, and using Googles own Squoosh achieves different results to what PageSpeed presents as the saving you would make if you use “next-gen formats”.

The figures that PageSpeed show for the potential image sizes appear to be using a high level of webP compression that you may not be happy with. If you just convert a jpg to a webP image you can end up with a bigger file.

E.g. if you select “optimise” an already optimised jpg into a lossless webP, then the webP image will significantly bigger than jpg version. Also some PNG’s with complex shapes with transparent BGs, increase in size when converted to webP.

Image below shows an already optimised jpg increased in size by 219% by converting to a lossless webP image.

I have learnt that time spent varying Squoosh’s Quality slider, is time is well spent to reduce jpg, png and also webP images, and that using a drag and drop one size fits all optimiser app, is just being lazy.

[Webdeersign]

If your macOS doesn’t support displaying webP images, you can enable the preview function to preview webP images in Finder, Preview, etc…

Open Terminal and paste the following in and hit enter:

curl -L https://raw.github.com/emin/WebPQuickLook/master/install.sh | sh

More info at GitHub - emin/WebPQuickLook: Mac OS X QuickLook plugin for WebP image files

[TemplateRepo]

Hello @dancounsell. Off topic but perhaps you could tell me why my account on your new community site is now “in review”? No comments or posts are published, they just remain “in review” for a while then disappear.

I’ve tried emailing you but you never reply.

At that very least, an explanation would be nice.

[Webdeersign]

Another thing to bear in mind when creating or choosing to add a webP image, is that webP compression process is far worse at compressing some images that have a lot of transparency. The webP version can be almost double the size of an equivalent optimised png image. This needs checking before you accidentaly add images that can be larger than png versions.

[Kent]

Hej
For a new website I am developing with Source, I get a 100 % performance score. the page, with photos, etc loads in about 0.7 seconds, and it is ready to interact within 0.3 seconds. I am using Stuart’s “Botany” project as a basis for this site. I have made fast sites with Source before, but this really beats anything I have seen so far. There is a lot of photos, they are all in different sizes for different devices. None of them are in Webp format. Lighthouse tells me I can save 0.76 seconds by using Webp. I do not really think that this is correct.
Sometimes I get tempted by the fancy features of other “frameworks”, but they do not give me bliss like Source do :-)

Kind Regards

Kent

[Webdeersign]

Good. That was very much the point of my original thread here. With Source you usually don’t have to do much, if anything beyond good practices to get 100%.

However, using correctly sized, well optimised and delivered webP images is still worth doing to reduce the download time even further.

@Kent

Lighthouse tells me I can save 0.76 seconds by using Webp

That’s just Google waving the Google flag about their 12 years old webP format.

[Webdeersign]

One more thing worth doing is to change the default auto setting to swap in the Source Custom Fonts setting Font Display. Google gets a bit grumpy if you don’t do that.

[Webdeersign]

I noticed this example of a site using webP images throughout the site, without a jpg or png backup. This is inexcusable and expecially from someone like Ghost.org.

The site is https://ghost.org which is a highly visual site.

Below are 2 images. The first is a screenshot from Safari 15.4 in macOS 10.15.7, and teh second is from Chrome with same OS. Both show the same area of the site.

[Mark]

How old is the Safari you are using?

[Webdeersign]

Bang up to date. Only the latest macOS’s Safari 15.4 support webP.

[homergoalie]

It’s odd I’m using Safari 15.0 and that page is displaying everything fine on this end.

[Webdeersign]

@homergoalie

It’s odd I’m using Safari 15.0

Thats, half of the equation. What macOS? The key is the latest macOS.

However, this is about those who can’t see webP images and without a fall back image, those users will not see the images. Anyone using webP images needs to b aware of this.

[homergoalie]

Mine is on OS 11.6. Trying to figure out the correlation of what is preventing them from showing for you. Is it the OS or version of Safari?