perf(web): server-only StaticCodeBlock for above-the-fold marketing
All checks were successful
Deploy to Production / deploy (push) Successful in 52s

PageSpeed Insights mobile reported LCP element render delay of 2.3s
on the hero — the largest visible element is the build.log <pre> with
"> Generating spec... OK ..." text. TTFB is 0ms (CF cache hit), so the
delay was pure client-side: Lighthouse waited for the JS bundle to
parse and the 'use client' CodeBlock boundary to hydrate before it
considered the element "rendered."

CodeBlock pulls in lucide-react (Copy/Check icons) plus a useState
boundary just for the copy button. Above the fold on marketing, none
of that is needed — the user just needs to see the snippet.

Split:
- New `static-code-block.tsx`: server component, no 'use client',
  no icons, no copy button. Pure SSR markup that paints with the HTML.
- Marketing landing now uses StaticCodeBlock for all three hero
  snippets (prompt.txt / build.log / claude_desktop_config.json).
- Interactive CodeBlock stays in use for dashboard pages where users
  actually want to copy snippets.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Sadjadi
2026-05-26 23:30:41 +02:00
parent 9f1135325c
commit 2267daadd4
2 changed files with 41 additions and 4 deletions

View File

@@ -1,5 +1,5 @@
import { CodeBlock } from '@/components/code-block';
import { JsonLd } from '@/components/json-ld';
import { StaticCodeBlock } from '@/components/static-code-block';
import { FAQ, faqJsonLd } from '@/lib/seo';
import Link from 'next/link';
@@ -134,9 +134,9 @@ export default function Landing() {
<div className="relative min-w-0">
<div className="absolute -inset-px rounded-lg border border-[--color-border-strong]" />
<div className="space-y-3">
<CodeBlock label="prompt.txt" code={PROMPT_EXAMPLE} />
<CodeBlock label="build.log" code={OUTPUT_EXAMPLE} />
<CodeBlock label="claude_desktop_config.json" code={INSTALL_SNIPPET} />
<StaticCodeBlock label="prompt.txt" code={PROMPT_EXAMPLE} />
<StaticCodeBlock label="build.log" code={OUTPUT_EXAMPLE} />
<StaticCodeBlock label="claude_desktop_config.json" code={INSTALL_SNIPPET} />
</div>
</div>
</div>