How to Monitor Your Website's Web Vitals Using Testdom.io

Last updated July 20, 2025

Monitoring your site’s Core Web Vitals has never been easier. With Testdom.io, you can test any page in seconds, start monitoring it continuously, and get clear insights into what needs improvement — all from one simple interface.

This step-by-step guide will walk you through how to:

Run a Web Vitals test on any URL
Enable continuous monitoring for that page
Understand your results and take action based on detailed performance reports

Let’s get started:

Step 1: Open the Web Vitals Dashboard

After logging into your Testdom.io account, go to Core Web Vitals → Dashboard from the main navigation menu.

This is where you’ll start your page performance test and unlock ongoing monitoring tools.

Testdom.io's Core Web Vitals Dashboard — where it all begins.

Step 2: Enter a New URL to Test

In the Page Test input field, type or paste the full URL of the page you want to test — this can be any public-facing page, even if it hasn't been tested before.

If no existing test is found, you’ll see a “No Tests found” message. That’s expected for new URLs.

To continue, click either:

"Create a new Test" link that appears below the input
Or click the slider icon on the right side of the input to configure test settings

This will open the configuration panel where you can set up how the test will run.

Paste the full URL and click “Create a new Test” or the slider icon to continue.

Step 3: Fill Out the Test Settings and Monitoring Options

After clicking "Create a new Test" or the slider icon, you'll see the full test configuration screen. Here you can customize how the test will run and how often it should monitor the page.

Let’s go over each section:

📝 Web Vitals Test Settings (Left Panel)

New Test Name: Enter a friendly name for the test (e.g. “Inner Article”, “Homepage Mobile”, etc.). This helps you recognize it later.
Tags: Optional keywords to help organize your tests (e.g. "blog", "product", "landing"). You can filter by tags in the dashboard later.
Test Status: Toggle to Enabled or Disable the test.
Monitor Status: Toggle to Enabled to begin automatic monitoring.
Monitoring Frequency: Select how often Testdom.io should automatically run the test. The default is Daily, but you can increase the frequency to as often as every 4 hours for more granular tracking.

When Monitoring is enabled, Testdom.io will automatically run this test every day according to the schedule defined in your account settings → test time configuration.

📱 Device Settings (Right Panel)

Device: Choose a device preset (in this case, iPhone 14 Pro - 4G). This controls the screen size and emulation profile.
Width / Height / Pixel Ratio: These are auto-filled based on the selected device, but you can customize them if needed.
Throttle Connection Speed: Simulate realistic loading conditions like 4G or 3G. This helps identify performance issues on slower networks.
Override Device's User-Agent: This field auto-fills based on your device preset. You can override it for custom headers if needed.

Customize your test settings, enable daily monitoring, and choose device & network throttling options.

Once you’ve filled everything out, click “Save new Test and Run” to start your first analysis and activate daily tracking for the selected page.

Step 4: Wait for the Test to Run

Once you click “Save new Test and Run”, Testdom.io will begin processing your page. You don’t need to refresh or navigate away — the test runs in real time and you’ll see a live progress bar as it executes each step.

The system queues the test job, then launches a mobile browser simulation (based on your selected device and network settings), and begins capturing key Web Vitals data.

The test is running in real time — you’ll see a progress bar and step updates as it completes.

Depending on the page complexity and network throttling, the test usually takes between 15 to 40 seconds to complete.

Step 5: Review the Test Summary

Once the test completes, you’ll be shown a concise summary of the results. This includes:

A screenshot of the page tested, rendered using your selected device settings.
Overall performance score — based on Lighthouse’s mobile evaluation.
Status of the test (Passed / Failed).
The test name and monitoring status.
A list of failed metrics that exceeded their defined thresholds.

In this example, the test failed because the Time to First Byte (TTFB) was measured at 524ms, exceeding the allowed maximum of 500ms.

Test summary screen — shows the performance highlights and any failing metrics.

Click the "Show full report" button to dive into the detailed Web Vitals report, where each metric is explained with improvement tips and actionable links.

Want to retest after fixing something? You can also click "Start a new fresh test" directly from this screen.

Step 6: Explore the Full Web Vitals Report

After viewing the summary screen, clicking "Show full report" takes you to the complete Web Vitals results page. At the top, you’ll find essential context for the test run:

Test Name – Clearly labeled so you can distinguish between multiple page tests.
Tested URL – The actual URL that was tested is shown as a clickable link.
Screenshot Preview – Captured during the Lighthouse test using the selected device configuration. For mobile tests, this image matches the emulated screen size and resolution. For desktop, one of the 3 supported screen widths is used to simulate a real desktop experience.

This visual preview helps you validate that the correct version of your site was tested — whether it’s mobile, tablet, or desktop.

Beneath the screenshot, the following test configuration details are shown:

Lighthouse Version — The version of Lighthouse used to generate this report.
Browser Used — Chrome is the default testing browser, showing its version number.
Device Emulated — The name and resolution of the selected device (e.g., iPhone 14 Pro).
Network Throttling — The simulated network condition (e.g., 4G, 3G, Wi-Fi, etc.) used during the test.

Report header section – preview of tested page and all device/network configuration settings used during the test.

Performance Overview, Metrics Score and Thresholds

Once the test is complete, Testdom.io displays a summary of the overall Lighthouse category scores and detailed performance metrics. Each metric is evaluated against a predefined threshold. If any score or value exceeds these limits, the test is marked as Failed.

Overall Lighthouse Scores

Performance – Focuses on Web Vitals like LCP, FCP, TBT, and CLS.
SEO – Checks search engine readiness (mobile-friendly, titles, etc.).
Accessibility – Verifies text contrast, ARIA labels, focus indicators, and more.
Best Practice – Ensures safe and modern browser features are used properly.

Each score is out of 100. You can configure your own minimum acceptable thresholds for each of these categories under your Thresholds settings. By default, Testdom marks a test as failed if any category score drops below 100 – but this can be relaxed for specific use cases.

Performance Metrics Breakdown

Below the category scores, you’ll see the detailed Web Vitals performance metrics for the tested page:

CLS (Cumulative Layout Shift): Visual stability – Good ≤ 0.1
TTFB (Time to First Byte): Server response speed – Good ≤ 500 ms
FCP (First Contentful Paint): Time for first visible content – Good ≤ 1.8 sec
LCP (Largest Contentful Paint): Time for main content to appear – Good ≤ 2.5 sec
TTI (Time to Interactive): When page becomes fully usable – Good ≤ 3.8 sec
TBT (Total Blocking Time): Total main-thread blocking time – Good ≤ 200 ms
SI (Speed Index): Overall load speed – Good ≤ 1,700 ms

These values are color-coded and visualized in vertical bars for quick interpretation. Red zones indicate performance degradation. The measured values (shown below each bar) are matched against Testdom’s default thresholds — which you can fully customize.

Test result overview – includes category scores and detailed metric values with color-coded thresholds

Tip: You can override the default failure thresholds for each metric by visiting your Thresholds tab. This allows more control over what constitutes a pass/fail depending on your industry or performance goals.

Loading Visualization

The Loading Visualization panel provides a timeline of how your page renders from the moment it's requested to the point it's fully visible. Testdom.io captures a sequence of screenshots that reflect the actual user experience during the load process.

Each thumbnail represents a moment in time, visually documenting the progressive rendering of your page. This is particularly helpful to identify render-blocking elements, late-loading banners, or layout shifts.

This section gives you a quick visual overview of what the user sees and when. It’s a critical debugging tool when diagnosing slow loads, perceived slowness, or layout instability.

Issues & Recommendations

The Issues tab provides a categorized breakdown of problems detected during the Web Vitals test. These are actionable suggestions from Google Lighthouse that highlight performance bottlenecks and optimization opportunities.

Each issue includes:

Title: A clear label describing the nature of the issue (e.g., “Reduce unused JavaScript”, “Serve images in next-gen formats”).
Short explanation: A concise description of what the issue means and why it affects performance.
Expanded section: Clicking the issue toggles additional details — including affected resources, estimated savings, and a “Learn more” link.

The “Learn more” link will guide you to official Google or developer documentation with in-depth insights and techniques for fixing or optimizing each issue.

This makes the Issues tab your go-to guide for understanding what’s slowing down your page and how to systematically improve your Web Vitals scores.

Waterfall View

The Waterfall tab provides a detailed breakdown of how each resource on your page loads during the test. It's an essential tool for identifying what slows down your site and which files or requests can be optimized.

Key features include:

Resource Size & Count Charts: Visualize total page weight and how it’s distributed across JavaScript, images, HTML, stylesheets, fonts, and more.
Interactive Waterfall Timeline: Shows how long each asset took to load, including DNS resolution, connection time, and total download time.
Live Filtering: Instantly search and filter by file name, type, status, or domain to trace specific resources.
Detailed Request Info: Expand any row to view headers, status codes, IPs, and request sizes.
Export HAR: Download the entire session as a .har file for debugging in Chrome DevTools or sharing with developers.

This view is especially helpful when diagnosing slow TTFB, large third-party assets, or render-blocking scripts.

Performance History

The History tab visualizes how the Web Vitals of your test page have changed over time, helping you spot trends, regressions, or improvements.

Each test run is represented as a data point in a stacked area chart, showing:

FCP (First Contentful Paint)
LCP (Largest Contentful Paint)
TTFB (Time to First Byte)
SI (Speed Index)
Other timing metrics from your selected throttling profile

You can easily identify spikes, bottlenecks, or consistent degradation, making this an invaluable tool for developers, marketers, and performance teams aiming to maintain a smooth and fast user experience.

Tests are automatically appended to the history whenever a scheduled or manual test is run. You can click individual data points for more insight or hover to view raw values.

Wrapping Up

Monitoring your website's Core Web Vitals has never been easier. With Testdom's streamlined workflow—from setting up a test to reviewing real-time metrics, visualizations, and performance history—you gain deep insight into your site’s speed, stability, and user experience. Whether you're optimizing a blog, landing page, or SaaS platform, Testdom gives you the precision and control to stay ahead of performance issues.

Start testing smarter. Stay fast. Stay user-focused.