Lighthouse performance score

[Aniket-216]

Hello,
I installed the yarl in my current project and it's working absolutely fine. The docs and examples are clear to understand.
But I got into one issue that is the performance is not good when I checked on lightbox, maybe I'm doing something wrong I'll share the code here so maybe you will better understand.

I use this component for the carousal

export const CarousalImages = ({
  propertyImages,
  altTags,
  imageUrl,
  height,
  width,
}) => {
  const [index, setIndex] = useState(0);

  if (
    propertyImages === "null" ||
    propertyImages === "undefined" ||
    propertyImages === null ||
    propertyImages === undefined
  ) {
    return (
      <Img
        src={propertyPlaceholder}
        height={height || "auto"}
        width={width || "100%"}
        style={{ borderRadius: "16px" }}
        alt={altTags}
      />
    );
  }

  let propertyImageArray = Object.values(JSON.parse(propertyImages));

  // for hiding the navigation buttons
  // https://github.com/igordanchenko/yet-another-react-lightbox/discussions/44

  return (
    <>
      <Lightbox
        index={index}
        slides={propertyImageArray?.map((img) => ({
          src: imageUrl + img,
          height: height,
          width: width,
        }))}
        plugins={[Inline]}
        render={{
          buttonSlideshow: () => null,
          iconPrev: () => (
            <Fab size={"small"} sx={{ bgcolor: "#e6e6e6" }}>
              <ChevronLeftOutlinedIcon sx={{ color: "#123763" }} />
            </Fab>
          ),
          iconNext: () => (
            <Fab size={"small"} sx={{ bgcolor: "#e6e6e6" }}>
              <ChevronRightOutlinedIcon sx={{ color: "#123763" }} />
            </Fab>
          ),
        }}
        on={{
          view: ({ index }) => setIndex(index),
        }}
        carousel={{
          finite: false,
          padding: 0,
          spacing: 0,
          imageFit: "cover",
          preload: 0,
          imageProps: { loading: "lazy" },
        }}
        styles={{
          container: { borderRadius: "16px", backgroundColor: "#fff" },
        }}
        inline={{
          style: {
            width: "100%",
            maxWidth: "900px",
            height: height,
            aspectRatio: "1",
            margin: "0 auto",
          },
        }}
      />
    </>
  );
};

[igordanchenko]

Can you share what kind of performance issues are you experiencing, as well as the lighthouse report?

[Aniket-216]

we actually solved the performance issue, we were using the default values for preload which we changed. We were also looking for using a custom image component for lazy loading the slides which we found and now it doesn't have any performance issue.
Appreciate the fast responses. Loving the package too will be using this.