Every additional 100ms of Largest Contentful Paint degrades conversion rate — Google's own data shows a 1-second LCP delay can reduce conversions by up to 7%. The most common source of above-fold slowness in Next.js marketing pages is a hero image loaded with default lazy behavior (which defers it) and synchronous third-party scripts blocking the render path. Render-blocking analytics, chat, and A/B testing scripts compound the problem because they delay the browser's ability to paint anything the user can interact with. ISO 25010:2011 performance-efficiency directly covers time-behavior under load.
High because above-fold load performance has a direct, measurable impact on conversion rate and is routinely the largest single contributor to poor Core Web Vitals scores on marketing pages.
Prioritize the above-fold hero image and defer non-critical third-party scripts. Two targeted fixes cover the most common cases:
// 1. Add priority to the hero image so the browser fetches it immediately
<Image
src="/hero-image.jpg"
alt="Product screenshot"
width={800}
height={600}
priority
/>
// 2. Defer analytics and chat scripts so they don't block render
<Script
src="https://cdn.analytics.com/script.js"
strategy="afterInteractive"
/>
Also confirm font-display: swap is set in your font configuration (e.g., in src/app/layout.tsx via next/font) so text renders immediately in a fallback font rather than staying invisible during the web font download.
ID: marketing-conversion.conversion-infrastructure.conversion-load-performance
Severity: high
What to look for: Examine the landing page component for patterns that impact initial load time and perceived performance. Check: (1) Images in the hero section — do they use Next.js <Image> component with priority prop for the above-fold hero image? (2) Large JavaScript bundles — check for heavy libraries imported directly in marketing page components that could be lazy-loaded; (3) Third-party scripts — count analytics, chat, A/B testing scripts loaded synchronously in <head> or root layout; (4) Font loading — check for font-display: swap in font configuration to prevent invisible text during load; (5) Check next.config.* for image optimization settings if Next.js is used.
Pass criteria: Count all blocking resources in the document head (synchronous scripts, render-blocking CSS). The above-fold hero image (if any) uses priority loading or eager loading. No more than 3 synchronous third-party scripts in the document head. Font loading does not block render (uses font-display: swap or equivalent). Report: "X blocking resources found in document head."
Fail criteria: Hero section images use default lazy loading (which defers above-fold images unnecessarily). OR more than 3 synchronous blocking scripts in the document head. OR no font-display strategy detected and multiple custom web fonts are loaded.
Skip (N/A) when: The project uses a purely text-based hero (no images) and has no third-party scripts. In this case, skip with note that common load blockers are not present.
Detail on fail: Describe specific findings. Example: "Hero <Image> component missing priority prop — above-fold image will be lazy-loaded, increasing LCP." or "4 synchronous third-party scripts in root layout head (analytics, chat, heatmap, A/B test tool) — blocking render.".
Remediation: Every 100ms of additional load time reduces conversion rates. Focus on what visitors see first:
// Hero image: add priority to load it eagerly
<Image
src="/hero-image.jpg"
alt="Product screenshot"
width={800}
height={600}
priority // Add this for above-fold images
/>
For third-party scripts, defer non-critical ones:
// In Next.js, use Script component with strategy
<Script src="https://cdn.analytics.com/script.js" strategy="afterInteractive" />
For a deeper analysis of Core Web Vitals and load performance, the Page Speed & Load Readiness audit examines bundle size, image optimization, and performance budgets in detail.