Lena Fischer·
Rebuilt our marketing hero with this prompt: semantic markup, fluid type, LCP image discipline and zero layout shift. Lighthouse went from 71 to 98 without touching the design.
Rebuilds a landing page hero for LCP, CLS, and accessibility without changing the visual design.
Performance-First Hero Section Rebuild
You are a senior frontend engineer specializing in Core Web Vitals. Rebuild my landing page hero section to be fast and accessible WITHOUT changing how it looks.
Current hero code (HTML/JSX + CSS):
{{hero_code}}
Measured problems: {{cwv_data}} (e.g. LCP 4.1s on the hero image, CLS 0.18 from the headline font swap, Lighthouse 71)
Stack: {{stack}}
Design constraints that must not change: {{design_constraints}}
Rebuild with these requirements:
1. **LCP:** identify the LCP element. If it is the hero image: explicit width/height or aspect-ratio, fetchpriority="high", preload only if it is not discoverable in initial HTML, responsive srcset with sizes matched to the actual rendered widths (show your math for the breakpoints), modern format with fallback. If the LCP is text: eliminate every render-blocker in front of it.
2. **CLS:** reserve space for every late-arriving element. Fonts: size-adjusted fallback via font-display swap plus a metric-compatible fallback stack (show the size-adjust calculation for my font), so the swap is invisible. No layout-affecting animations — transform and opacity only.
3. **Semantics and a11y:** exactly one h1, the hero image gets a real alt or empty alt with reasoning, CTA is a link if it navigates and a button if it acts, visible focus states, decorative elements aria-hidden. Text over image needs a contrast strategy that works with ANY image (overlay or scrim, not hope).
4. **JS discipline:** the hero renders complete without JavaScript. Anything interactive enhances progressively.
Output: the rebuilt code with comments only where a decision is non-obvious, then a before/after table of what changed and which metric each change moves, and a 5-item verification checklist I can run in DevTools.
Ergebnisse
## Rebuilt hero (Next.js 15, design unchanged)
```tsx
<section className="hero">
<div className="hero__copy">
<h1 className="hero__title">Ship your books in minutes, not weekends</h1>
<p className="hero__sub">Bookkeeping that closes itself.</p>
{/* navigates → link, styled as button */}
<a className="cta" href="/signup">Start free</a>
</div>
<Image
src="/hero-desk.avif"
alt="" /* decorative: the copy carries the message */
aria-hidden="true"
width={1280} height={853} /* intrinsic ratio reserved — kills the CLS */
priority /* Next sets fetchpriority=high + preload */
sizes="(min-width: 1024px) 55vw, 100vw"
quality={70}
/>
<div className="hero__scrim" aria-hidden="true" />
</section>
```
```css
/* Metric-compatible fallback: Inter ↔ Arial
size-adjust = Inter avg advance width / Arial ≈ 107% */
@font-face {
font-family: "Inter-fallback";
src: local("Arial");
size-adjust: 107%;
ascent-override: 90%;
}
.hero__title {
font-family: Inter, "Inter-fallback", sans-serif;
font-size: clamp(2rem, 1.2rem + 3.5vw, 3.5rem); /* fluid, no breakpoint jumps */
text-wrap: balance;
}
.hero__scrim { /* contrast works with ANY image */
position: absolute; inset: 0;
background: linear-gradient(90deg, rgb(10 12 16 / .72) 0 45%, transparent 70%);
}
.cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.hero__copy { animation: rise .4s ease-out; } /* transform+opacity only */
}
```
Sizes math: rendered hero image is 55vw on desktop (max 704px @1280 container) and full-bleed on mobile → srcset steps 640/960/1280/1920 cover 1x and 2x for both.
### Before → After
| Change | Was | Now | Metric |
|--------|-----|-----|--------|
| Hero img via CSS background | undiscoverable, loaded at 2.9s | `<Image priority>` in HTML | LCP 4.1s → ~1.6s |
| No dimensions on image | reflow on load | intrinsic ratio reserved | CLS −0.09 |
| Font swap jump | Arial→Inter reflow | size-adjusted fallback | CLS −0.08, swap invisible |
| Headline animated with top/left | layout thrash | transform/opacity + reduced-motion guard | INP/CLS |
| div.onclick CTA | not keyboard reachable | real `<a>` + focus-visible | a11y |
| Text contrast "mostly fine" | 2.7:1 on bright images | scrim guarantees ≥4.5:1 | a11y |
### DevTools verification
1. Performance panel → LCP element should be the `<img>`, discovered in initial HTML (no preload chain gap).
2. Rendering → Layout Shift Regions: reload, hero area must stay clean.
3. Network → block webfonts, reload: headline width shift should be imperceptible.
4. Disable JS entirely: hero renders complete, CTA works.
5. Tab from address bar: CTA focus ring visible on first Tab into content.
Modell: Claude Opus 4.6
4 Likes2 SavesScore: 4
1 Kommentar
Sofia Almeida·
The scrim-over-hope line is real. Every hero I render gets handed to a marketing team who will swap the image without telling anyone.