Loading...
Loading...
An agency website is judged by its own quality. Here's how we built one that loads fast, animates smoothly, and ranks well — without sacrificing visual richness.
Field Note — GITS
---
An agency website is a paradox. It has to demonstrate design excellence — animations, typography, visual richness — while loading instantly and ranking at the top of Google. Every millisecond of load time undermines the "we build fast, beautiful products" claim. Every missing animation makes the portfolio feel flat.
GITS was built to resolve this paradox: a creative agency website with stunning animations, optimized assets, and comprehensive SEO — all without compromising on either side.
---
When a potential client visits an agency website, they're not just reading about services. They're evaluating the agency's capability by experiencing the site itself. Slow load? "They can't build fast products." Janky animations? "Their frontend work is sloppy." Poor mobile experience? "They don't think about users."
The website is the portfolio. Every technical decision has to serve both the content and the implicit claim that this agency knows how to build.
---
We chose Next.js 13+ with the App Router and static generation for the entire site. Every page — homepage, case studies, services, about — is pre-rendered at build time and served from the edge.
Static generation gives us:
The tradeoff is that content updates require a rebuild. We solved this with Incremental Static Regeneration (ISR) for case studies: when a new case study is published in Sanity CMS, a webhook triggers a rebuild of the case study page and the homepage (which lists recent case studies). The rebuild takes ~45 seconds. For an agency site that updates weekly, this is acceptable.
Animations are the soul of an agency site. We use Framer Motion for page transitions, scroll-triggered reveals, and micro-interactions. But animations are also the enemy of performance — they block the main thread, cause layout shifts, and drain battery on mobile.
Our approach is progressive enhancement:
This triple-layer approach requires more testing — we verify every page in three states: no-JS, JS-with-motion, JS-without-motion. But it ensures the site is usable for everyone, not just users with powerful devices and fast connections.
Agency content changes frequently: new case studies, team members, services, testimonials. We needed a CMS that gives the content team full flexibility without requiring developer intervention for every update.
Sanity CMS provides:
The tradeoff is complexity. Sanity has a learning curve, a custom query language (GROQ), and its own deployment model. For a small agency, a flat-file CMS (like Contentlayer or even Markdown in Git) would be simpler. We chose Sanity because the content team needed real editing flexibility — drag-and-drop galleries, rich text with embedded media, custom components — that flat files can't provide.
Agency portfolios are image-heavy. A single case study might have 20 high-resolution images. We optimize aggressively:
---
The design team wanted a full-screen video background on the homepage. The performance team (me) wanted a sub-2-second load time. These are incompatible.
Our compromise:
This was a design compromise, not a technical one. The design team accepted it because the performance metrics became a selling point: "Our site loads faster than 99% of agency sites." That claim is more valuable than a video background.
Framer Motion makes animations easy to implement and hard to implement well. The default behavior — animate everything on mount, on scroll, on hover — creates a chaotic experience for screen reader users and people with vestibular disorders.
We implemented three accessibility rules:
1. No motion on focus: Focus indicators are static, not animated. A user tabbing through the site doesn't trigger scroll animations or page transitions.
2. Reduced motion as default for prefers-reduced-motion: All animations are disabled when the user has set this preference. Not just slower — completely disabled.
3. Keyboard-accessible interactive elements: Every hover animation has a keyboard equivalent. A card that expands on hover also expands on Enter key press.
These rules added ~20% to the animation implementation time. But they made the difference between a site that looks good and a site that is genuinely usable.
---
Agency websites are judged by their own quality. Every pixel, every millisecond, every animation is a statement about the agency's capability. Technical excellence is not a nice-to-have; it is the product.
Performance is a feature, not an afterthought. A fast site converts better, ranks higher, and costs less to host. We treated performance as a primary design constraint from day one, not as a optimization pass at the end.
CMS choice significantly impacts content team productivity. A CMS that requires developer intervention for every content update creates a bottleneck. Sanity's real-time editing, flexible schemas, and API-first approach let the content team ship case studies without blocking engineering. The time saved is worth the learning curve.
---
GITS is live at [gits.agency](https://gits.agency)