Show us the code for the image component

Profile image link is link to supabase storage bucket, public link, user image would be usually "/uuid.jpg"

  const imageUrl = user.image
    ? `${PROFILE_IMG_LINK}${user.image}`
    : `${DEFAULT_AVATAR}${user.name}`;


              <Avatar className="w-[100px] h-[100px] sm:w-[170px] sm:h-[170px] lg:h-[200px] lg:w-[200px] border-[4px] sm:border-[8px] border-card pointer-events-none select-none">
                <Image
                  src={imageUrl}
                  alt={`${user.name}'s avatar`}
                  width={400}
                  height={400}
                />
              </Avatar>

Everything here is synchronous and shouldn’t take any time to load

How are you fetching the user? That’s got to be asynchronous

I'm using direct prisma call in server component

export default async function IndexPage({
  params,
}: {
  params: { username: string };
}) {
  const user = (await getUser(params.username)) as User;

  if (!user) {
    return;
  }

So is that the part you’d like to add loading for? The time it takes to get the user

I was thinking adding loader would help me optimize the images to improve lcp, fcp like in docs

const imageLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
 
export default function Page() {
  return (
    <Image
      loader={imageLoader}

I can't find why is it so low

I'm only serving user image and user banner

With banner having prio

Are you 100% sure the high LCP is to do with this image?

If you have deployed the site to Vercel which it looks like you have, run it through GMetrix to get an LCP breakdown so you can see what’s taking forever to load

Will do

Btw I'm running the <Image inside async server component. Should I move it to "use client" or is there no difference

There’s no difference

Are you using shadcn avatar?

Yes

It says to use AvatarImage not Image

Oh.

Not sure if that will help but

If it does please mark the solution

I'll check it

So I checked few my routes with GMetrix, most of it is dynamic, not static. Both GMetrix and Google speed have been giving me way better results than vercel analytics. I was just trying to figure out what I can improve. But it seems like it's fine?? The problem seems to be when not visited often page is loaded and it's being cached for the first time. I have small traffic so far, 100 per month, so some of the pages are loaded once every few days

I'll check the avatarimage

I have few users from Asia, I see

So AvatarImage is not caching but I can use

    <AvatarImage asChild src='/next.svg'>
        <Image src='/next.svg' alt='logo' width={40} height={40} />
    </AvatarImage>

https://github.com/shadcn-ui/ui/issues/368#issuecomment-1675661063