Congratulations on verifying your site, you're ready to start analysing your Core Web Vitals!
Starting at the top of the dashboard you will see options to select the site you wish to analyse, the date range and whether to filter by desktop or mobile:
Select a site
Clicking on the site name will present a drop down of all the sites you own or are collaborating on, making it easy to switch between dashboards. There is also a quick link to add a new site to your list of managed sites.
Select a date
Clicking on the date will present a drop down that allows you to select a date range over which to analyse the Web Vitals. Some one-click date ranges are provided for convenience. You can select any 31 day range of dates during which data has been collected by illuminatr.
Select device
Selecting mobile or desktop automatically refreshes the dashboard with the user experience data for that device.
Beneath these options you will see the first of the user experience visualisations, showing the overall summary for each Web Vital.
Overall summary
There are 6 metrics in total that are being measured:
- Cumulative Layout Shift
- First Input Delay
- Largest Contentful Paint
- Interaction to Next Paint
- Time To First Byte
- First Contentful Paint
Each metric has an information label for you to select so you understand what values are considered
- Good
- Needs Improvement
- Poor
In the same way that Google measures Core Web Vitals, the values you see represent the 75th percentile of all measurements. The value above the bar charts is the highest of those 75th percentile measurements.
The bar charts provide more fine grained information to inform you what percentage of all visits fall under each category of Good, Needs Improvement and Poor.
Finally, we also provide the number of page views this data is based on. The data in this summary is calculated from all pages on your site (across the selected date range), giving you an idea of the site wide user experience.
Click on each metric and your dashboard will refresh the sections below which allows you to drill into the data even further.
Daily summary
This visualisation is similar to the overall summary above, except this time it displays the measurements on a day by day basis. This is especially useful when you have made changes to improve the user experience and you want to track it daily to see if it is having the desired effect.
To view more detail for each day, simply hover over each of the bars and you'll see a similar breakdown of information as in the overall summary.
Country summary
This is the point in the dashboard where you can dive into specific aspects of the user experience measurements. In this case you get the overall breakdown by country over the date range selected. This can be useful to highlight performance issues in certain geographical areas.
As a simple example, consider the TTFB metric. This visualisation may highlight that you are getting a high percentage of views from a specific country but users are mainly getting a poor experience. Perhaps you have a single web server hosted in the United Kingdom but are getting a lot of users from Australia and that latency is causing performance issues. Armed with this information, you can take actions such as implementing a CDN, track the performance improvements and also look at your web analytics to see if these improvements are leading to higher conversion rates. Simple changes like this can result in more revenue when you know where to look.
By default, the table is sorted by value, with the worst performance showing first. However, you can also sort by number of views and country as well as paginate through the list of results.
Want to filter the dashboard view to a country? No problem, simply click the country and the dashboard will refresh to give you the filtered data!
Path summary
Similar to the country summary above except this time the data is broken down by path. If the user experience values for a chosen metric are poor across the entire site then you'll likely see a range of different paths here. But maybe you use the same template for all blog articles and there is a user experience issue specific to that template. In this case you'll see a pattern of a lot of pages beginning with /blog featuring with the worst values.
In another example scenario, maybe the first page of results are all for low value pages. You then re-sort by number of views and see a frequently viewed path with a reasonably poor score. If you have limited resources then maybe this is the better path to focus your efforts on initially as it's going to have a bigger impact.
Once again, with the illuminatr dashboard you have the data you need to make those decisions.
Issue summary
The issue summary is great for zeroing in on poor scores and understanding exactly what element is causing the issue. Data will be populated here for Cumulative Layout Shift, First Input Delay, Largest Contentful Paint and Interaction to Next Paint.
The debug summary is especially useful if you click on one of the debug strings, which then filters the dashboard and allows you to see what paths that element is rendered on. Then you can quickly get to work to fix the problem!
If you want to read more about the debug string, a short guide can be found here.
Hopefully you've found this quick tour of the dashboard to be useful. Start at the top and as you move down the dashboard you receive more focused information. illuminatr helps you make sense of large data sets with a concise dashboard, providing just the right amout of detail to get to the heart of the issues.