Building a studio website that scores 100.

The brief

A studio’s website is checked before anyone replies to its first email. It has to answer three questions in under a minute: is this a real business, what does it make, and what does it cost. And because we sell websites, it is also the first piece of work every client sees.

What we built

A static site built with Astro and Tailwind CSS, deployed on Cloudflare Pages. Pages are generated once, at build time, so there is no server or database to attack and nothing to slow a page down while it is being requested.

• Almost no JavaScript. Most pages ship no JavaScript framework at all. The mobile menu uses the browser’s built-in popover rather than a React component, which removed about 96 KB from every page.
• Fonts hosted with the site, one file per weight, with fallback fonts sized to match so text does not jump when the real font arrives.
• A strict content security policy. Every inline script is listed by its hash, and scripts can only load from the site itself, so code injected into a page cannot run.
• A check that runs on every build. Before anything is published, a script reads every page and fails the build on a stray noindex, a wrong canonical address, a missing description, an image without alt text, a broken link or a script the security policy would block.

What went wrong on launch day

The site passed every check locally, then scored 93 instead of 100 for best practices in production. Cloudflare was adding an analytics script to every page as it was served, and the security policy blocked it, logging an error each time. A second default setting had replaced every email link with a script of its own. Both were turned off, and the score went back to 100. We wrote up every setting that caused trouble.