Next.js Discord

Discord Forum

Largest Contentful Paint element 7.6s, need to fix!

Answered
Singapura posted this in #help-forum
Open in Discord
SingapuraOP
Hi I have come up with this code to render a different image based on device thats being used:
<picture>
          <source media="(max-width: 500px)" srcSet="/hero-mobile.jpg" />

          {/* Source for larger devices */}
          <source media="(min-width: 501px)" srcSet="/hero-blue.jpg" />
          <Image
            src={"/hero-blue.jpg"}
            alt="pristine panes hero"
            objectFit="cover"
            fill
            className="object-cover"
          />
        </picture>

But this is causing bad performance as seen in the attached screenshot.

How do I fix this?
Answered by Singapura
Improved. What I did: The image size was too big and the scale was off on mobile, I was loading a 1334x2000 image for a mobile screen. So I used GIMP to make the image 500x750 and compressed it to 69%. Quality went down slightly, but the img size went down 10x. After doing that, performance went up significantly
View full answer

2 Replies

SingapuraOP
Improved. What I did: The image size was too big and the scale was off on mobile, I was loading a 1334x2000 image for a mobile screen. So I used GIMP to make the image 500x750 and compressed it to 69%. Quality went down slightly, but the img size went down 10x. After doing that, performance went up significantly
Answer
Black Caiman
meh, quality costing solution, trying to find a way without reducing image quality. I see it done on wordpress, and great performance scores.