Each pane can show the web vitals gathered for that pane when "Show webvitals status" is checked in the Global settings in the top right corner of the app.
When all your web vitals are in the "good" range, it will show a green circle. if there are web vitals that need improvement we show an orange square and show the web vital and its score. For web vitals that score "poor" we show a red triangle and similarly show the web vital and the score.
Hover over the icon to get an overview of all Web Vitals and their score. Here too we color webvitals orange for "needs improvement" and red for "poor".
Keep in mind that web vitals scoring is non-deterministic to will differ somewhat on each reload.
When you open the Web Vitals popup we will compare the current pane's score to the Field data gathered by CrUX (when available) and plot them against each other, automatically selecting either the Mobile or Desktop field data. Use this to compare how closely your experience matches the average of your visitors.
Click the eye icon next to the Cumulative Layout Shift score to visualize which elements shifts caused your CLS score. With this visualisation, you can pinpoint the Elements whose CSS you need to fix to improve your CLS.
Click the eye icon next to the Largest Contentful Paint to highlight the element causing the largest contentful paint.
Learn more about how to analyze and improve your CLS and LCP on our blog: Improving your CLS and LCP Core Web Vitals.
Is your question not answered?
Ask via Twitter, Slack or our contact form