The architecture decisions that matter most
Most performance optimization happens too late — at the end of a project, when it's expensive to fix. The biggest gains come from architecture decisions made before a line of code is written: what to render server-side vs. client-side, how to handle images, and what to defer vs. eager-load.
Images: the number one Lighthouse killer
The single most common cause of poor LCP is unoptimized images. Every image needs `next/image` with explicit width and height. LCP candidates need `priority`. WebP and AVIF conversion should be automatic. Lazy-loading everything including above-the-fold is a common mistake.
The 3D exception
Three.js and WebGL scenes present a unique challenge. The key is WebGL budget enforcement: define a max GPU memory allocation before writing a scene, use LOD (level of detail) for complex meshes, and lazy-load the entire Three.js bundle until the scene enters the viewport. We run Lighthouse CI on every PR — 3D scenes don't ship if they break the budget.
Server-side rendering vs. client components
The most impactful architectural decision in Next.js App Router is the server/client boundary. Every component that doesn't need interactivity should be a Server Component. Client Components add JavaScript weight and delay hydration. We audit every `'use client'` directive before merge.
We write about growth systems, AI, and the things most agencies won't tell you. If this was useful, the next step is a conversation.
Start a project →Let's talk.
Enjoyed the read? We work with a select few — tell us what you're building.