Performance is a product decision. Slow sites leak trust before your headline finishes rendering.
Priority order
- Server / TTFB — hosting, caching, edge
- LCP element — usually hero image, video poster, or large heading stack
- JavaScript weight — defer non-critical scripts
- Fonts — subset,
font-display, limit families - Images — modern formats, correct sizes, lazy-load below fold
- Third parties — analytics, chat, embeds
Checklist
Delivery
- CDN / edge caching for static assets
- HTML cacheable where personalization allows
- Compression (Brotli/Gzip) enabled
- HTTP/2 or HTTP/3
Assets
- Hero image sized to display dimensions (not a 4000px source)
-
AVIF/WebPwith sensible fallbacks -
width/heightor aspect-ratio to prevent CLS - Lazy-load non-critical media only
JavaScript & CSS
- Critical CSS path kept lean
- Defer analytics until consent / idle where possible
- Avoid blocking third-party tag managers on first paint
- Code-split heavy routes
Fonts
- Self-host when possible
- Preload only the primary text face
-
font-display: swapor optional - Limit to 2–3 families max
Measurement
Use lab tools (Lighthouse, WebPageTest) and field data (CrUX / RUM). Lab-only wins that vanish on real mobile are not wins.
<link rel="preload" href="/fonts/syne.woff2" as="font" type="font/woff2" crossorigin />
FAQ
FAQ
What matters most for website performance?+
Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — plus server response time. Fix the heaviest element in the first viewport before micro-optimizing elsewhere.
How fast should a business website load?+
Aim for LCP under 2.5s on mid-range mobile, INP under 200ms, and CLS under 0.1. For lead-gen sites, treat sub-3s perceived load as a commercial requirement, not a nice-to-have.
Related resources
SaaS MVP Tech Stack — A Pragmatic Default for 2026
A battle-tested default stack for SaaS MVPs — frontend, backend, auth, data, billing, and observability — with guidance on when to deviate.
GuidesDigital Product Design Principles for Software Companies
Design principles used for premium software interfaces — hierarchy, restraint, motion with purpose, and why agency-style decoration fails product UX.
Newsletter
Product notes, not noise.
Occasional frameworks on portals, SaaS MVPs, and automation. No agency spam.