Static Sites

Use Astro by default. It is simple, fast, deploys as plain static files, and has a good built-in asset pipeline.

Best practices

• Keep CSS and JS in a separate file so that it can be fingerprinted, compressed, and cached
• Keep source assets high quality; let the build pipeline create production variants.
• Use astro:assets (Image / Picture) for local images instead of plain <img src={image.src}>.
• Prefer AVIF/WebP with a JPEG or PNG fallback.
• Generate responsive widths and set accurate sizes.
• Mark only the above-the-fold LCP image as priority; lazy-load everything else.
• Configure Sharp defaults once in astro.config.mjs rather than manually editing images.
• Run Lighthouse after changes and look first at LCP, total byte weight, and image transfer sizes.