ISO-25010 time-behaviour is measured by LCP — and Google's Core Web Vitals set the bar at 2.5 seconds. Miss it and you lose search ranking (LCP is a page experience signal), conversion rate (every 100ms of delay costs approximately 1% in revenue for e-commerce), and mobile users on slower connections who bounce before the page is usable. An unoptimized LCP element is typically the hero image or largest heading; when it loads without a preload directive or is lazy-loaded by mistake, the browser discovers it late in the waterfall, adding hundreds of milliseconds before the page looks complete.
Critical because a slow LCP directly degrades Core Web Vitals scores, suppresses search ranking, and correlates with measurable conversion loss at scale.
Add a <link rel="preload"> in <head> for the LCP element — the browser will fetch it at the highest priority before parsing the rest of the document. For Next.js, pass the priority prop to next/image instead:
// src/app/page.tsx — hero image above the fold
<Image src="/images/hero.jpg" alt="Hero" priority width={1200} height={600} />
For plain HTML, include imagesrcset and imagesizes so responsive variants are preloaded at the right size:
<link rel="preload" as="image" href="/images/hero.jpg"
imagesrcset="/images/hero-480.jpg 480w, /images/hero-1200.jpg 1200w"
imagesizes="(max-width: 768px) 100vw, 1200px">
Verify impact in DevTools: the LCP resource must appear at the very start of the waterfall with priority "Highest".
ID: performance-core.loading-resource-priority.lcp-optimized
Severity: critical
What to look for: Count all relevant instances and enumerate each. Before evaluating, extract and quote any relevant configuration or UI text found. Identify the Largest Contentful Paint element (typically a hero image or heading text). Check whether it is preloaded, inline, or served with appropriate cache headers. Look for <link rel="preload"> tags targeting the LCP resource, or inspect image loading patterns to verify the element loads as early as possible.
Pass criteria: The LCP element (typically a large image or heading) has explicit preload directives via <link rel="preload" as="image" href="..."> or similar, OR it is inline in the initial HTML, OR it is served from a CDN with aggressive caching. Project documentation or code comments indicate awareness of LCP optimization. A partial or placeholder implementation does not count as pass. Report the count even on pass.
Fail criteria: The LCP element has no preload directive, is lazy-loaded unnecessarily, or is hosted without CDN caching. Build output or performance logs show LCP exceeds 2.5 seconds.
Skip (N/A) when: The project has no dynamic rendering (static site with static assets only) or no client-side rendering layer.
Detail on fail: Specify the LCP element and why it's slow. Example: "Hero image (2.5 MB) at /images/banner.jpg loaded without preload; no CDN caching configured — measured LCP 4.2s" or "Critical text rendered client-side after JS hydration; preload not applicable"
Remediation: The Largest Contentful Paint element typically appears in the first viewport and contributes significantly to perceived page speed. Preload critical images and ensure they're served with cache headers:
<!-- In your <head> -->
<link rel="preload" as="image" href="/images/hero.jpg" imagesrcset="...sizes="...">
For Next.js, use next/image with priority:
<Image src="/hero.jpg" alt="Hero" priority width={1200} height={600} />