Lighthouse Simulator
Use our Lighthouse Simulator to forecast web performance. Adjust LCP, TBT, and CLS to optimize Lighthouse metrics and improve your site's Core Web Vitals score.
Related Utilities
How the Lighthouse Metrics Scoring Algorithm Works
The performance scoring engine in this simulator mirrors the standardized log-normal distribution used by industry-standard audits to calculate your final grade. Each of the five core pillars—First Contentful Paint (FCP), Speed Index (SI), Largest Contentful Paint (LCP), Total Blocking Time (TBT), and Cumulative Layout Shift (CLS)—is weighted according to its impact on user experience.
TBT carries the highest weight at 30%, followed by LCP and CLS at 25% each, while FCP and SI contribute 10% apiece. The math relies on specific median and "poor" threshold values to normalize these distinct units—seconds and milliseconds—into a single 0-100 scale. By understanding these weights, you can prioritize which optimizations will yield the highest return on investment for your overall web performance.
Interpreting Your Lighthouse Metrics Diagnostics
When your simulation results fall below the ideal range, the diagnostic panel provides specific, actionable feedback based on the values you have set. If you see a "Needs Improvement" or "Poor" status, it indicates that your input parameters have crossed the thresholds that Google's audit engine uses to flag performance bottlenecks.
These diagnostics are not just alerts; they are direct technical recommendations for your critical rendering path. For instance, if your LCP is flagged, the tool suggests focusing on asset delivery—specifically, how your largest above-the-fold elements are prioritized by the browser. Similarly, a high TBT warning points to the need for code-splitting or offloading main-thread execution, which is critical for maintaining a responsive interface.
Customizing Your Web Performance Simulation Controls
The simulation workspace features five primary sliders, each representing a critical metric, allowing you to model various scenarios without running a live audit. Each control is mapped to a specific range that reflects real-world network and device conditions.
| Metric | Range | Impact |
|---|---|---|
| LCP | 0.5s – 8.0s | Measures perceived load speed of the main content |
| TBT | 0ms – 1200ms | Tracks total duration of main thread blocks during load |
| CLS | 0.0 – 0.6 | Quantifies visual stability and layout shifts |
| FCP | 0.5s – 5.0s | Indicates when the first piece of content renders |
| SI | 0.5s – 10.0s | Calculates how quickly content is visually populated |
Step-by-Step Guide to Modeling Core Web Vitals
Adjust the LCP Slider
Drag the control to match your current Largest Contentful Paint. If your banner image takes 3.0 seconds to render, set it there to see the immediate impact on your projected score.
Refine the TBT and CLS Inputs
Use the sliders to reflect your current main-thread blocking time and layout shift indices. These values are often the "silent killers" of a high score.
Review the Performance Gauge
Watch the circular score indicator update in real-time as you drag the sliders. A score of 90 or above indicates a "Good" rating.
Action the Diagnostic Tips
Read the generated text below the gauge to find specific fixes for your current configuration, such as implementing priority hints or reserving layout space for images.
Practical Example: Improving a Sub-Optimal Page
Imagine you have a page with an LCP of 3.2 seconds and a TBT of 450ms. Using the simulator, you can see that this combination likely drops your score into the "Improve" category.
By adjusting the LCP slider down to 2.2 seconds (via preloading) and reducing TBT to 150ms (by deferring non-critical JavaScript), you can instantly visualize how these changes push your score back into the "Good" (90+) range. This allows you to plan your development sprint based on measurable projected outcomes rather than guesswork.
Best Settings for Realistic Performance Forecasting
When using the simulator to forecast future state, always start by inputting your current real-user monitoring (RUM) data rather than arbitrary numbers. For mobile-first optimization, prioritize setting your TBT higher, as lower-end mobile CPUs struggle substantially more with main-thread execution than desktop environments.
If you are aiming for a perfect 100, focus on keeping your LCP under 2.5 seconds and your TBT under 200ms, as these two metrics are the most frequent culprits for lower scores. Use the "Reset" button to return to baseline settings if you lose track of your modifications during your experimentation phase.