Catchpoint's WebPageTest Smartboard is designed to help you track and analyze the performance of your webpages in granular detail, with a focus on the user's perspective. When you receive an alert for one of your WebPageTests, a good first troubleshooting step is to view the Smartboard for that test and see where in the page-load process performance might be degraded.
Let's look closer at each section in the WebPageTest Smartboard.
Source
The Source is the specific test whose data is being rendered in the Smartboard. You can change the source by clicking on the "Source" button in the upper left, then selecting the desired data source. When you make a selection, the entire Smartboard refreshes with data from the new source.
Use the dropdowns next to the Source Field to specify the timeframe you want to view. You can choose a simple timeframe such as "Today" or "Last Hour", or you can use "Custom" to specify a timeframe of your choosing. After making a new timeframe selection, click "Go" to refresh the Smartboard.
Tab Menu
Select a tab from this row to view specific details about your webpage's performance. (Details about each tab can be found below.)
Filters
Immediately below the tab menu is a row of options you can use to filter the data displayed in the tab:
- Page - Select whether to view data for an individual page, or for
all pages monitored by this test. - Device - Select the test device category and optionally the
specific test device model you want to view results for. - Node - Select a specific WPT Node whose test results you want to
view.
Overview Tab
This is the default tab you will see when your first open the WebPageTest Smartboard. It displays any Alerts that were generated during your chosen timeframe (and subject to any applied filters), as well as a summary of the latest performance stats for your webpage(s).
Alerts
This section displays a table of any alerts generated by your tests. For each alert you will see the severity (Warning or Critical), the specific metric that generated the alert, the value of that metric when the alert was generated, and threshold value it exceeded. Additional details include the specific page that was tested, the device that was emulated, the WPT Node that ran the test, and the date and time of the test run.
You can click the "View" link next to an alert to open that test's Alert configuration section in a new tab.
Latest Performance
This section shows your webpages' recent performance trends in terms of several key metrics. Use the tabs to select which metrics you want to view.
- Core Web Vitals - A standard set of measurements developed by Google to rate a webpage's performance.
- Lighthouse Scores - A set of composite metrics developed by Web.dev which are calculated based on Core Web Vitals and provide useful summaries of a webpage's performance from different perspectives.
- Asset Performance - Breaks down performance by asset type (HTML, CSS, Script, Image, and Media.)
- Custom - Allows you to choose how you want to break down your data and what specific metric you want to plot.
### Asset Performance
This section breaks down the performance of your webpage by specific asset types (HTML, CSS, Scripts, Images, and Media.)
Custom
This section lets you choose what attribute you want to use to break down your data, and which metric you want to view.
Webpage Tab
The webpage tab shows you detailed performance data for your webpage as a whole.
Latest Filmstrip
A filmstrip is a series of screenshots showing what was loaded in the browser viewport at different times during the page-load process. This can be very helpful for understanding exactly how end-users experience the site in real time.
Visual Display
This graph plots several key metrics related to the timing of visual elements being loaded on the screen.
#Web Vitals
A graph of changes in the Core Web Vital metrics for your site.
Load Times
A graph of several metrics related to key events during the page-load process, including initial Response time, DOM interactive (the time at which the page first becomes able to receive user interaction) and Document Complete time.
CPU Time
This graph shows how much CPU time is taken up by different aspect of the page-load process.
Lighthouse Scores
A graph of changes in your website's composite Lighthouse Scores over time.
Assets Tab
The Assets tab shows several different breakdowns of your webpage's performance data by the types of assets loaded on the page.
The graphs let you see how your site's assets compare in terms of total content size, total number requests generated, and any blocking requests. The tables at the bottom provide a list of individual assets requested, broken down by size and CPU time required to load.
Third Party Tab
The Third Party focuses specifcally on assets hosted by parties other than the primary host of the website, helping you understand the impact that third parties may be having on your site's overall performance.
The three cards at the top of the tab show you how much processing time, transfer time, and size 3rd party assets are taking up, both in absolute terms and as a percentage of the site's total performance.
The bar graphs show you how third party assets are performing by source, and how each third party source breaks down by asset type. The line graph at the bottom enables you to compare performance trends for the first party (primary website domain) versus third parties.
Cross Device Tab
The Cross Device tab compares your site's performance across various device types and makes/models. You can use it to ensure parity of performance from desktops to tablets to smartphones, and to identify any performance issues that may be specific to particular device types.
It displays all of the same graphs as the Webpage tab, but each broken down by device, so that you can easily compare their performance characteristics.
Javascript Tab
The Javascript tab shows you performance of scripts on your site, so that you can see the overall contribution of script processing to your site's performance.
The graph shows you how much time was spent executing scripts prior to major page events, and the table at the bottom shows how many scripts were executed per domain.