# Unlighthouse
> Google Lighthouse for your entire site.
Canonical Origin: https://unlighthouse.dev
## LLM Resources
- [Full Content](https://unlighthouse.dev/llms-full.txt)
Complete page content in markdown format.
- [MCP](https://unlighthouse.dev/mcp)
Model Context Protocol server endpoint for AI agent integration.
## Pages
### Unlighthouse
Source: https://unlighthouse.dev/
Description: Google Lighthouse for your entire site.
h1. **Lighthouse for your **entire site
Crawl every page, run Google Lighthouse audits, get one unified performance report.
$npxunlighthouse--siteexample.com
[**Get Started **](https://unlighthouse.dev/guide/getting-started/installation) [** GitHub **](https://github.com/harlan-zw/unlighthouse)
Node 20+ · MIT licensed · Zero config
localhost:5678
h2. **Why Unlighthouse **
h3. **Parallel Scans **
Threaded workers with opportunistic throttling for fast audits.
h3. **Auto Crawling **
Discovers URLs via robots.txt, sitemap.xml, and internal links.
h3. **Smart Sampling **
Auto-samples dynamic routes to reduce scan time.
h3. **Modern UI **
Search, sort, and re-scan pages in the Vite-powered client.
h3. **SEO Insights **
Titles, meta descriptions, share images, link analysis.
h3. **A11y Summary **
Accessibility audit with contrast issue visualization.
**2.7K**
downloads per day
80K
monthly downloads
4.4K
GitHub stars
h2. **Community Funded **
Unlighthouse is free and open-source thanks to generous community sponsors.
[**Become a sponsor **](https://github.com/sponsors/harlan-zw)
h3. **Top Sponsors **
[**Daniel Roe**](https://roe.dev)
h3. **Gold Sponsors **
[](https://johannschopplich.com) [](https://massivemonster.co) [](https://localazy.com) [](https://smtp.dev)
h3. **Backers **
[](https://itinsights.org) [](https://github.com/mgifford) [](https://github.com/timhanlon) [](https://github.com/Idrinth) [](https://github.com/milos018) [](https://github.com/aussieboi) [](https://ducrot.de) [](https://github.com/just-maik) [](https://fume.app) [](https://github.com/jpsc) [](https://froggly.pl) [](https://reshepe.dev) [](https://generateads.ai) [](https://adkit.so)
---
### Performance Tools - Lighthouse Calculators & Analyzers · Unlighthouse
Source: https://unlighthouse.dev/tools
Description: Free web performance tools: Lighthouse score calculator, Core Web Vitals analyzers, and more.
h1. **Performance **Tools
Free interactive tools to understand and improve your Lighthouse scores.
[
**Bulk PageSpeed Test**
Test up to 10 URLs at once with PageSpeed Insights. Get performance scores for multiple pages in one batch.**Batch Testing****Performance****Core Web Vitals**](https://unlighthouse.dev/tools/bulk-pagespeed) [
**Core Web Vitals Checker**
Check if your page passes Google's Core Web Vitals. Test LCP, CLS, and INP with lab and real user data.**LCP****CLS****INP****Core Web Vitals**](https://unlighthouse.dev/tools/cwv-checker) [
**Core Web Vitals History**
Track real user performance over 25 weeks. See how your LCP, CLS, and INP trends change over time with CrUX data.**Field Data****Trends****CrUX**](https://unlighthouse.dev/tools/cwv-history) [
**TTFB Checker**
Test Time to First Byte with real Chrome user data. Compare field vs lab TTFB and track server response trends.**TTFB****Server Response****CrUX**](https://unlighthouse.dev/tools/ttfb-checker) [
**CWV Compare**
Compare Core Web Vitals across multiple websites. Benchmark your site against competitors with real Chrome user data.**Competitor Analysis****CrUX****Benchmarking**](https://unlighthouse.dev/tools/cwv-compare) [
**Lighthouse Report Viewer**
Upload your Lighthouse JSON report to visualize scores, metrics, and audits interactively.**All Categories****Audits****Metrics**](https://unlighthouse.dev/tools/lighthouse-report-viewer) [
**Lighthouse Score Calculator**
Calculate your performance score interactively. Adjust metrics to see how they impact your overall Lighthouse score.**FCP****SI****LCP****TBT****CLS**](https://unlighthouse.dev/tools/lighthouse-score-calculator) [
**LCP Element Finder**
Identify which element is your Largest Contentful Paint and get actionable recommendations to improve it.**LCP****Core Web Vital**](https://unlighthouse.dev/tools/lcp-finder) [
**INP Analyzer**
Analyze Interaction to Next Paint issues. Find slow event handlers and optimize responsiveness.**INP****Core Web Vital**](https://unlighthouse.dev/tools/inp-analyzer) [
**CLS Debugger**
Debug Cumulative Layout Shift issues. Identify elements causing unexpected layout shifts.**CLS****Core Web Vital**](https://unlighthouse.dev/tools/cls-debugger) [
**PageSpeed Insights Performance**
Get detailed PageSpeed Insights performance data with field and lab metrics.**Performance****Field Data**](https://unlighthouse.dev/tools/pagespeed-insights-performance)
---
### Bulk PageSpeed Insights Test - Test Multiple URLs Free · Unlighthouse
Source: https://unlighthouse.dev/tools/bulk-pagespeed
Description: Free bulk PageSpeed testing tool. Test up to 10 URLs at once with the PageSpeed Insights API. Get Lighthouse scores and Core Web Vitals for multiple pages.
h1. **Bulk PageSpeed Test**
Test up to 10 URLs at once with Google's PageSpeed Insights API. Get Lighthouse performance scores, Core Web Vitals, and optimization insights for multiple pages simultaneously.
**Enter URLs **(one per line, max 10)
0/10 URLs
Device:
**01**
h3. **What is bulk PageSpeed testing?**
Bulk PageSpeed testing lets you analyze multiple URLs simultaneously using the PageSpeed Insights API. Instead of testing pages one at a time, you can submit up to 10 URLs and get Lighthouse performance scores, Core Web Vitals, and audit results for all pages at once.
**02**
h3. **How do I use the PageSpeed Insights API for bulk testing?**
The PageSpeed Insights API (pagespeedonline/v5/runpagespeed) accepts a URL parameter and returns Lighthouse results as JSON. This tool handles the API calls for you, but for programmatic access you can call the API directly with your own API key for higher rate limits.
**03**
h3. **Is there a limit to bulk PageSpeed testing?**
This free tool allows testing up to 10 URLs at once. The PageSpeed Insights API has rate limits (400 requests per day for anonymous users, 25,000 with an API key). For scanning entire sites with hundreds of pages, use Unlighthouse CLI instead.
**04**
h3. **What metrics does bulk PageSpeed testing show?**
Each URL gets a full Lighthouse audit including: Performance score (0-100), Core Web Vitals (LCP, CLS, TBT/INP), First Contentful Paint, Speed Index, and a pass/fail summary. Results help identify which pages need optimization.
**05**
h3. **When should I use bulk testing vs full site scanning?**
Use bulk testing for quick checks of specific pages like landing pages, product pages, or comparing competitor URLs. For comprehensive site-wide analysis with all pages automatically discovered, use Unlighthouse CLI which crawls your sitemap and tests every page.
h3. **Need to scan your entire site? **
Unlighthouse automatically discovers and audits hundreds of pages on your site. Get comprehensive performance insights with a single command.
$ npx unlighthouse --site example.com
[**Try Unlighthouse CLI (Free) **](https://unlighthouse.dev/guide/getting-started) [** Schedule with Cloud **](https://unlighthouse.dev/cloud)
---
### Core Web Vitals Test - Free CWV Checker · Unlighthouse
Source: https://unlighthouse.dev/tools/cwv-checker
Description: Check if your page passes Google's Core Web Vitals. Test LCP, CLS, and INP with lab and real user data. Free tool with actionable recommendations.
h1. **Core Web Vitals **Test
Check if your page passes Google's Core Web Vitals with lab and real user data.
**Core Web Vitals Assessment**
Enter a URL to check Core Web Vitals
**01**
h3. **What are Core Web Vitals?**
Core Web Vitals are three metrics Google uses to measure user experience: LCP (loading speed), CLS (visual stability), and INP (interactivity). They are a confirmed ranking factor in Google Search.
**02**
h3. **What is a good Core Web Vitals score?**
Good scores are: LCP under 2.5 seconds, CLS under 0.1, and INP under 200 milliseconds. To pass Core Web Vitals, at least 75% of page loads must meet the "good" threshold for all three metrics.
**03**
h3. **What's the difference between Lab and Field data?**
Lab data is collected in a controlled environment (Lighthouse). Field data is from real users via the Chrome User Experience Report (CrUX). Field data is what Google uses for ranking, but lab data helps diagnose issues.
**04**
h3. **Do Core Web Vitals affect SEO?**
Yes. Core Web Vitals are a confirmed Google ranking factor as part of page experience signals. Pages that pass CWV may have a ranking advantage over those that don't, especially for competitive queries.
h3. **Optimize Your Core Web Vitals **
[**Fix LCP **](https://unlighthouse.dev/learn-lighthouse/lcp) [** Fix CLS **](https://unlighthouse.dev/learn-lighthouse/cls) [** Fix INP **](https://unlighthouse.dev/learn-lighthouse/inp) [** Full Guide **](https://unlighthouse.dev/learn-lighthouse/core-web-vitals)
---
### Core Web Vitals History - Track Performance Over Time · Unlighthouse
Source: https://unlighthouse.dev/tools/cwv-history
Description: Free CrUX history viewer. Track 25 weeks of LCP, CLS, and INP trends from real Chrome users. Monitor Core Web Vitals changes over time.
h1. **Core Web Vitals **History
Track real user performance over 25 weeks with Chrome UX Report data.
**CrUX Historical Data**
Enter a domain to view CrUX history
Tracks real Chrome user data over 25 weeks
**01**
h3. **What is Core Web Vitals history data?**
CrUX (Chrome User Experience Report) stores 25 weeks of real user performance data for sites with sufficient traffic. This historical data shows how your Core Web Vitals (LCP, CLS, INP) have changed over time, helping you track improvement or detect regressions.
**02**
h3. **Where does this historical performance data come from?**
Historical data comes from CrUX, Google's dataset of real Chrome user experiences. Google collects anonymized performance metrics from Chrome users who have opted in. The data represents the 75th percentile (p75) of real user experiences over 28-day rolling periods.
**03**
h3. **Why don't I see historical data for my site?**
CrUX only includes sites with sufficient traffic from Chrome users. New sites, low-traffic pages, or sites visited primarily by non-Chrome browsers may not have data. Origin-level data aggregates all pages and requires less traffic than URL-specific data.
**04**
h3. **What can I learn from Core Web Vitals trends?**
Trends help you: correlate performance changes with deployments, detect gradual degradation before users notice, measure the impact of optimizations over time, compare mobile vs desktop performance, and identify seasonal patterns affecting user experience.
**05**
h3. **How often is CrUX historical data updated?**
CrUX data is updated weekly with a new 28-day rolling window. Each data point represents the 75th percentile of user experiences during that collection period. This means changes you make today will start showing in the data within 1-4 weeks.
---
### Learn Google Lighthouse & Core Web Vitals · Unlighthouse
Source: https://unlighthouse.dev/learn-lighthouse
Description: Guides and tutorials for improving your site's Core Web Vitals and performance. Master LCP, CLS, and INP with actionable fixes.
h1. **Learn Google Lighthouse**
Guides and tutorials for improving your site's Core Web Vitals and performance. All guides include authoritative citations from Google and real-world statistics.
h2. **Core Web Vitals **
Core Web Vitals are [Google's ranking factor](https://developers.google.com/search/docs/appearance/core-web-vitals) for measuring user experience. Only [48% of mobile sites](https://almanac.httparchive.org/en/2024/performance) currently pass all three metrics.
[**59%** mobile pass rate
**Largest Contentful Paint (LCP)**
Improve loading performance. Only 59% of mobile sites pass.](https://unlighthouse.dev/learn-lighthouse/lcp) [**79%** mobile pass rate
**Cumulative Layout Shift (CLS)**
Eliminate layout shifts. 79% of mobile sites pass.](https://unlighthouse.dev/learn-lighthouse/cls) [**New** replaced FID
**Interaction to Next Paint (INP)**
Make interactions responsive. Replaced FID in March 2024.](https://unlighthouse.dev/learn-lighthouse/inp)
h2. **Additional Guides **
[
**Core Web Vitals Overview**
What they measure, why they matter, and how to test them.](https://unlighthouse.dev/learn-lighthouse/core-web-vitals) [
**Bulk Lighthouse Testing**
Test every page, not just the homepage.](https://unlighthouse.dev/learn-lighthouse/bulk-lighthouse-testing)
h3. **Test Your Entire Site **
Most tools only test one page at a time. Unlighthouse scans your entire site and shows scores for every page.
[**Get Started **](https://unlighthouse.dev/guide/getting-started/installation)
---
### Lighthouse Score Calculator - How Performance Scores Work · Unlighthouse
Source: https://unlighthouse.dev/tools/lighthouse-score-calculator
Description: Interactive Lighthouse performance score calculator. Understand how FCP, LCP, TBT, CLS, and Speed Index weights and thresholds determine your score.
h1. **Lighthouse Score **Calculator
See exactly how each metric contributes to your performance score.
**Lighthouse v10+ Scoring**
**82**
**First Contentful Paint**
1.8s**82**
0msTime until first text or image is painted9.0s
**Speed Index**
3.4s**82**
0msHow quickly content visually populates17.4s
**Largest Contentful Paint**** CWV **
2.5s**82**
0msTime until largest content element is visible12.0s
**Total Blocking Time**
200ms**82**
0msSum of blocking time for long tasks1.8s
**Cumulative Layout Shift**** CWV **
0.10**82**
0.00Movement of visible elements during load1.00
**FCP** +8
**SI** +8
**LCP** +20
**TBT** +25
**CLS** +20
=
**82**/ 100
Share:Loading...
h2. **How Lighthouse Calculates Your Performance Score **
Lighthouse calculates your performance score using a **weighted average** of five key metrics. Each metric is scored from 0-100 using a [log-normal distribution](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring) based on real-world performance data from the [HTTP Archive](https://httparchive.org/).
The scoring algorithm converts raw metric values (like milliseconds or unitless shift scores) into a 0-100 score using statistical curves. A metric value at the **10th percentile** of all sites scores 90 (good), while the **median** scores 50. This means your score reflects how your site compares to others on the web.
h3. **v10+ Score Weights **
**TBT**
30%
**LCP****CWV**
25%
**CLS****CWV**
25%
**FCP**
10%
**SI**
10%
**80%** of your score comes from TBT, LCP, and CLS.
h3. **The Log-Normal Scoring Algorithm **
Lighthouse doesn't use simple linear scoring. Instead, it applies a **log-normal distribution** to convert raw metric values into scores. This statistical approach means:
- **Diminishing returns** — Improving from 95 to 100 requires more effort than 50 to 55
- **Based on real data** — Curves calibrated against millions of real websites
- **Percentile-based** — Score of 90 means better than 90% of sites
Each metric has two key control points: the **p10 value** (scores 90) and the **median** (scores 50).
**LCP Scoring Curve (Example) **
100
90
50
0
0s
**2.5s**
**4.0s**
8s
**p10 = 90**
**Score**
**Metric Value →**
Good Needs Work Poor
Source: [Chrome Developers - Lighthouse Performance Scoring](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring)
h3. **Core Web Vitals **
Google's essential metrics for page experience ranking
Core Web Vitals are Google's official metrics that affect your search rankings. As of March 2024, they consist of **LCP**, **CLS**, and **INP** (which replaced FID). To pass, 75% of page visits must meet the "good" threshold for all three.
**LCP****25%**
h4. **Largest Contentful Paint **
Time for the largest visible element to render—when users perceive the page as "loaded."
**Thresholds **
0s**≤2.5s**4.0s6s+
**What affects LCP **
[→ Slow server response](https://unlighthouse.dev/learn-lighthouse/lcp/slow-server-response) [→ Render-blocking resources](https://unlighthouse.dev/learn-lighthouse/lcp/render-blocking-resources) [→ Large unoptimized images](https://unlighthouse.dev/learn-lighthouse/lcp/large-images) [→ Client-side rendering](https://unlighthouse.dev/learn-lighthouse/lcp/client-side-rendering)
[**Complete LCP Guide **](https://unlighthouse.dev/learn-lighthouse/lcp)
**CLS****25%**
h4. **Cumulative Layout Shift **
Visual stability—how much elements move unexpectedly as the page loads.
**Thresholds **
0**≤0.1**0.250.5+
**What affects CLS **
[→ Unsized images](https://unlighthouse.dev/learn-lighthouse/cls/unsized-images) [→ Ads/embeds/iframes](https://unlighthouse.dev/learn-lighthouse/cls/ads-embeds-iframes) [→ Dynamic content injection](https://unlighthouse.dev/learn-lighthouse/cls/dynamic-content-injection) [→ Web fonts causing FOIT](https://unlighthouse.dev/learn-lighthouse/cls/web-fonts-causing-foit)
[**Complete CLS Guide **](https://unlighthouse.dev/learn-lighthouse/cls)
**INP****via TBT**
h4. **Interaction to Next Paint **
Responsiveness—delay between user interactions and visual response. Lighthouse uses TBT as a proxy.
**Thresholds **
0ms**≤200ms**500ms800ms+
**What affects INP **
[→ Long-running JavaScript](https://unlighthouse.dev/learn-lighthouse/inp/long-running-javascript) [→ Event handler delays](https://unlighthouse.dev/learn-lighthouse/inp/event-handler-delays) [→ Large DOM size](https://unlighthouse.dev/learn-lighthouse/inp/dom-size) [→ Third-party scripts](https://unlighthouse.dev/learn-lighthouse/inp/third-party-scripts)
[**Complete INP Guide **](https://unlighthouse.dev/learn-lighthouse/inp)
h3. **Other Performance Metrics **
Additional metrics that affect your Lighthouse score
Beyond Core Web Vitals, Lighthouse measures additional metrics. **TBT carries the highest weight (30%)** because it directly correlates with how responsive your page feels.
**TBT****30%**
**Total Blocking Time **
Main thread blocking time >50ms. Lab proxy for INP.
0≤200ms600ms1s+
**FCP****10%**
**First Contentful Paint **
First text or image rendered.
0≤1.8s3s5s+
**SI****10%**
**Speed Index **
How quickly visible content is populated.
0≤3.4s5.8s10s+
**TTFB****diagnostic**
**Time to First Byte **
Server response time—not scored but delays all metrics.
0≤200ms600ms1s+
h3. **Understanding Score Thresholds **
Lighthouse assigns color-coded ratings based on your final weighted score.
**90+ **
**Good **
Performs well for most users
**50-89 **
**Needs Work **
Some users may experience delays
**0-49 **
**Poor **
Most users will have issues
**01**
h3. **How does Lighthouse calculate the performance score?**
Lighthouse calculates performance score as a weighted average of six metrics: First Contentful Paint (10%), Speed Index (10%), Largest Contentful Paint (25%), Total Blocking Time (30%), and Cumulative Layout Shift (25%). Each metric is scored 0-100 using log-normal curves based on real-world data from HTTPArchive.
**02**
h3. **Why do my Lighthouse scores vary between runs?**
Lighthouse scores can vary 5-10 points between runs due to: network conditions, server response time variations, third-party script loading, background processes on your device, and variability in JavaScript execution. Run multiple tests and use the median score for accuracy.
**03**
h3. **What is a good Lighthouse performance score?**
A score of 90-100 is considered good (green), 50-89 needs improvement (orange), and 0-49 is poor (red). Focus on reaching 90+ but don't obsess over perfect 100—the last few points have diminishing returns and normal variance makes it impractical.
**04**
h3. **Which metrics have the biggest impact on Lighthouse score?**
Total Blocking Time (30%) and Largest Contentful Paint (25%) together account for 55% of your score. CLS adds another 25%. To improve your score quickly, focus on reducing JavaScript execution time (TBT) and optimizing your largest above-the-fold element (LCP).
**05**
h3. **Why is my PageSpeed Insights score different from Chrome DevTools?**
PageSpeed Insights tests from Google's servers with a simulated mobile device, while Chrome DevTools uses your local machine and network. PSI also shows field data from real Chrome users (CrUX) which reflects actual user experience and may differ significantly from lab results.
h3. **Test Your Entire Site **
Your homepage might score 100, but what about the rest? Scan every page to find issues site-wide.
[**Get Started **](https://unlighthouse.dev/guide/getting-started/installation) [**Learn more about Core Web Vitals **](https://unlighthouse.dev/learn-lighthouse/core-web-vitals)
---
### INP Analyzer - Test Interaction to Next Paint · Unlighthouse
Source: https://unlighthouse.dev/tools/inp-analyzer
Description: Free INP testing tool. Analyze your Interaction to Next Paint score, find long tasks blocking the main thread, and improve responsiveness.
h1. **INP **Analyzer
Find what's blocking your main thread and slowing down interactions.
**INP Analysis****Core Web Vital**
h2. **What is Interaction to Next Paint? **
INP measures how quickly your page responds to user interactions like clicks, taps, and keyboard input. It captures the **worst interaction latency** during a page visit, reporting when the browser finally paints a response. Google replaced FID with INP as a [Core Web Vital](https://web.dev/vitals/) in March 2024.
Since INP requires real user interactions, lab tools like Lighthouse use **Total Blocking Time (TBT)** as a proxy. TBT measures how long the main thread was blocked by long tasks during page load—a strong predictor of poor INP.
h3. **INP Timeline **
Click
Processing
**Paint **
Good INP**≤200ms**
h2. **Common Causes of Poor INP **
h3. **Long Tasks **
JavaScript executing for >50ms blocks the main thread. Break up work with `requestIdleCallback` or `scheduler.yield()`.
h3. **Third-Party Scripts **
Analytics, chat widgets, and ads often block the main thread. Load them async or use Partytown to run in a web worker.
h3. **Hydration **
Framework hydration can block interactions. Use progressive hydration, islands architecture, or server components.
h3. **Large DOM **
Too many DOM nodes slow down style calculations and layout. Keep nodes under 1,500 and virtualize long lists.
h3. **Layout Thrashing **
Reading and writing layout properties in a loop forces synchronous reflows. Batch DOM reads and writes.
h3. **Bundle Size **
Large JavaScript bundles take longer to parse and execute. Use code splitting, tree shaking, and lazy loading.
**01**
h3. **What is Interaction to Next Paint (INP)?**
Interaction to Next Paint (INP) is a Core Web Vital that measures responsiveness. It tracks the delay between user interactions (clicks, taps, key presses) and the visual feedback. A good INP score is 200 milliseconds or less, indicating a responsive experience.
**02**
h3. **How is INP different from First Input Delay (FID)?**
INP replaced FID as a Core Web Vital in March 2024. While FID only measured the first interaction, INP measures ALL interactions throughout the page lifecycle and reports the worst one. This makes INP a more comprehensive measure of real-world interactivity.
**03**
h3. **What causes poor INP scores?**
Poor INP is typically caused by: long JavaScript tasks blocking the main thread, heavy third-party scripts (analytics, ads, widgets), unoptimized event handlers, layout thrashing from DOM manipulation, and large JavaScript bundles that take time to parse and execute.
**04**
h3. **How do I improve my INP score?**
To improve INP: break long tasks into smaller chunks using yield patterns, defer non-critical JavaScript, use code splitting to reduce bundle size, optimize event handlers to avoid forced layouts, move heavy computation to web workers, and audit third-party scripts for performance impact.
**05**
h3. **Why does lab data show TBT instead of INP?**
Total Blocking Time (TBT) is used as a lab proxy for INP because true INP requires real user interactions. TBT measures time spent on long tasks (>50ms) during page load, which correlates with interactivity. Field data from real users provides actual INP measurements.
h3. **Related Tools **
[**LCP Finder **](https://unlighthouse.dev/tools/lcp-finder) [** Score Calculator **](https://unlighthouse.dev/tools/lighthouse-score-calculator) [** INP Optimization Guide **](https://unlighthouse.dev/learn-lighthouse/inp) [** INP Glossary **](https://unlighthouse.dev/glossary/inp)
---
### LCP Element Finder - Identify Your Largest Contentful Paint · Unlighthouse
Source: https://unlighthouse.dev/tools/lcp-finder
Description: Free LCP test tool. Find your Largest Contentful Paint element, see timing breakdowns, and get actionable recommendations to improve loading speed.
h1. **LCP Element **Finder
Identify which element is your Largest Contentful Paint and get actionable fixes.
**LCP Analysis****Core Web Vital**
h2. **What is Largest Contentful Paint? **
LCP measures how long it takes for the **largest visible content element** to render on screen. This is typically a hero image, headline, or large text block. Google uses LCP as one of the three [Core Web Vitals](https://web.dev/vitals/) that directly affect search rankings.
A good LCP score means users perceive your page as **loaded quickly**—even if other content is still loading in the background. The LCP element changes as the page loads, so the final LCP is measured when the largest element stops changing.
h3. **LCP Timeline **
0ms
Navigation
~800ms
FCP
**2.5s **
**LCP ✓ **
LCP marks when the **largest element** finishes rendering.
h2. **LCP Phases Breakdown **
See how time is spent loading your largest element
Slowed 4× for clarity
Total: 2500ms
0msLCP
**TTFB**
**Load Delay**
**Load Time**
**Render Delay**
**Click Play to start**
TTFB800ms
Load Delay400ms
Load Time600ms
Render Delay700ms
h3. **Time to First Byte**
Phase 1 of 4
**800ms**
25%
Time waiting for the server to respond with the first byte of HTML.
**How to optimize **
- Use a CDN to serve content closer to users
- Enable server-side caching
h3. **Resource Load Delay**
Phase 2 of 4
**400ms**
15%
Time between TTFB and when the browser starts loading the LCP resource.
**How to optimize **
- Add for LCP image
- Avoid lazy-loading the LCP image
h3. **Resource Load Duration**
Phase 3 of 4
**600ms**
25%
Time spent downloading the LCP image or video resource.
**How to optimize **
- Compress images with WebP or AVIF
- Use responsive images with srcset
h3. **Element Render Delay**
Phase 4 of 4
**700ms**
35%
Time from resource loaded (or TTFB for text) until the element is painted.
**How to optimize **
- Reduce JavaScript bundle size
- Use font-display: optional for web fonts
Based on [DebugBear](https://www.debugbear.com/docs/lcp-by-phase) and [web.dev](https://web.dev/articles/optimize-lcp)
h3. **LCP Scoring Thresholds **
Google's LCP thresholds are based on **real user data** from millions of websites. To pass Core Web Vitals, **75% of page visits** must have an LCP under 2.5 seconds.
**≤2.5s **
**Good **
**2.5-4s **
**Needs Work **
**>4s **
**Poor **
**LCP Score Distribution **
0s
**2.5s**
**4.0s**
8s
**Good**
**Meh**
**Poor**
Source: [web.dev/lcp](https://web.dev/lcp/)
h3. **Common LCP Elements **
What typically becomes the LCP element
**Hero Images**
Large banner or header images above the fold
**H1 Headlines**
Large text headings on text-heavy pages
**Background Images**
CSS background-image on large containers
**Video Posters**
Poster images for