https://www.debugbear.com/assets/js/e90f5df0.87e367cc.js

1"use strict";(self.webpackChunkdebugbear_docusauruss=self.webpackChunkdebugbear_docusauruss||[]).push([[2990],{17937:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>n,metadata:()=>o,toc:()=>c});var i=s(74848),a=s(28453);const n={title:"Web Vitals Report",description:"Learn how to use our Web Vitals report to improve your site's ranking in Google.",image:"https://www.debugbear.com/dimg/9d35dee255842ceede42477756b49204.png"},r=void 0,o={id:"web-vitals-report",title:"Web Vitals Report",description:"Learn how to use our Web Vitals report to improve your site's ranking in Google.",source:"@site/docs/web-vitals-report.md",sourceDirName:".",slug:"/web-vitals-report",permalink:"/docs/web-vitals-report",draft:!1,unlisted:!1,tags:[],version:"current",lastUpdatedAt:17881873e5,frontMatter:{title:"Web Vitals Report",description:"Learn how to use our Web Vitals report to improve your site's ranking in Google.",image:"https://www.debugbear.com/dimg/9d35dee255842ceede42477756b49204.png"},sidebar:"tutorialSidebar",previous:{title:"Project Performance Overview",permalink:"/docs/project-overview"},next:{title:"Aggregate Audits",permalink:"/docs/aggregate-audits-report"}},l={},c=[{value:"Core Web Vitals Assessment",id:"core-web-vitals-assessment",level:2},{value:"Largest Contentful Paint Analysis",id:"largest-contentful-paint-analysis",level:2},{value:"LCP Image Analysis",id:"lcp-image-analysis",level:3},{value:"Additional Web Vitals",id:"additional-web-vitals",level:3},{value:"Detailed Lab Insights",id:"detailed-lab-insights",level:3},{value:"Interaction to Next Paint Analysis",id:"interaction-to-next-paint-analysis",level:2},{value:"Cumulative Layout Shift Analysis",id:"cumulative-layout-shift-analysis",level:2}];function d(e){const t={a:"a",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.strong,{children:"Web Vitals"})," tab shows data on the ",(0,i.jsx)(t.a,{href:"/docs/metrics/core-web-vitals",children:"Core Web Vitals"})," metrics that Google uses as a ",(0,i.jsx)(t.a,{href:"/docs/core-web-vitals-ranking-factor",children:"ranking signal"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["Data is collected from Google's ",(0,i.jsx)(t.a,{href:"/blog/chrome-user-experience-report",children:"Chrome User Experience Report"})," (CrUX) and from lab tests run on DebugBear servers."]}),"\n",(0,i.jsxs)(t.p,{children:["To view the web vitals report for a page, click ",(0,i.jsx)(t.strong,{children:"Web Vitals"})," in the sidebar."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/81251cf04b5e24618daba464340eb420.png",alt:"Web vitals tab"})}),"\n",(0,i.jsx)(t.h2,{id:"core-web-vitals-assessment",children:"Core Web Vitals Assessment"}),"\n",(0,i.jsxs)(t.p,{children:["This section shows the score for each Core Web Vital: ",(0,i.jsx)(t.a,{href:"https://www.debugbear.com/docs/metrics/largest-contentful-paint",children:"Largest Contentful Paint (LCP)"}),", ",(0,i.jsx)(t.a,{href:"https://www.debugbear.com/docs/metrics/interaction-to-next-paint",children:"Interaction to Next Paint (INP)"}),", and ",(0,i.jsx)(t.a,{href:"https://www.debugbear.com/docs/metrics/cumulative-layout-shift",children:"Cumulative Layout Shift (CLS)"}),". The numbers represent the ",(0,i.jsx)(t.a,{href:"/docs/rum/percentiles",children:(0,i.jsx)(t.strong,{children:"75th percentile"})}),", which means 25% of user experiences were worse and 75% were better than what's shown in the report."]}),"\n",(0,i.jsx)(t.p,{children:"The data is aggregated over a 28-day period, so it may take a while for optimizations to your page speed to become visible."}),"\n",(0,i.jsx)(t.p,{children:"The bar below the metric chart shows what percentage of experiences were good, needs improvement, or poor. To get a ranking boost in Google, you should aim for at least 75% good experiences."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/2f1f0c86f8328b5ad03415a45649a543.png",alt:"CrUX Core Web Vital scores"})}),"\n",(0,i.jsx)(t.p,{children:"Hover over the bar with the rating breakdown to see the rating thresholds Google uses for each metric."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/4e618ca5797df004dc097e5b4d1bd849.png",alt:"Tooltip showing metric thresholds"})}),"\n",(0,i.jsx)(t.p,{children:"Below the CrUX values are the lab test metrics which correlate with each CrUX metric for c

1omparison."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/59dde43c6052e3696133d7c7bae2956f.png",alt:"Lab test metrics"})}),"\n",(0,i.jsxs)(t.p,{children:["To view rating trends over time, click on the rating bar or toggle the ",(0,i.jsx)(t.strong,{children:"Show Rating Chart"})," checkbox."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/5e9abbe82675ec11a858124be8650947.png",alt:"Rating chart"})}),"\n",(0,i.jsxs)(t.p,{children:["To view the trend line, click ",(0,i.jsx)(t.strong,{children:"40-Week Trend"}),"."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/f305a6ebdab5fa10a4d43c2540877ebf.png",alt:"40-week trendline"})}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.strong,{children:"URL/Origin"})," toggle lets you choose whether to show data for the specific page or for the entire website domain. If a page doesn't get enough traffic, only origin-level data may be available. For small websites, no CrUX data may be available at all."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/12e31bfb8e2d1050f0732c4cc36357eb.png",alt:"Origin level and URL level data"})}),"\n",(0,i.jsx)(t.h2,{id:"largest-contentful-paint-analysis",children:"Largest Contentful Paint Analysis"}),"\n",(0,i.jsxs)(t.p,{children:["The Largest Contentful Paint Analysis includes both Lab and CrUX data for ",(0,i.jsx)(t.a,{href:"https://www.debugbear.com/docs/metrics/time-to-first-byte",children:"Time to First Byte (TTFB)"}),", ",(0,i.jsx)(t.a,{href:"https://www.debugbear.com/docs/metrics/first-contentful-paint",children:"First Contentful Paint (FCP)"}),", and LCP."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/bce2e7f9c0e136000672c79b278ea251.png",alt:"Largest Contentful Paint Analysis"})}),"\n",(0,i.jsxs)(t.p,{children:["You can click on each metric to view more details and identify ways to speed up your website. For example, after clicking on the FCP metric, you will see what network requests on the page ",(0,i.jsx)(t.a,{href:"/blog/render-blocking-resources",children:"block rendering"}),"."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/f00154136ea6a4b4dfa3f4e5b3a7a4cc.png",alt:"First Contentful Paint request waterfall"})}),"\n",(0,i.jsx)(t.h3,{id:"lcp-image-analysis",children:"LCP Image Analysis"}),"\n",(0,i.jsxs)(t.p,{children:["The LCP Image Analysis includes CrUX data for all four ",(0,i.jsx)(t.a,{href:"https://www.debugbear.com/docs/metrics/largest-contentful-paint#measuring-lcp-sub-parts",children:"LCP Sub-parts"}),":"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Image TTFB"}),"\n",(0,i.jsx)(t.li,{children:"Load Delay"}),"\n",(0,i.jsx)(t.li,{children:"Load Duration"}),"\n",(0,i.jsx)(t.li,{children:"Render Delay"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Also included is a breakdown of the LCP Resource Type, indicating how often the LCP element is an image or text element."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/da032c7a53ba91c442c5c0a7031d1c7c.png",alt:"LCP image analysis"})}),"\n",(0,i.jsx)(t.p,{children:"Hovering over the LCP Sub-parts breakdown will show the timings for each sub-part."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/669304ad0a061c64a3e244bbaa76a859.png",alt:"LCP sub-part breakdown"})}),"\n",(0,i.jsx)(t.h3,{id:"additional-web-vitals",children:"Additional Web Vitals"}),"\n",(0,i.jsx)(t.p,{children:"More CrUX metrics are included in the Additional Web Vitals section, including Round Trip Time and the Good CrUX score."}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.strong,{children:"Good (CrUX)"}),' value indicates roughly how many users had a good experience on your website. It\'s based on the lowest good experience rating across the three Core Web Vitals, and you should aim for a "Good" score over 75%.']}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/b475b0e8b6ded14ffc6425a418d9cde3.png",alt:"Additional web vitals data"})}),"\n",(0,i.jsx)(t.p,{children:"Navigation type indicates how a page was loaded. This helps analyze LCP by revealing whether slow loads are tied to fresh visits or specific navigation behaviors such as reloads or cached restores."}),"\n",(0,i.jsx)(t.p,{children:"The chart view can be enabled in the top right corner."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/55f693ddf2cf240c22fafe14ea206cb3.png",alt:"Navigation types chart"})}),"\n",(0,i.jsx)(t.h3,{id:"detailed-lab-insights",children:"Detailed Lab Insights"}),"\n",(0,i.jsx)(t.p,{children:"Detailed Lab Insights provide more details on the LCP element, including a screenshot, priority status, and sub-part breakdown from the lab test."}),"\n",(0,i.jsx)(t.p,{children:"The LCP Image Discovery shows an isolated request waterfall for the LCP element, helping identify any requests that could delay the image from rendering sooner, such as render-blocking stylesheets and LCP initiators."}),"\n",(0,i.jsx)(t.p,{children:"The LCP sub-part measurements are highlighted in color on the request waterfall to better visualize which sub-part could be improved. This is enabled by default and can be toggled off with the LCP Sub-parts checkbox."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/de052cffbf240555952951e0803f6f58.png",alt:"LCP element and LCP image discovery"})}),"\n",(0,i.jsx)(t.p,{children:"The LCP Development shows which elements are identified as the LCP element throughout the page load. At the end of the test, the largest element will be selected as the final LCP element."}),"\n",(0,i.jsx)(t.p,{children:"Displaying the sizes and timings of each element is useful, as in some cases slightly larger elements may render later in the page load, such as consent banners, causing the LCP score to increase dramatically."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/bebef94763c49dca9670c971701c21c3.png",alt:"LCP development"})}),"\n",(0,i.jsx)(t.h2,{id:"interaction-to-next-paint-analysis",children:"Interaction to Next Paint Analysis"}),"\n",(0,i.jsxs)(t.p,{children:["The Interaction to Next Paint Analysis 

1shows the rendering filmstrip, highlighting CPU tasks below. The purple indicators are ",(0,i.jsx)(t.a,{href:"https://www.debugbear.com/docs/metrics/total-blocking-time",children:"Total Blocking Time (TBT)"})," contributions. Any CPU task above 50 ms contributes to TBT."]}),"\n",(0,i.jsx)(t.p,{children:"If a user interacts with the page during these moments, they may have a slow experience, impacting INP scores."}),"\n",(0,i.jsx)(t.p,{children:"Scripts are ordered by length of CPU time in the table below."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/c7c6b7d31fe34929b17d38a1094b4529.png",alt:"Rendering filmstrip and request table"})}),"\n",(0,i.jsx)(t.p,{children:"Hovering over the TBT indicators will provide more details on the TBT duration and related script."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/a7663b756810bfdf18dfa0dc11cf2240.png",alt:"Total blocking time analysis"})}),"\n",(0,i.jsx)(t.h2,{id:"cumulative-layout-shift-analysis",children:"Cumulative Layout Shift Analysis"}),"\n",(0,i.jsx)(t.p,{children:"Any layout shifts that occur during the test are highlighted in the table, showing the shift start time and value."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/2dd36ab6b88f73fd0e3f1b5019b76dea.png",alt:"Cumulative Layout Shift Analysis"})}),"\n",(0,i.jsx)(t.p,{children:"Clicking into a shift will show before and after screenshots, with the mov

1ing elements highlighted and a breakdown of position and size changes below."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://www.debugbear.com/dimg/104b09d56f234abfcc724972d19623cb.png",alt:"Cumulative Layout Shift table insights"})})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},28453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>o});var i=s(96540);const a={},n=i.createContext(a);function r(e){const t=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),i.createElement(n.Provider,{value:t},e.children)}}}]);