Current State (July 25, 2025)

The Vercel Experience score is at 73 of this website, need to improve

In this series, I am going to show you what steps i am taking to improve my site's web performance.

Large images were loading in the guestbook comp on the Homepage

1. Fixed - Optimizing images for guestbook

So if you visit my website's homepage Home, the lighthouse in Chrome yelled saying that images were not optimized for images coming from guestbooks profile images of the list view.

Guestbook images were not loading according the required size, they were larger in size, So i need a way to optimize this images based on the size i am rendering.

The Images that were loading were coming from the github api, to make the images transform based on width and height, i had to pass in a query to the api, so that it renders accordingly.

There is article by Google Lighthouse page on Properly sized images - optimizing images and Lighthouse calculates this scores.

so all i had to do was attach the '?s=width' to the api with the required width, currently in my case it was "40px", optimizing it with the next/image. it came pretty well.

<Image
    src={`${avatarUrl}&s=${width}`} // appending the size query
    alt={avatarAlt}
    width={width}
    height={height}
    className="rounded-full object-cover"
    priority
/>

so i had to optimize the code to support the proper width of the avatar images:

"use client";
import Image from "next/image";

export default function Avatar({
  avatarUrl,
  avatarAlt = "",
  width = 48,
  height = 48,
}: {
  avatarUrl: string;
  avatarAlt?: string;
  width?: number;
  height?: number;
}) {
  // Optimize GitHub avatar URL by adding size parameter
  const optimizedAvatarUrl = new URL(avatarUrl);
  optimizedAvatarUrl.searchParams.set("s", Math.max(width, height).toString()); // ?s="48" // width of 48px

  return (
    <div
      className="flex items-center justify-center overflow-hidden rounded-full  mx-2"
      style={{ width: `${width}px`, height: `${height}px` }}
    >
      <Image
        src={optimizedAvatarUrl.toString()}
        alt={avatarAlt}
        width={width}
        height={height}
        className="rounded-full object-cover"
        priority
      />
    </div>
  );
}

Now the score has bumped a bit to 99 for the Homepage. a bit of improvement on the Lighthouse Scores.