I boosted my website’s mobile performance from 80 to 96

I’ve been making a load of small changes to this website recently, and I knew that it needed a proper tune-up, especially on mobile, where performance really matters.

Before the refresh, my mobile performance score was stuck at 80. Not terrible, but not where I wanted it to be. Here’s how I pushed it up to 96, step by step.

1) Audit and diagnose with PageSpeed Insights

First things first—I ran Google PageSpeed Insights on my site. It flagged a few usual suspects:

• Images that were much larger than displayed
• Blocking CSS and JavaScript files delayed the largest contentful paint (LCP)
• Fonts that were render-blocking due to how they loaded

Images were an obvious place to start, as they weren’t adapting to different device widths.

2) Cloudinary optimisation for responsive images

My portfolio sections contain lots of images of my work, and I host them on the Cloudinary CDN. The key to optimisation was to serve correctly sized images, in efficient formats like WebP, and with quality optimised automatically. Cloudinary makes this easy with URL parameters.

• I added srcset with multiple widths so browsers can choose the best size
• Cloudinary’s f_auto and q_auto params to deliver the correct format and compression
• Added sizes so the browser knows the image display size
• Added loading="lazy" and decoding="async" for non-blocking load and decode
• Kept explicit width and height attributes to avoid layout shifts

<img
  src=".../upload/f_auto,q_auto,w_500/..."
  srcset="
    .../upload/f_auto,q_auto,w_320/... 320w,
    .../upload/f_auto,q_auto,w_500/... 500w,
    .../upload/f_auto,q_auto,w_800/... 800w"
  sizes="(max-width: 600px) 100vw, 500px"
  width="500"
  height="390"
  loading="lazy"
  decoding="async"
  alt=""
/>

This new markup significantly reduced the image payload on smaller devices, speeding up load times and improving Core Web Vitals.

3) Deferring fonts with font-display: optional

Fonts can be sneaky performance killers as they often block rendering while loading. I adjusted my font CSS to use:

@font-face {
  font-display: optional;
  /* other font-face properties */
}

This change tells the browser to render text immediately with fallback fonts if needed, then it swaps in the web fonts once they load, without blocking the initial render.

Results: from 80 to 96 on mobile

After these tweaks, my PageSpeed Insights mobile score increased to 96, which I consider a solid win. The site still looks just as sharp, but now it’s snappy and responsive for visitors on slower connections or less powerful devices.

If you want to chat about how to optimise your site’s performance, drop me a line. Happy to help.