Web Performance Is a Design Decision
Why page speed should be part of your design brief, not an afterthought. A designer's guide to performance-conscious decisions.
When we talk about website performance, the conversation usually happens in engineering meetings. But the truth is, many of the biggest performance wins (and losses) are made during the design phase, long before a developer writes a single line of code.
The Business Case for Speed
Before diving into techniques, let’s ground this in numbers:
- A 1-second delay in page load time reduces conversions by 7%
- 53% of mobile users abandon sites that take longer than 3 seconds to load
- Google uses Core Web Vitals as a ranking factor
- Every 100ms of improvement in Largest Contentful Paint correlates with a 1% increase in conversion rate
Performance isn’t a technical nice-to-have. It’s a business imperative that directly impacts revenue, SEO, and user satisfaction.
Design Decisions That Kill Performance
Hero Videos and Autoplay
That cinematic hero video looks stunning in your Figma mockup. In reality, it adds 5-15MB to your page weight and delays meaningful content from appearing. Consider: is the video essential to communicating your message, or could a well-composed static image with subtle CSS animation achieve 90% of the impact at 5% of the cost?
Excessive Custom Fonts
Each font weight you add is another 15-40KB your users need to download. A design that uses Light, Regular, Medium, SemiBold, and Bold adds 100-200KB of font files. We recommend limiting to 2-3 weights per font family and using font-display: swap to prevent invisible text during loading.
Unoptized Images
Full-resolution images from Unsplash or your photographer are beautiful but often 3-8MB each. A properly sized and compressed image for web use is typically 50-200KB — a 20-40x reduction with minimal visible quality loss.
Performance-First Design Patterns
Progressive Disclosure
Don’t show everything at once. Load the content users need immediately and defer the rest. Tabs, accordions, and “load more” patterns aren’t just good UX — they’re performance optimizations.
System Font Stacks
Consider whether a custom font is truly necessary. Modern system font stacks like -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif look excellent on every platform and load in zero milliseconds.
Skeleton Screens
Design loading states as part of your component library. A skeleton screen that matches your layout gives users visual confirmation that content is coming, making perceived performance dramatically better even when actual performance stays the same.
Our Performance Budget
At Studio, every project ships with a performance budget:
- First Contentful Paint: Under 1.2s
- Largest Contentful Paint: Under 2.5s
- Total page weight: Under 500KB (excluding cached assets)
- Lighthouse Performance score: 95+
These constraints aren’t limitations — they’re creative parameters, like designing within a grid system. The best work often comes from thoughtful constraints.
Tools for Designers
You don’t need to be a developer to care about performance:
- Lighthouse (built into Chrome DevTools): Run an audit on any site in 30 seconds
- WebPageTest: Detailed performance analysis with filmstrip views
- Squoosh.app: Visually compare image compression levels before committing
“The fastest code is no code. The fastest asset is no asset.”
Make performance part of your design brief, not your post-launch hotfix list. Your users — and your conversion rate — will thank you.