Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Because Lighthouse and your users are not measuring the same experience. Lighthouse runs a controlled page-load test; real visitors use different devices and networks, arrive with different cache and content states, and interact at different times. A good Lighthouse score can coexist with poor field Core Web Vitals or a sluggish click, filter, or form.
For a Next.js app, the score alone cannot identify the cause. Compare field data for the affected route with a production-like test, then investigate the specific loading phase or interaction that feels slow.
As an Amazon Associate I earn from qualifying purchases.
What Lighthouse measures—and what it misses
Lighthouse is useful for repeatable checks and finding regressions, but its simulated conditions cannot represent every visitor’s device, connection, location, cache state, viewport, navigation path, or behavior. Redirects, personalization, banners, and content that differs by viewport can also change what users experience compared with a lab run. Field layout shifts may happen after initial load, such as after scrolling or interacting, and so may not appear in a load-only test.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Metrics describe different parts of the experience. Largest Contentful Paint (LCP) concerns when the largest visible image, text block, or video renders. Cumulative Layout Shift (CLS) measures unexpected layout movement. Interaction to Next Paint (INP) reflects responsiveness to real interactions across a visit. Time to First Byte (TTFB) measures the time from navigation start until the first response byte begins arriving. Total Blocking Time (TBT), reported in Lighthouse, helps surface main-thread blocking during the simulated load.
A Lighthouse page-load run has no user input, so it cannot determine a visitor’s eventual INP. TBT can point to load-time work that may delay an early interaction, but it is not a substitute for field INP: visitors may interact at other times and under different browser conditions. As web.dev explains, a simulated load without user input cannot measure INP.
#1 Best Overall
- Used Book in Good Condition
Find out whether the complaint is about loading or interaction
“Slow” can mean the main content appears late, the page shifts unexpectedly, or a control takes too long to respond. Diagnose the reported experience rather than treating the overall Lighthouse score as a verdict.
If the page takes too long to show its main content
Start with LCP. Its timing can be broken into four phases: TTFB, delay before the LCP resource is requested, time spent downloading that resource, and delay before the downloaded resource is rendered. A large image is one possible cause, but a late request or delayed rendering can matter more than its byte size.
Rank #2
Compare the LCP element in the test with what users actually see on that route and viewport. Then use the phase timings to narrow the issue: TTFB points toward the initial response; resource-load delay toward when the browser discovers or requests the content; resource-load duration toward downloading it; and element-render delay toward getting it onto the screen after download. TTFB comes first, but improving it alone does not guarantee a fast LCP or responsive page.
For context, web.dev’s LCP guidance defines “good” as 2.5 seconds or less at the 75th percentile, evaluated separately for mobile and desktop. This is field-oriented guidance, not a promise that an individual Lighthouse run will match.
Rank #3
If a control feels sluggish after the page appears
Name the exact action users report: opening navigation, submitting a form, filtering results, or switching a view, for example. Field INP can show whether interaction responsiveness is poor, while real-user monitoring (RUM) may add useful detail about the interaction type and its timing. CrUX can indicate whether a site or URL has a Core Web Vitals problem when data is available, but it may not identify the interaction that caused it.
Reproduce the same action in a lab, including during initial loading if that matches the reported behavior. Examine the relevant main-thread tasks and, when available, RUM context. web.dev’s INP guidance sets a good threshold at 200 milliseconds or less. That is a field metric threshold, not a target for a Lighthouse score. Chrome usage data reported in the same guidance says 90% of users’ time on a page is spent after it loads, which is why the experience after the initial render matters too.
Why Next.js can show content before it is ready to use
In the App Router, pages and layouts are Server Components by default. Components that need state, event handlers, lifecycle logic, or browser APIs must run on the client. The browser can show pre-rendered HTML first, while JavaScript hydrates Client Components to attach their behavior. Seeing content, therefore, does not prove that every control is already interactive.
A broad use client boundary can put the marked module and its imports and children into the client bundle. More client JavaScript can mean more downloading, parsing, execution, and hydration work. Next.js also notes that large bundles can delay hydration and postpone prefetching on an initial visit. Keep client boundaries as narrow as the functionality allows, and consider whether work such as syntax highlighting, chart rendering, or markdown parsing needs to happen in the browser at all.
Best Value
Bundle size is a lead to investigate, not proof of the bottleneck. Compare route-level downloads and main-thread work with the user’s affected flow. A large DOM can also increase client rendering work. Third-party scripts may contribute work as well; Next.js recommends using its Script component to manage them. Confirm that the code or script you plan to change is actually tied to the measured delay.
Diagnose the affected route in a production-like build
- Preserve the reported scenario. Record the exact route, navigation path, device class, network conditions if known, and the action or content that feels slow. Test the same flow rather than a convenient but unrelated page.
- Check field evidence. Review Core Web Vitals by URL and mobile or desktop where available. Use RUM interaction details if available; treat CrUX as a high-level signal rather than a complete cause analysis.
- Run a production-like local test. Build with
next build, then runnext start. Next.js recommends this rather than using the development server for production-like performance checks. Run Lighthouse consistently, such as in an incognito session, and compare it with field data. - Follow the metric that matches the complaint. For a loading problem, inspect LCP’s four phases and verify that the lab and field pages show the same likely LCP content. For a slow action, inspect that interaction and its main-thread work; do not use TBT as a replacement for INP.
- Inspect the likely sources of client work. Review Client Component boundaries, hydration, large dependencies, heavy rendering, DOM size, and third-party scripts. Use bundle analysis to locate large modules, then verify their relevance to the route and slow flow before changing code.
- Recheck both experiences. After a targeted change, rerun the same lab scenario and check the affected field experience. A better Lighthouse score without improvement to the reported route or interaction suggests the change may not have addressed its bottleneck.
Choose a bundle analyzer that matches your Next.js setup
Next.js documents built-in code splitting and tree shaking, along with bundle-analysis options for different bundlers. The analyzer and its availability depend on the framework version and bundler in use:
| Setup | Analyzer option | Qualification |
|---|---|---|
| Turbopack | Turbopack bundle analyzer | The package-bundling guide says this analyzer is experimental and available in Next.js v16.1 and later. |
| Webpack | @next/bundle-analyzer plugin |
Documented by Next.js for Webpack; verify that your app uses this bundler before following its setup. |
Check your app’s Next.js version and bundler before choosing an analyzer. A visualization can reveal large modules or dependencies; it cannot by itself establish which one causes a user-visible delay.
What field monitoring adds
Field data helps answer whether a real-user experience is poor; diagnostics help explain why. CrUX may flag a URL or site when data is available, but it does not necessarily show which click or handler was slow. RUM can capture interaction context that helps distinguish, for example, a delayed click response from slow initial rendering.
Next.js documents useReportWebVitals for sending metrics to analytics, and documents Vercel Analytics as an option. These approaches can complement Lighthouse by recording how the deployed experience behaves for actual visitors. They do not make the lab test unnecessary: the two forms of measurement answer different questions.
Quick Recap
Sources and metric references
- web.dev: Web Vitals
- web.dev: Interaction to Next Paint
- web.dev: Largest Contentful Paint
- web.dev: Optimize INP
- Next.js: Production checklist
- Next.js: Server and Client Components
- Next.js: Package bundling
- Next.js: Linking and Navigating
- Next.js: Analytics
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
