#Tips for reducing build time

5 messages · Page 1 of 1 (latest)

modest helm
#

I have a Astro project with around ~570 markdown files. Most of these files have images (1080px wide JPGs), and these images do I resize and convert JPGs to avif as a build time step to serve a optimized images to the user. I am optimizing around 1719 images and the build times exceed Vercel's 45 minute build time limit. Each Image gets resized to have three versions: 400px , 600 px and 900 px wide.

The code for the entire project is here: https://github.com/Mordi490/recipe-site

But the code for the resposnive images is based on Chris Perrington video:

---
// credit where credit is due: https://github.com/coding-in-public/astro-image-optimization-v3
import type { ImageOutputFormat } from "astro";
import { getImage } from "astro:assets";

type Props = {
  src: ImageMetadata;
  alt: string;
  format?: ImageOutputFormat;
  sizes: number[];
};

async function generateResponsiveImages({
  src,
  format,
  sizes,
}: Omit<Props, "alt">) {
  const imgSrcSet = sizes.map(async (size) => {
    const image = await getImage({ src, width: size, format });
    return `${image.src} ${size}w`;
  });

  const imgSrc = await getImage({ src, width: Math.max(...sizes), format });

  return {
    srcSet: await Promise.all(imgSrcSet),
    imgSrc: imgSrc.src,
  };
}

const { src, sizes, format, alt } = Astro.props;

const { srcSet, imgSrc } = await generateResponsiveImages({
  src,
  sizes,
  format,
});
---

<img srcset={srcSet.join(", ")} alt={alt} src={imgSrc} />

in use it looks like this;

<ResponsiveImage
            src={img}
            sizes={[400, 700, 900]}
            alt="bildet av oppskriften"
            format="avif"
          />

Should I just reduce the amount of images I am optimizing, ie. go from [400, 700, 900] to [500, 900]. Or are there better ways to reduce the time it takes to optimize images or "hacks" around vercel caching

GitHub

Astro based recipe site. Contribute to Mordi490/recipe-site development by creating an account on GitHub.

#

I somehow managed to deploy it on vercel, but I think I must have not had all the markdown files deployed at once. So the previously uploaded and optimized ones were taken from their cache instead of generated at build time.

Right now I exceed the 45 min mark at 1535 out of 1717 image optimizations

modest helm
#

It seems like the issue is just that avif is very slow, switching to webp resultet in build times around a minute

mortal brook
#

avif is a really slow format to encode, it's kinda by design

#

Also, is there any reasons you're using a custom code to generate srcset instead of the built-in widths and densities?