Services Work Tech Industries About Journal Contact Free audit →
Behind the build

How we built trayaam.com to score 100/100

Most agency websites are slow because they're built on tools that prioritise the agency's convenience over the visitor's experience. Page builders, blanket framework runtimes, a dozen marketing scripts, each a small tax, paid by every person who ever loads the page. We took the opposite approach with our own site, treating performance not as a final optimisation pass but as the founding constraint. Here's how trayaam.com ships at the top of the Lighthouse scale, and why the same decisions sit underneath every client build.

Static first, JavaScript last

The site is built with Astro, which ships zero JavaScript by default. Pages are pre-rendered to HTML at build time and served from a global edge network. Interactivity is added only where it earns its place, a terminal animation here, a scroll reveal there, never as a blanket framework runtime that the browser has to download, parse and execute before a single word appears.

The result is a different shape of page load. The browser receives finished HTML and a few kilobytes of targeted script, instead of a megabyte of framework it must boot before rendering. Content is visible almost immediately; the interactive flourishes hydrate quietly afterwards. This is the single biggest lever most sites never pull.

Performance is a feature you give to everyone, especially the person on a three-year-old phone and a patchy connection.

A design system, not a pile of CSS

Every spacing value, type size and colour comes from a small set of design tokens. One gutter, one vertical-rhythm ladder, one type scale, one easing curve. That consistency is what makes the site feel engineered rather than assembled, and it's the reason every page lines up without a designer manually nudging pixels. It also keeps the CSS small: there's no sprawling stylesheet of one-off overrides, because the system answers most questions before they're asked.

Fonts that don't block

Typography is where a lot of "fast" sites quietly fall down. We load only the font weights we actually use, with display: swap so text is never invisible while fonts load, and we preconnect to the font host so the request starts early. A small discipline, a large effect on perceived speed, the moment of blank-then-flash that plagues so many sites simply never happens.

Images that respect the fold

Decorative imagery is the second great tax on load time. Every image is responsive, compressed and served at the size it's actually displayed; anything below the fold is lazy-loaded so it never competes with the first paint. Explicit width and height attributes reserve space, so nothing jumps as the page settles. The hero you see first is engineered to be the fastest thing on the page, not the slowest.

The trade-offs we chose

Building this way means saying no to things that look good in a pitch and bad in a field test:

  • No heavy 3D where a lighter animation tells the same story just as well.
  • Every effect respects prefers-reduced-motion, accessibility isn't a setting we bolt on, it's a default we honour.
  • No third-party widget earns a place until we've measured what it costs the page.
  • Analytics, yes, but loaded so it never blocks the experience it's measuring.

Why this matters for your site

None of this is exotic. There's no secret tool, no proprietary trick, just a set of decisions made in the right order, with the visitor's experience as the thing we refuse to compromise. That's the discipline we bring to every client build, and it's exactly what the free audit measures first: not whether your site is pretty, but whether it's fast, structured and built to be found.

Want this for your site?