lightest.app

Google Lighthouse is an open-source automated auditing tool that loads a page in a real (headless) browser and scores it across five categories: Performance, Accessibility, Best Practices, SEO, and PWA. You run it from Chrome DevTools, the command line, or through PageSpeed Insights, and you get a report in roughly under a minute. It is most useful as a single-page diagnostic: it tells you what is slow or broken on that URL and what to change. It is not a site-wide crawler, so if you need to audit many pages at once, pair it with a broader audit platform.

Where Lighthouse runs

All three use the same underlying audit engine, so the category list and metric definitions are consistent. What differs is the environment and whether you get real-user data alongside the lab run.

The five categories

• Performance — how fast the page renders and how stable it is, scored from lab metrics.
• Accessibility — automated checks against WCAG rules: color contrast, alt text, form labels, heading and landmark structure, ARIA roles, focus order.
• Best Practices — general web hygiene: HTTPS, safe libraries, correct image aspect ratios, console errors.
• SEO — basic on-page signals: title, meta description, crawlability, legible font sizes, tap target spacing.
• PWA — installability and offline behavior. Only relevant if you're building a progressive web app; most sites can ignore it.

How the Performance score is built

The Performance number is a weighted blend of lab metrics, not a direct measurement of "speed." The core ones:

• FCP (First Contentful Paint) — when the first text or image appears.
• LCP (Largest Contentful Paint) — when the main content element finishes rendering. Usually the heaviest-weighted metric.
• TBT (Total Blocking Time) — how long the main thread is blocked by long tasks, which delays interactivity.
• CLS (Cumulative Layout Shift) — how much visible content jumps around during load.
• Speed Index — how quickly content is visually populated.

Each metric is compared against Google's thresholds and mapped to a 0–100 sub-score, then the sub-scores are combined with fixed weights. That's why two pages with the same LCP can still score differently — TBT or CLS can drag one down.

Reading the report and prioritizing fixes

Work top-down by impact, not by the order audits are listed:

1. Start with the metric that scored worst. If LCP is red, fix the largest element (usually a hero image or heading). If TBT is red, look for long JavaScript tasks.
2. Read the "Opportunities" section. These are estimated savings — e.g. "Properly size images," "Eliminate render-blocking resources," "Reduce unused JavaScript." Each one links to the exact elements involved.
3. Check "Diagnostics" for context the opportunities don't cover, like DOM size or main-thread work breakdown.
4. Fix accessibility and SEO items in the same pass. They're usually cheap: missing alt text, low contrast, a missing meta description.

The report tells you what failed and points at the elements; it does not rewrite your code. Treat each failing audit as a task with a specific target.

Why scores vary between runs

Lighthouse is a lab tool, so results depend on the run conditions:

• Throttling — default mobile emulation simulates a slow 4G connection and a mid-tier CPU. Change it and the score changes.
• Third-party scripts — ads, analytics, and A/B tools load inconsistently and can swing TBT.
• Server response time — a slow backend on one run inflates FCP and LCP.
• Browser extensions and local state — DevTools runs can be affected by what's loaded in your session.

To get consistent numbers: run the CLI with a fixed config, run several times and compare the median, and test in a clean profile or CI environment rather than your daily browser.

When Lighthouse isn't enough

Lighthouse audits one URL per run. It won't tell you that 40 of your 500 pages share the same broken template, and it doesn't track whether a fix held after the next deploy. For that you need a tool that crawls the whole site and re-checks over time.

For example, a platform like Repolog runs a headless browser against your page and executes 60+ checks in one pass — SEO, Core Web Vitals pulled from Lighthouse (FCP, LCP, TBT, CLS, Speed Index on mobile emulation), accessibility via axe-core against the WCAG 2 rule set, 19 read-only security checks, and AI-readiness checks (robots.txt access for GPTBot, ClaudeBot, PerplexityBot and Google-Extended, JSON-LD structured data, sitemap.xml and llms.txt presence). The practical difference is scope and workflow: Lighthouse gives you a deep single-page lab report; a multi-page audit tool gives you coverage and a ranked fix list across the site.

A sensible split: use Lighthouse while you're actively fixing a specific page, and a site-wide audit when you need to know which pages to fix first or confirm a fix stuck.

Frame-by-frame comparison means capturing a visual filmstrip of each page's load on a shared timeline, then aligning the frames so you can see which page renders first, which one shows meaningful content sooner, and which one stalls. It works best when you compare pages that serve the same purpose (two product pages, two news articles, your page versus a competitor's) under the same network and device conditions. A single Lighthouse score tells you that a page is slow; a shared-timeline filmstrip shows you where the time goes.

Why a shared timeline beats a single score

A performance score compresses many events into one number. That number can't tell you whether a page was blank for two seconds or whether it painted instantly but then blocked on a font. When you place two or more pages on the same horizontal time axis, differences become visible:

• Start offset — when the first pixel appears relative to navigation start.
• Content progression — how much of the page is usable at 0.5s, 1s, 2s, 3s.
• Stall points — frames that look identical across several hundred milliseconds, which usually mean the main thread is busy or a render-blocking resource is pending.

Lightest is built around exactly this idea: its tagline is "Speed made visible," and its description is "Compare how pages load, frame by frame, on a shared timeline." That framing is the useful mental model — the tool's job is to make the timeline the unit of comparison, not the score.

The key timestamps to read on a filmstrip

You don't need to interpret every frame. Anchor your comparison on four moments, and note the time each page hits them:

If you also have Lighthouse or Core Web Vitals data for the same URLs, map the metrics onto these visual anchors: LCP should correspond roughly to your "main content visible" frame, and CLS shows up as frames where elements jump position between captures. The filmstrip explains why a metric is what it is; the metric tells you whether the number is good.

How to run a comparison

1. Pick comparable URLs. Same page type, same rough content weight. Comparing a text article to a video-heavy landing page produces a filmstrip that's interesting but not actionable.
2. Fix the conditions. Use the same connection profile and device/emulation for every URL. If the tool lets you choose a preset (mobile, slow 4G, etc.), apply one preset to all pages in the run — otherwise you're comparing networks, not pages.
3. Capture all pages on one timeline. This is the core requirement. Separate runs with separate start times can't be aligned reliably.
4. Read left to right and mark the four timestamps above for each page. Write them down; the numbers are what you'll act on.
5. Identify the first divergence. Find the earliest point where one page falls behind. That gap is your primary target — later gaps often cascade from it.
6. Inspect the likely cause. A blank early frame points to server response or render-blocking head resources. A late main-content frame points to a large hero image, a lazy-loaded element that should be eager, or a font swap. A long stall after content appears points to third-party scripts or heavy JS.
7. Change one thing, then re-run the same comparison. Same URLs, same conditions, same timeline. If the divergence point moves earlier, the change worked.

What the stalls usually turn out to be

Across most real comparisons, the frames that lag fall into a few recurring buckets:

• Images — an oversized hero image or one served without modern formats delays the "main content visible" frame.
• Fonts — text renders in a fallback, then reflows when the web font arrives; you'll see a visible swap between frames.
• Scripts — a synchronous or late-loading script blocks rendering or freezes the main thread, producing identical consecutive frames.
• Third parties — analytics, chat widgets, and ad scripts often land after content and extend the "visually complete" time without changing what the user sees.
• Server/TTFB — if every page from one site starts late, the problem is upstream of the browser.

The filmstrip won't name the culprit, but it narrows the window: you know which few hundred milliseconds to open DevTools for.

Turning the comparison into a decision

Use the comparison to answer a specific question rather than to collect a score:

• "Is my page slower than a competitor's, and from which moment?" — if the divergence is at first paint, it's a delivery problem; if it's at main content, it's a resource-weight problem.
• "Did my last change help?" — re-run the identical comparison; a moved divergence point is your evidence.
• "Which of these two designs loads better?" — the one that reaches main content visible earlier on the shared timeline wins for perceived speed, even if its final completion time is similar.

If you want the visual comparison itself, Lightest is the entry point referenced here. Pair it with Lighthouse or Core Web Vitals measurement for the numeric side — the filmstrip tells you where to look, and the metrics tell you whether the fix landed.

A filmstrip is a row of screenshots taken at fixed intervals during a page load, laid out left to right on a shared timeline. Each frame is one moment in time, so you read the strip as a visual sequence: blank page, then text, then images, then the finished layout. It answers a question numbers alone can't: when did the user actually see something? You'd use it when a metric like Largest Contentful Paint (LCP) looks fine but the page still feels slow, or when you want to compare two pages or two runs side by side. Lightest, for example, describes itself as comparing "how pages load, frame by frame, on a shared timeline" — that shared timeline is the key property that makes a filmstrip comparable.

How filmstrip frames are generated

A filmstrip is built from screenshots, not from code analysis:

1. A browser loads the page under a defined set of conditions (viewport size, network throttling, CPU throttling, cache state).
2. The tool captures a screenshot at a regular interval — often every 100 ms, sometimes tied to paint or frame events.
3. Each screenshot is timestamped relative to navigation start.
4. The frames are rendered in order, with the timeline axis underneath.

The result is a visual record of rendering, which is why it complements metrics rather than replacing them. A metric tells you a number crossed a threshold; the filmstrip shows what was on screen when it did.

How to read a filmstrip

Scan left to right and ask "what changed, and when?" at each step.

Spotting render-blocking resources

If the first several frames are blank or show only a background color, something is blocking first paint. Common causes: a stylesheet in the <head> that must download before anything renders, or a synchronous script. The number of blank frames × frame interval ≈ how long the user stared at nothing.

Spotting a late hero image

If text appears early but the main image pops in near the end, the hero is loading late. This matters because the hero image is often the LCP element — the filmstrip shows you where in the sequence it lands, which a single LCP number does not.

Spotting layout shifts

Compare consecutive frames for elements that move. A banner that jumps down after an ad loads, or text that reflows when a font swaps in, shows up as a visible jump between two frames. This is the filmstrip's clearest advantage: shifts are inherently visual, and a frame pair makes them obvious.

Reading the end state

The last frame should match the fully loaded page. If it doesn't, the capture stopped too early, or something loaded after the capture window.

Comparing two pages or two runs

The comparison only works if both sides share the same conditions. On a shared timeline:

• Align both strips to the same start point (navigation start).
• Compare frame n on page A with frame n on page B — same moment, different rendering.
• Note which page reaches "visually complete" first, and which reaches it with fewer intermediate jumps.

This is the workflow Lightest is built around: side-by-side, frame by frame, on one timeline. The value is that you're comparing the same instant, not two independently scaled recordings.

Common pitfalls that distort frames

When a filmstrip is the right tool

Use it when the question is visual timing — what appeared, in what order, and how it moved. Use metrics (LCP, CLS, and the rest of Core Web Vitals) when the question is how much or how many. The two are complementary: the metric flags a problem, the filmstrip shows you the frame where it happens.

Core Web Vitals are three metrics Google uses to measure real page experience: LCP (loading), INP (interactivity), and CLS (visual stability). Each has published thresholds — good, needs improvement, poor — and each maps to a small set of common causes with known fixes. You measure them two ways: lab data from a tool like Lighthouse (a simulated run) and field data from real visitors (Chrome UX Report, Search Console). Lab data tells you what to fix; field data tells you whether it worked.

The three metrics and what each one measures

INP replaced FID (First Input Delay) as the interactivity metric. FID only measured the delay before the browser started processing the first interaction; INP samples interactions across the whole visit and reports a high-percentile value, so it catches slow responses that FID missed. If you see FID in older reports, treat INP as the current target.

Thresholds are evaluated at the 75th percentile of page loads, segmented by mobile and desktop. A page passes only when 75% of real visits hit the "good" band for all three metrics.

How to measure: lab data vs. field data

These answer different questions, and you need both.

Lab data (Lighthouse, PageSpeed Insights' "Analyze" tab) — a single simulated load on a throttled connection. It's reproducible, so it's good for debugging and for comparing before/after a fix. It is not what your users experience.

Field data (Chrome UX Report via PageSpeed Insights' top section, or Search Console's Core Web Vitals report) — aggregated from real Chrome users over the past 28 days. This is what Google's ranking systems actually see. It can be empty for low-traffic pages, in which case you have no field signal yet.

A practical workflow:

1. Run PageSpeed Insights on the URL. Read the field data first — if the page passes in the field, lab warnings are lower priority.
2. If field data is failing or missing, use the Lighthouse section to find the specific cause.
3. Fix, deploy, then re-check field data after the 28-day window rolls over. Lab scores update immediately; field data does not.

Repolog runs Core Web Vitals from Lighthouse (FCP, LCP, TBT, CLS, Speed Index) on mobile emulation inside a real headless browser load, scored against Google's thresholds, and returns a ranked report in about a minute with no signup — one homepage per day on the free scan. That's useful for a fast baseline; you still want field data to confirm real-world impact.

Common causes and fixes

LCP is slow

The usual culprits, in rough order of frequency:

• The LCP element is an unoptimized image. Serve it as WebP/AVIF, size it correctly, and add fetchpriority="high" to the hero image. Don't lazy-load the LCP image.
• Render-blocking CSS or fonts. Inline critical CSS, defer the rest, and preload the primary font file.
• Slow server response (high TTFB). LCP can't be faster than the server's first byte. Check caching, CDN coverage, and database queries on the critical path.
• Client-side rendering. If the hero content only appears after a JS bundle executes, the browser paints late. Server-render or statically generate the above-the-fold content.

INP is high

• Long tasks on the main thread. Break up JavaScript that runs for more than 50ms; yield to the browser between chunks.
• Heavy third-party scripts — tag managers, chat widgets, analytics. Load them after interaction or in a worker where possible.
• Expensive event handlers. Debounce input handlers and avoid layout reads/writes inside them.

CLS is high

• Images and iframes without dimensions. Always set width and height (or an aspect-ratio box) so the browser reserves space.
• Ads, embeds, and banners injected above existing content. Reserve a fixed slot.
• Web fonts swapping and reflowing text. Use font-display: optional or swap with a matched fallback metric.
• Late-injected DOM (cookie bars, promos) that pushes content down. Overlay instead of inserting into flow.

Where Core Web Vitals fit in a broader audit

Core Web Vitals are one input among several, and they interact with the rest. A page can pass all three metrics and still fail on SEO fundamentals (missing titles, broken heading hierarchy, no canonical), accessibility (contrast, form labels, ARIA), or security (missing HSTS, exposed .env). Repolog's scan bundles these: 60+ checks across SEO, performance, accessibility (axe-core against WCAG 2 rules, reported to the failing element), security (19 read-only checks including header and file-exposure tests), and AI readiness (18 checks covering GPTBot/ClaudeBot/PerplexityBot access in robots.txt, JSON-LD, sitemap.xml, llms.txt, and FAQ patterns). Each issue comes with its fix.

The reason to look at them together: a fix for one can regress another. Deferring a script to improve INP can delay the LCP element. Adding a consent banner for compliance can introduce CLS. Running the checks in the same browser load, as Repolog does, makes those trade-offs visible in one report instead of three.

Quick decision guide

• Just want to know if you pass? PageSpeed Insights field data, or Search Console's Core Web Vitals report.
• Need to debug a specific failing metric? Lighthouse in Chrome DevTools, with the performance trace open.
• Want a ranked list of everything to fix across SEO, speed, accessibility, security, and AI readiness, with the fix attached? Run a scan on your homepage — Repolog's free audit takes about a minute with no signup, and the paid tiers (7-day free trial, $0 due today) add keyword research runs, keyword-to-page mapping, and Search Console integration for cannibalization checks.

PageSpeed is the general term for how quickly a web page loads and becomes usable — it is a concept, not a single number. You measure it with tools that capture different things: lab tools like Lighthouse and PageSpeed Insights give you a repeatable score and diagnostics, while field data (Core Web Vitals from real visitors) tells you what users actually experienced. If you want to know whether a page is fast, you need both, plus a way to see the load unfold over time rather than as one average.

PageSpeed vs. PageSpeed Insights vs. Lighthouse

These three get used interchangeably, but they are not the same thing.

So "our PageSpeed is 62" is shorthand for "a Lighthouse-based audit scored this page 62." That number is a lab estimate under simulated conditions, not a measurement of your real visitors.

The metrics that actually describe PageSpeed

A single load time hides the fact that a page loads in stages. These are the milestones worth tracking:

• TTFB (Time to First Byte) — how long the server takes to start responding. A slow TTFB caps everything downstream.
• First Contentful Paint (FCP) — when the first text or image appears.
• Largest Contentful Paint (LCP) — when the main content block is rendered. This is the Core Web Vital most tied to perceived speed.
• Total Blocking Time (TBT) — how long the main thread is busy and the page can't respond to input.
• Cumulative Layout Shift (CLS) — how much visible content moves around while loading.
• Interaction to Next Paint (INP) — how responsive the page feels once you start clicking and typing.

LCP, CLS, and INP are the three Core Web Vitals. Lab tools estimate them; field data measures them from real sessions.

How to measure PageSpeed

1. Start with a lab audit

Run the page through Lighthouse (in Chrome DevTools under the Lighthouse panel) or PageSpeed Insights. You get a performance score, the metric timings above, and a prioritized list of things to fix — oversized images, render-blocking scripts, unused CSS, and so on. Run it more than once; scores vary between runs.

2. Check field data

PageSpeed Insights shows real-user Core Web Vitals when the page has enough traffic, drawn from the Chrome UX Report. This is the number that reflects actual experience, including slow devices and networks your lab test doesn't simulate. If field and lab disagree, trust the field data for "is it fast for users" and the lab data for "why."

3. Watch the load frame by frame

Scores and single timings flatten the experience. A filmstrip view — a sequence of screenshots captured at intervals during load — shows what a visitor actually sees: when content appears, when it jumps, when it's finally stable. Tools built around this idea, such as Lightest, put pages on a shared timeline so you can compare how two sites load side by side, frame by frame. That comparison is useful when you want to see where the gap is, not just that one page scores lower.

4. Verify the fix

After changing something, re-run the same lab audit under the same conditions and compare the specific metric you targeted. If you optimized images for LCP, check LCP — not just the overall score, which can move for unrelated reasons.

Common causes of slow pages

• Unoptimized images — large files, wrong formats, no responsive sizing. Usually the biggest single LCP contributor.
• Render-blocking resources — CSS and synchronous scripts in the head that delay first paint.
• Too much JavaScript — large bundles and heavy third-party scripts raise TBT and hurt INP.
• Slow server response — high TTFB from poor hosting, no caching, or slow backend queries.
• Layout instability — images and ads without reserved dimensions cause CLS.

Where to start

Fix in order of impact: server response first (it gates everything), then the largest image or content block (LCP), then JavaScript weight (TBT/INP), then layout stability (CLS). Measure before and after each change with the same tool so you can attribute the improvement. Use lab tools to diagnose, field data to confirm it mattered, and a frame-by-frame comparison when you need to see the load as a visitor experiences it.