Design Factor Checklist
Use this checklist before launch and whenever the site "looks better" but gets slower. It focuses on the design decisions that most often break LCP, CLS, and INP.
Above-the-Fold
- One clear LCP candidate (usually a single hero image or hero text)
- Hero image is optimized (WebP/AVIF), responsive, and not lazy-loaded
- Header height is stable (no late bars injected above content)
- No sliders/carousels/video backgrounds in the hero
- No on-load popups/modals
Layout and Structure
- Above-the-fold DOM is shallow (avoid nested section/row/column stacks)
- Images/iframes/ads reserve space (dimensions or
aspect-ratio) - Sticky elements do not change height after load
- Layout uses CSS Grid/Flexbox, not JS-driven layout
- Mobile breakpoints validated (no overflow, no jumpy reflows)
Typography
- 1-2 font families; minimal weights (or variable font)
-
font-display: swapenabled - Only preload fonts required for above-the-fold text
- Fallback stack is explicit and doesn't cause visible jumps
Media and Assets
- Hero asset is discoverable early (avoid CSS background for LCP image)
- Below-the-fold media is lazy-loaded
- Third-party scripts are delayed or removed where safe
- Icon strategy avoids sitewide icon libraries
Verification
- PSI (mobile): LCP < 2.5s, CLS < 0.1, INP < 200ms on key templates
- DevTools -> Rendering: no layout shift regions on load
- DevTools -> Network: expected assets are not loaded sitewide
Do / Don't
| Area | Do | Don't |
|---|---|---|
| Hero | Static hero with one optimized image | Slider with multiple large images |
| Fonts | Self-host WOFF2, preload only what is needed | Load multiple external families + weights |
| Layout | Flat structure, stable header, reserved media space | Deep nesting + late injected banners |
| Motion | Small CSS-only motion | Heavy scroll animation libraries on every page |
| Third-party | Delay chat/marketing until interaction | Run all third-party scripts at first paint |