Why does lCP under 1.8 seconds on mobile for every template matter?

LCP is the Core Web Vital most often failed and the one most visible to a visitor. It is also the one a marketing page can control almost entirely at build time. Verify it: Run `npx lighthouse https://example.com --preset=perf --form-factor=mobile --screenEmulation.mobile --only-categories=performance --output=json | jq '.audits["largest-contentful-paint"].numericValue'`.

Why does route CSS is inlined so it does not block first paint matter?

An external stylesheet is a render-blocking round trip before anything paints. Inlining the route's CSS removes it and is worth roughly 200ms on a cold mobile connection. Verify it: Run `curl -s https://example.com/ | grep -c '<link rel="stylesheet"'` and confirm 0, then confirm a style element is present in the head.

Why does fonts are self-hosted with display swap and subsetting, and zero external font requests matter?

A Google Fonts link costs a DNS lookup, a TLS handshake and a render-blocking request on the critical path, before any character appears. Verify it: Run `curl -s https://example.com/ | grep -E 'fonts.googleapis|fonts.gstatic'` and confirm the result is empty.

Why does images served as AVIF or WebP with correct sizes and a long cache TTL matter?

AVIF is typically half the bytes of a comparable JPEG. Serving a 1600px image into a 375px viewport is the most common single cause of a failed mobile LCP. Verify it: Load the page in DevTools, filter to images, and confirm the content-type is image/avif or image/webp and no image is served larger than twice its displayed width.

Why does non-critical interactive components are code-split matter?

An exit-intent modal that ships in the main bundle costs every visitor the bytes for a component most of them never see. Verify it: Check the build output for separate chunks for the modal, any validator and any chart, and confirm they are not in the shared entry chunk.

Why does animation libraries are imported through their minimal namespace on marketing pages matter?

The full Framer Motion import is large enough on its own to cost a page its performance score. The lazy namespace ships a fraction of it. Verify it: Run `grep -rn 'from "framer-motion"' components app | grep -v '\bm\b'` and confirm no marketing component imports the full motion namespace.

Why does static assets carry a one-year immutable cache header, with versioned URLs matter?

Immutable caching removes the revalidation request entirely. It is only safe if every asset URL changes when its content does, which is why the version query is part of the same check. Verify it: Run `curl -sI https://example.com/icon-192.png | grep -i cache-control` and confirm max-age=31536000 and immutable.

Why does no layout shift from the sticky CTA, the cookie banner or web fonts matter?

These three are the most common CLS sources on a marketing site because each one appears after first paint by design. Verify it: Run Lighthouse mobile and confirm cumulative-layout-shift is under 0.1, then confirm the banner reserves its space or is fixed-position.

Performance

Performance covers 9 of the SEO for Soloschecklist's implementation checks. Core Web Vitals as a ranking input and, more importantly, as the thing that decides whether a mobile visitor stays.

Checks in group

Free snippets

3.2

Average impact

of 5

Position

of 12 groups

0 of 9

Saved in this browser

Sync across devices

Performance

Core Web Vitals as a ranking input and, more importantly, as the thing that decides whether a mobile visitor stays.

LCP under 1.8 seconds on mobile for every template4/M
Why it matters
LCP is the Core Web Vital most often failed and the one most visible to a visitor. It is also the one a marketing page can control almost entirely at build time.
How to verify
npx lighthouse https://example.com --preset=perf --form-factor=mobile --screenEmulation.mobile --only-categories=performance --output=json | jq '.audits["largest-contentful-paint"].numericValue'
.
perf-lcp-under-1800Impact 4/5MediumFreeRead the chapter
Route CSS is inlined so it does not block first paint3/S
Why it matters
An external stylesheet is a render-blocking round trip before anything paints. Inlining the route's CSS removes it and is worth roughly 200ms on a cold mobile connection.
How to verify
curl -s https://example.com/ | grep -c '<link rel="stylesheet"'
Then confirm 0, then confirm a style element is present in the head.
Implementation snippet
The tested implementation from kit/config/next.config.ts, plus the test that fails if it regresses.
Unlock with the Code Kit$14930 day refund, no questions.
perf-no-render-blocking-cssImpact 3/5SmallRead the chapter
Fonts are self-hosted with display swap and subsetting, and zero external font requests3/S
Why it matters
A Google Fonts link costs a DNS lookup, a TLS handshake and a render-blocking request on the critical path, before any character appears.
How to verify
curl -s https://example.com/ | grep -E 'fonts.googleapis|fonts.gstatic'
Then confirm the result is empty.
perf-fonts-self-hostedImpact 3/5SmallFreeRead the chapter
Images served as AVIF or WebP with correct sizes and a long cache TTL4/M
Why it matters
AVIF is typically half the bytes of a comparable JPEG. Serving a 1600px image into a 375px viewport is the most common single cause of a failed mobile LCP.
How to verify
Load the page in DevTools, filter to images, and confirm the content-type is image/avif or image/webp and no image is served larger than twice its displayed width.
Implementation snippet
The tested implementation from kit/config/next.config.ts, plus the test that fails if it regresses.
Unlock with the Code Kit$14930 day refund, no questions.
perf-images-modern-formatsImpact 4/5MediumFreeRead the chapter
Non-critical interactive components are code-split3/M
Why it matters
An exit-intent modal that ships in the main bundle costs every visitor the bytes for a component most of them never see.
How to verify
Check the build output for separate chunks for the modal, any validator and any chart, and confirm they are not in the shared entry chunk.
perf-code-split-noncriticalImpact 3/5MediumRead the chapter
Animation libraries are imported through their minimal namespace on marketing pages3/S
Why it matters
The full Framer Motion import is large enough on its own to cost a page its performance score. The lazy namespace ships a fraction of it.
How to verify
grep -rn 'from "framer-motion"' components app | grep -v '\bm\b'
Then confirm no marketing component imports the full motion namespace.
perf-animation-namespaceImpact 3/5SmallRead the chapter
Static assets carry a one-year immutable cache header, with versioned URLs2/S
Why it matters
Immutable caching removes the revalidation request entirely. It is only safe if every asset URL changes when its content does, which is why the version query is part of the same check.
How to verify
curl -sI https://example.com/icon-192.png | grep -i cache-control
Then confirm max-age=31536000 and immutable.
Implementation snippet
The tested implementation from kit/config/headers.ts, plus the test that fails if it regresses.
Unlock with the Code Kit$14930 day refund, no questions.
perf-immutable-assetsImpact 2/5SmallRead the chapter
No layout shift from the sticky CTA, the cookie banner or web fonts3/M
Why it matters
These three are the most common CLS sources on a marketing site because each one appears after first paint by design.
How to verify
Run Lighthouse mobile and confirm cumulative-layout-shift is under 0.1, then confirm the banner reserves its space or is fixed-position.
perf-no-cls-from-chromeImpact 3/5MediumRead the chapter
Every marketing and programmatic page is prerendered, so a database outage cannot take down the funnel4/M
Why it matters
If the sales page needs the database to render, an outage stops revenue rather than degrading a feature. Static-first makes the funnel independent of the app.
How to verify
Stop the database, request the landing page and the pricing page, and confirm both still return 200 with full content.
perf-static-firstImpact 4/5MediumRead the chapter