JPG images out of Builder when overriding and effect on Core Web Vitals

[jasperkooij]

As always, I’m working on making a faster website like everyone is with reusable components. I’ve been having trouble with how images are coming into my Nextjs project from Builder.IO. The ability to set loading=“lazy” and/or fetchpriority=“high” makes a big impact on CWV. WebP images are great, AVIF is better. To make this happen using what I can get out of Builder, I’m overriding the images out of Builder and running them through Next Image. I made a simple project to test how well this is working.

Create Next App

from:

GitHub - jasperkooij/Builder-Next-NextUI

// components/BuilderImage.tsx
import { Image } from "@nextui-org/image";
import { ImageProps } from "@nextui-org/image";
import NextImage from "next/image";

interface BuilderImageProps extends ImageProps {
  // Add any additional custom props if needed
  image: string;
  backgroundSize: string;
  backgroundPosition: string;
  lazy: boolean;
  fitContent: boolean;
  aspectRatio: number;
  lockAspectRatio: boolean;
  height: number;
  width: number;
  srcset: string;
  sizes: string;
  altText: string;
}

const BuilderImage: React.FC<BuilderImageProps> = ({
  image,
  lazy,
  height,
  width,
  srcset,
  sizes,
  altText,
}) => {
  return (
    <Image
      as={NextImage}
      src={image}
      srcSet={srcset}
      sizes={sizes}
      alt={altText}
      width={width}
      height={height}
      loading={lazy ? "lazy" : "eager"}
    />
  );
};

export default BuilderImage;

I’m using Next and NextUI to bring the image forward using all the props I can get out of Builder.

Imagine my surprise to see images loaded directly from Builder: Here you can see this in action. Large images are being loaded next to the ones that are coming from Next:

When I test the page, https://pagespeed.web.dev/analysis/https-builder-next-next-ui-vercel-app/vq4u9i8kyn?form_factor=mobile, I’m getting dinged for loading JPG’s

Same in webpage test:

So here is my question, will Builder have a feature that will allow setting lazy/priority in the very near future? Or should I update my own?
And how do I avoid loading JPG images out Builder separate from the ones that Nextjs is creating?

[manish-sharma]

Hello @jasperkooij,

Upon reviewing the Home content, we’ve noticed similar behavior. We’re currently delving deeper into potential solutions to circumvent loading JPG images. Rest assured, I’ll keep you updated on our progress in this regard.

Additionally, it’s worth noting that Builder might incorporate a feature to enable setting lazy loading or setting priority in the near future. In the meantime, I suggest submitting a feature request through our ideas board at https://ideas.builder.io/ideas/

Thank you for your patience and understanding.

[jasperkooij]

Thanks for looking into this!