perf(web): server-only StaticCodeBlock for above-the-fold marketing
All checks were successful
Deploy to Production / deploy (push) Successful in 52s
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user