Speed Insights improvement help

[wongdigital]

I launched my site yesterday. (I’m on the hobby plan.) It’s a simple statically generated personal site. I’ve installed Speed Insights and am receiving some data.

How do I resolved warnings when Speed Insights says “Needs Improvement”? For example, this is the page that has been flagged with a score of 57: Roger Wong - Design Leader & Creative Director

The metrics that aren’t great are First Contentful Paint and Largest Contentful Paint. I’m sure it’s because the image is lazy loading, and loading kind of slowly.

The expected behavior is that Vercel’s edge network helps load images quickly. I am indeed using the NextJS Image function.

Deployment URL or Custom Domain: https://rogerwong.me
Environment (local, preview, production): Production
Project Framework: Next.js
Build Settings:
  Framework Preset:
  Build Command (if not default):
  Output Directory (if not default):
  Install Command (if not default):
Node/Runtime Version:
Package Manager:
Relevant Packages:

[swarnava (Swarnava Sengupta)]

Hi,

Have you tried to reduce width of the image using width props Components: <Image> | Next.js? It looks like you are loading the entire image which isn’t needed.

[wongdigital]

I appreciate your reply. I just adjusted it lower. However, I thought Next.js would automatically serve a correctly-scaled image on the fly. Am I wrong in that assumption?