Web Vitals are metrics that score the performance of a page. Google uses the Core Web Vital scores to decide how good the page experience is. This report shows Core Web Vitals data based on real user experiences as they visitor your pages.
It is recomended to aim for 75% of the Core Web Vitals experiences being good (green). i.e. you want the green bar to go beyons the 75% line.
The report includes timeline charts for each Core Web Vital so that you can track progress.
Tablet data is excluded from the report as it tends to be volatile due to the low numbers.
For a page to pass Google’s Page Experience test it has to be Good (green) for all of the Core Web Vitals on a mobile device. Page Experience also checks Mobile Usability and Security.
This report provides page type and page level details on your Core Web Vitals. The top page type table can be useful in identifying which types of pages have the biggest issues.
Layout shifts contribute to the Cumulate Layout Shift metric which we often find is where a store performs the worst. This is when the page moves around as it loads or at any time while the user is looking at the page but not actively clicking on things.
This report helps identify where the largest layout shift happens via a css selector based syntax (the Largest Shift Element column). The PSI links open up a Page Speed Insights report for the selected page.
The Tag Rocket app also provides a special Web Vitals debug mode that highlights where the layout shifts happen on the page. You can switch on the Web Vitals debug mode in the apps Global Tag Values settings and the Pubishing.
Once on and published, append ?showwebvitals=true to a page on your website to switch the visualisation on for your browser.
We recommend switching off any debug modes when you are not testing as they add extra code to your pages.
Largest Contentful Paint
This tracks the time it takes for the largest visible element on a page to be shown. This may be often a hero banner or image that is near the top of the page. You ideally want this to show within 2.5s.
This report highlights the elements that become the LCP for a page, and how long they take on average to show. The Elements column contains a css selector syntax to identify the element on the page.
Identify the elements that frequently get poor scores and look into ways to speed up their display. Can the file size of an image be reduced without reducing the quality of what a user sees.