- 2021
- Tech Lead
- Consume and Create
Consume & Create
Overview
High-90s Lighthouse Scores Without Sacrificing the Animation Budget
An agency site rebuild in Nuxt that had to sell the work while proving the technical credibility. High-90s Lighthouse scores with animations fully intact.
- Nuxt
- Contentful CMS
- Vue
- Performance Optimization
- Animation
- Lighthouse
The Brief
Building for your own agency
Building for your own agency is harder than client work. Everyone's a critic, standards are unreasonable, and the site has to sell the work while proving you can actually build. The internal pressure was real. The external audience was everyone in the industry we wanted to hire.
The performance / animation tension
The fight
The hard part was hitting Lighthouse scores in the high 90s while keeping the animation work intact. That tension usually forces a compromise. Performance-first sites feel dead. Animation-first sites feel slow.
The toolkit
Nuxt for the shell. Contentful CMS handling content updates without developer involvement. Custom project galleries with hover-state previews. A contact form that doesn't feel like a DMV visit.
Perf-Motion Braid
Performance and motion, together
The optimization pass
Lazy hydration, image sequencing, priority hints on everything above the fold, aggressive code splitting. Every animation measured against its cost. High-priority animations stayed on scroll; low-priority ones traded for main-thread headroom.
A 98 Lighthouse score, animations fully intact
What shipped
High 90s Lighthouse, animations fully intact, CMS the team runs on their own. Ended up being the agency's best new business driver for over a year.
Next Project
CraftedKit
15+ Hero-Grade WebGL Experiences for an Interactive Web Studio
Continue →