PerformanceEngineering
core-web-vitals, image-optimization, cloudflare-pages, static-sites
Article

Performance Defaults That Keep Static Websites Fast

Use static rendering, optimized local images, minimal JavaScript, deferred search, and simple deployment rules to keep future client websites fast, affordable, and easy to maintain.

By Editorial Team4 min read
Hyperspeed static website performance engine with optimized media cards and global delivery lights

Performance is easiest when the default architecture does less work. The fastest request is usually a static file served from an edge network.

This starter kit keeps the public website path simple: Astro builds HTML, CSS, optimized images, and Pagefind search assets into dist, then Cloudflare Pages serves them globally.

Performance rules baked into the starter

  • Static output first. No database connection is needed to render public pages.
  • Images are local assets. Astro can optimize them at build time and generate responsive output.
  • JavaScript is intentional. Search and the contact form are islands; presentational content stays server-rendered.
  • Search is static. Pagefind indexes built pages after the Astro build and runs client-side without a search server.
  • Deployment is cheap. Cloudflare Pages handles the static site; Pages Functions are available only where dynamic behavior is required.

Core Web Vitals mindset

A starter kit cannot guarantee perfect field data for every future website, but it can remove common causes of failure: heavy client bundles, unoptimized remote images, render-blocking dependencies, and dynamic page generation.

From there, each project should keep page templates simple, avoid unnecessary third-party scripts, and treat every script tag as a budget decision.

Practical launch checklist

Before launch, run a production build, inspect generated routes, check image sizes, and test Lighthouse against the deployed Cloudflare URL. If a page needs analytics, chat, maps, or embeds, load them only on the pages that truly need them.

Sources and references

Frequently asked questions

How does Astro improve site speed?

Astro renders static HTML by default and only sends JavaScript for components that need browser interactivity.

Where should images live in this starter kit?

Images should live in src/assets when they need Astro build-time optimization, with descriptive alt text and responsive widths configured in the component.