https://www.debugbear.com/assets/js/105f0bf4.23f2818e.js

1"use strict";(self.webpackChunkdebugbear_docusauruss=self.webpackChunkdebugbear_docusauruss||[]).push([[2845],{62972:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>o,toc:()=>l});var n=r(74848),i=r(28453);const s={title:"August 2024: Review User Session Timelines + Exclude Unwanted Data",date:new Date("2024-08-29T00:00:00.000Z"),description:"Powerful RUM enhancements, UI improvements, and a wealth of new educational content to supercharge your website's performance.",image:"https://www.debugbear.com/dimg/a2f07bbb0839f0b5371736e5e03a75ea.jpeg"},a=void 0,o={permalink:"/changelog/august-2024-release-notes",source:"@site/changelog/august-2024-release-notes.md",title:"August 2024: Review User Session Timelines + Exclude Unwanted Data",description:"Powerful RUM enhancements, UI improvements, and a wealth of new educational content to supercharge your website's performance.",date:"2024-08-29T00:00:00.000Z",tags:[],readingTime:4.285,hasTruncateMarker:!0,authors:[],frontMatter:{title:"August 2024: Review User Session Timelines + Exclude Unwanted Data",date:"2024-08-29T00:00:00.000Z",description:"Powerful RUM enhancements, UI improvements, and a wealth of new educational content to supercharge your website's performance.",image:"https://www.debugbear.com/dimg/a2f07bbb0839f0b5371736e5e03a75ea.jpeg"},unlisted:!1,prevItem:{title:"September 2024: Track Custom Real User Performance Metrics",permalink:"/changelog/september-2024-release-notes"},nextItem:{title:"July 2024: Track End User Network Round Trip Time",permalink:"/changelog/july-2024-release-notes"}},d={authorsImageUrls:[]},l=[{value:"Enhanced Real User Monitoring (RUM)",id:"enhanced-real-user-monitoring-rum",level:2},{value:"User Timings in Page View Timeline",id:"user-timings-in-page-view-timeline",level:3},{value:"Powerful Negative Filters",id:"powerful-negative-filters",level:3},{value:"Clearer Elements Tab",id:"clearer-elements-tab",level:3},{value:"Better Tooltips",id:"better-tooltips",level:2},{value:"Technical Upgrades",id:"technical-upgrades",level:2},{value:"New Educational Resources",id:"new-educational-resources",level:2},{value:"New Articles",id:"new-articles",level:3},{value:"Are Re-renders Hurting Your Largest Contentful Paint Score?",id:"are-re-renders-hurting-your-largest-contentful-paint-score",level:4},{value:"PageSpeed Insights API: Discover Web Performance Insights with Code",id:"pagespeed-insights-api-discover-web-performance-insights-with-code",level:4},{value:"Minify JavaScript And CSS Code For A Faster Website",id:"minify-javascript-and-css-code-for-a-faster-website",level:4},{value:"Brand New Performance Features in Chrome DevTools",id:"brand-new-performance-features-in-chrome-devtools",level:4},{value:"How To Reduce Unused JavaScript",id:"how-to-reduce-unused-javascript",level:4},{value:"Monitor Core Web Vitals with the web-vitals.js Library",id:"monitor-core-web-vitals-with-the-web-vitalsjs-library",level:4},{value:"The Ultimate Guide to Font Performance Optimization",id:"the-ultimate-guide-to-font-performance-optimization",level:4},{value:"Video Tutorial",id:"video-tutorial",level:3},{value:"Core Web Vitals Documentation",id:"core-web-vitals-documentation",level:3},{value:"Core Web Vitals Cheat Sheet",id:"core-web-vitals-cheat-sheet",level:4},{value:"Core Web Vitals Documentation",id:"core-web-vitals-documentation-1",level:4}];function c(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"August brings many improvements to Real User Monitoring, UI updates, and lots more new educational resources. Let's dive into what's new in DebugBear this month."}),"\n",(0,n.jsx)(t.h2,{id:"enhanced-real-user-monitoring-rum",children:"Enhanced Real User Monitoring (RUM)"}),"\n",(0,n.jsx)(t.h3,{id:"user-timings-in-page-view-timeline",children:"User Timings in Page View Timeline"}

1),"\n",(0,n.jsxs)(t.p,{children:["We've added support for ",(0,n.jsx)(t.a,{href:"/blog/user-timing-api",children:"user timings and measures"})," in the individual page view timeline tab of Real User Monitoring."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://www.debugbear.com/dimg/a74dd4b7980433fb40d5997ce78b66dd.jpeg",alt:"RUM User Timings"})}),"\n",(0,n.jsxs)(t.p,{children:["Now, when you instrument your code with performance marks (e.g., ",(0,n.jsx)(t.code,{children:'performance.mark("Run carousel.js")'}),"), these events will appear in the RUM data for each page view. This feature provides a chronological view of performance-related events exactly as your users experience them."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.strong,{children:"Before"})}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Metric"}),(0,n.jsx)(t.th,{children:"Time"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"First Byte (TTFB)"}),(0,n.jsx)(t.td,{children:"439 ms"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"Last Blocking Request"}),(0,n.jsx)(t.td,{children:"464 ms"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"First Contentful Paint"}),(0,n.jsx)(t.td,{children:"530 ms"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"DOMContentLoaded"}),(0,n.jsx)(t.td,{children:"532 ms"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"Load Event"}),(0,n.jsx)(t.td,{children:"791 ms"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"Largest Contentful Paint"}),(0,n.jsx)(t.td,{children:"877 ms"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"RUM Data Sent"}),(0,n.jsx)(t.td,{children:"1.03 s"})]})]})]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.strong,{children:"After"})}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Metric"}),(0,n.jsx)(t.th,{children:"Time"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"First Byte (TTFB)"}),(0,n.jsx)(t.td,{children:"439 ms"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"Last Blocking Request"}),(0,n.jsx)(t.td,{children:"464 ms"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"First Contentful Paint"}),(0,n.jsx)(t.td,{children:"530 ms"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"DOMContentLoaded"}),(0,n.jsx)(t.td,{children:"532 ms"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.strong,{children:"(New) Run carousel.js"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.strong,{children:"765 ms"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"Load Event"}),(0,n.jsx)(t.td,{children:"791 ms"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"Largest Contentful Paint"}),(0,n.jsx)(t.td,{children:"877 ms"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:"RUM Data Sent"}),(0,n.jsx)(t.td,{children:"1.03 s"})]})]})]}),"\n",(0,n.jsx)(t.h3,{id:"powerful-negative-filters",children:"Powerful Negative Filters"}),"\n",(0,n.jsx)(t.p,{children:"Our RUM data filtering just got smarter with the introduction of negative filters."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://www.debugbear.com/dimg/a2f07bbb0839f0b5371736e5e03a75ea.jpeg",alt:"RUM Negative Filters"})}),"\n",(0,n.jsx)(t.p,{children:"Previously, if you wanted to focus on non-Chrome users, you'd have to select all browsers that are not Chrome, individually. Now, you can exclude Chrome with a single filter. This new feature allows you to:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"Exclude specific countries from your data set"}),"\n",(0,n.jsx)(t.li,{children:"Filter out particular sections of your website"}),"\n",(0,n.jsx)(t.li,{children:"Remove page views with certain tags"}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"This intuitive approach to data filtering helps you narrow down performance issues and focus on the most relevant information."}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["As a bonus tip, you can ",(0,n.jsx)(t.a,{href:"/docs/rum/saved-filters",children:"save these filters"})," for future use and even share them with your team."]})}),"\n",(0,n.jsx)(t.h3,{id:"clearer-elements-tab",children:"Clearer Elements Tab"}),"\n",(0,n.jsx)(t.p,{children:"We've given the Elements tab in RUM a significant makeover."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://www.debugbear.com/dimg/

177c735aa9f85df6adf0715cd9570e0a9.png",alt:"Improved RUM Elements Tab"})}),"\n",(0,n.jsx)(t.p,{children:"The Elements section, available for Interaction to Next Paint, Cumulative Layout Shift, and Largest Contentful Paint metrics, now provides clearer visual representations. The improved screenshots make it much easier to identify which elements are relevant to the metric you're analyzing."}),"\n",(0,n.jsx)(t.h2,{id:"better-tooltips",children:"Better Tooltips"}),"\n",(0,n.jsx)(t.p,{children:"Tooltips now show the range of ratings for each metric - so you can see at a glance how far off you are from a good score."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://www.debugbear.com/dimg/df825c5b675a2b6afb1909615c21ec89.png",alt:"Improved Tooltips"})}),"\n",(0,n.jsx)(t.h2,{id:"technical-upgrades",children:"Technical Upgrades"}),"\n",(0,n.jsx)(t.p,{children:"We've updated our infrastructure to provide you with the latest Lighthouse and Chrome versions:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"Upgraded to Lighthouse 12.2"}),"\n",(0,n.jsx)(t.li,{children:"Now using Chrome 127"}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"These upgrades ensure you have access to the most recent performance metrics and audits, and that your website performance tests benefit from the latest browser capabilities."}),"\n",(0,n.jsx)(t.h2,{id:"new-educational-resources",children:"New Educational Resources"}),"\n",(0,n.jsx)(t.p,{children:"This month, we're introducing a wealth of new educational content:"}),"\n",(0,n.jsx)(t.h3,{id:"new-articles",children:"New Articles"}),"\n",(0,n.jsx)(t.h4,{id:"are-re-renders-hurting-your-largest-contentful-paint-score",children:"Are Re-renders Hurting Your Largest Contentful Paint Score?"}),"\n",(0,n.jsxs)(t.p,{children:["Unnecessary content re-renders can negatively impact your Largest Contentful Paint (LCP) metric. ",(0,n.jsx)(t.a,{href:"/blog/content-rerenders-largest-contentful-paint",children:"Learn how LCP element re-rendering affects your metrics and how to avoid it"}),"."]}),"\n",(0,n.jsx)(t.h4,{id:"pagespeed-insights-api-discover-web-performance-insights-with-code",children:"PageSpeed Insights API: Discover Web Performance Insights with Code"}),"\n",(0,n.jsxs)(t.p,{children:["Integrating performance data into your workflows can boost optimization efforts. ",(0,n.jsx)(t.a,{href:"/blog/pagespeed-insights-api",children:"Learn how to use the PageSpeed Insights API to automate performance analysis of your websites"}),"."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"/blog/pagespeed-insights-api",children:(0,n.jsx)(t.img,{src:"https://www.debugbear.com/dimg/1f38102759dee0d04848746cde76c3a5.png",alt:"PageSpeed Insights API"})})}),"\n",(0,n.jsx)(t.h4,{id:"minify-javascript-and-css-code-for-a-faster-website",children:"Minify JavaScript And CSS Code For A Faster Website"}),"\n",(0,n.jsxs)(t.p,{children:["Code minification is important for improving website performance. ",(0,n.jsx)(t.a,{href:"/blog/minify-javascript-css",children:"Learn how code minification works and some tools to get started with"}),"."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"/blog/minify-javascript-css",children:(0,n.jsx)(t.img,{src:"https://www.debugbear.com/dimg/5dcc8985ab4f9b3e2a99d46fafe66d49.png",alt:"Minify JS and CSS"})})}),"\n",(0,n.jsx)(t.h4,{id:"brand-new-performance-features-in-chrome-devtools",children:"Brand New Performance Features in Chrome DevTools"}),"\n",(0,n.jsxs)(t.p,{children:["Explore modern web performance features in Chrome DevTools and see how the ",(0,n.jsx)(t.a,{href:"/blog/fix-web-performance-devtools",children:"new Performance Panel features can help optimize Core Web Vitals"}),"."]}),"\n",(0,n.jsx)(t.h4,{id:"how-to-reduce-unused-javascript",children:"How To Reduce Unused JavaScript"}),"\n",(0,n.jsxs)(t.p,{children:["Unused JavaScript can harm web performance. ",(0,n.jsx)(t.a,{href:"/blog/reduce-unused-javascript",children:"Explore techniques to reduce unused JavaScript on your website"}),"."]}),"\n",(0,n.jsx)(t.h4,{id:"monitor-core-web-vitals-with-the-web-vitalsjs-library",children:"Monitor Core Web Vitals with the web-vitals.js Library"}),"\n",(0,n.jsxs)(t.p,{children:["Checking your Core Web Vitals score is not just a one-off. ",(0,n.jsx)(t.a,{href:"/blog/core-web-vitals-js",children:"Learn how to use the web-vitals.js library to monitor Core Web Vitals for your real users"}),"."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"/blog/core-web-vitals-js",children:(0,n.jsx)(t.img,{src:"https://www.debugbear.com/dimg/ee012abdbbc013ab8fe1126300444219.png",alt:"Monitor Core Web Vitals"})})}),"\n",(0,n.jsx)(t.h4,{id:"the-ultimate-guide-to-font-performance-optimization",children:"The Ultimate Guide to Font Performance Optimization"}),"\n",(0,n.jsxs)(t.p,{children:["Everything you need to know about Web Font performance. ",(0,n.jsx)(t.a,{href:"/blog/website-font-performance",children:"Learn how to optimize font loading and rendering for a faster website"}),"."]}),"\n",(0,n.jsx)(t.h3,{id:"video-tutorial",children:"Video Tutorial"}

1),"\n",(0,n.jsxs)(t.p,{children:["This guide walks you through the ",(0,n.jsx)(t.a,{href:"https://www.youtube.com/watch?v=aTb5eTiArok",children:"new Chrome DevTools Performance Panel"}),": Learn how to view, and interpret performance metrics directly in Chrome DevTools."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://www.youtube.com/watch?v=aTb5eTiArok",children:(0,n.jsx)(t.img,{src:"https://www.debugbear.com/dimg/d7b956b3a135fdb77087efb6671c01d3.jpg",alt:"Unlocking Chrome DevTools' Latest Performance Features"})})}),"\n",(0,n.jsx)(t.h3,{id:"core-web-vitals-documentation",children:"Core Web Vitals Documentation"}),"\n",(0,n.jsx)(t.h4,{id:"core-web-vitals-cheat-sheet",children:"Core Web Vitals Cheat Sheet"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"https://x.com/DebugBear/status/1825533743605469673",children:"Core Web Vitals Quick-Fix Cheat Sheet"}),": A handy one-page reference for quick LCP, CLS, and INP improvements."]}),"\n",(0,n.jsx)(t.h4,{id:"core-web-vitals-documentation-1",children:"Core Web Vitals Documentation"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"https://www.debugbear.com/docs/metrics/core-web-vitals",children:"Updated Core Web Vitals Documentation"}),": We've updated our Core Web Vitals page with quick-fix guides, new visual explanations, and advanced optimization techniques."]}),"\n",(0,n.jsxs)(t.p,{children:["We hope you find these new features and resources useful. Follow us on ",(0,n.jsx)(t.a,{href:"https://twitter.com/debugbear",children:"Twitter"})," and subscribe on ",(0,n.jsx)(t.a,{href:"https://www.youtube.com/@debugbear",children:"YouTube"})," to stay up to date with the latest performance tips and tricks."]})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},28453:(e,t,r)=>{r.d(t,{R:()=>a,x:()=>o});var n=r(96540);const i={},s=n.createContext(i);function a(e){const t=n.useContext(s);return n.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(i):e.components||i:a(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]);