My images are too big. Size sometimes is everything.

My Images Are Too Big; or, Google Page Speed is Your Friend

Google Page Speed

If you have a web site, Google Page Speed is your friend.

Dump your site url in there, and find out what the heck is going on, both on mobile and desktop.

PageSpeed Insights (PSI) reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.

Metrics for AMindfulCoder

Not as bad as I would have expected, but lots of room for improvement.

When I set up this blog, my intention was MVP. Get something up as quickly as possible. Then, get writing.

I knew there would be lots of areas to improve. One of the bits of intentional technical debt I knew I’d have to address eventually was the size of images.

Here we are.

Problem Areas

Looks like first contentful paint and largest contentful paint are in the amber and red, respectfully.

First Contentful Paint

First Contentful Paint (FCP) is when the browser renders the first bit of content from the DOM, providing the first feedback to the user that the page is actually loading. The question “Is it happening?” is “yes” when the first contentful paint completes.

The First Contentful Paint time stamp is when the browser first rendered any text, image (including background images), non-white canvas or SVG. This excludes any content of iframes, but includes text with pending webfonts. This is the first time users could start consuming page content. – https://developer.mozilla.org/en-US/docs/Glossary/First_contentful_paint

Largest Contentful Paint

Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded—a fast LCP helps reassure the user that the page is useful. – https://web.dev/lcp/

Diving In

Looks like I’ve got loads of super large images, and the advice is to convert them to more current, web-friendly formats, like webp.

Not a surprise.

In my current iPad workflow, I use Affinity photo for image manipulation. Unfortunately, and surprisingly it does not have a webp format converter.

For my tests for this page, I used compress-or-die.com

Not sure I want to keep using this - uploading to a site I don’t know much about - but for the short-term, for images I’m not fussed about, it’s fine for the test.

Holy cow! Massive difference!

My working theory is that, given first contentful paint was one of the key factors in my crap score, and given this post will become the first post/first contentful paint, if I have updated my images and pushed it up, we should see a score difference.

Let’s see what Google says.

Boom.

That was supposed to be a gif of Denzel Washington saying, “Boom,” in Training Day, but I can’t seem to get the gif that I converted to webp to animate correctly.

A problem for another day.

Wrapping Up For Now

That was easier than I thought. I’ve managed to get decent performance improvements and address technical debt in the site around image sizes and modern image formats.

My next steps will be to apply what I’ve learned here and script updating all images and image references to be smaller and in webp format.

After that, I’ll take a look at other issues that show up on the site, and think about what I can do about them. Likely there will be some that can only be addressed with a rewrite, but we’ll see.

That was the plan, after all, which I still haven’t got back to….

Maybe soon…