17 Perf tips

• Extend traces recorded in the Performance tool with your own custom data
  The Performance tool lets you add custom tracks with your own custom events, when recording performance traces. This is useful to surface your own performance data, which might not map directly to the... Read more
  Categories:

  • perf

  Supported by:

  • edge
  • chrome
• Visualize a webpage's memory usage during a performance recording
  To check how much memory a webpage consumes over the time of a specific user scenario, and to identify potential memory leaks, you can use the Memory tool in Chrome or Edge DevTools with the Memory op... Read more
  Categories:

  • perf

  Supported by:

  • edge
  • chrome
• Highlight areas that the browser engine re-paints
  When you scroll through a webpage, or when parts of the webpage change, the browser engine sometimes needs to repaint parts of the page. The process of converting the layout and style information into... Read more
  Categories:

  • perf
  • highlighter

  Supported by:

  • edge
  • chrome
  • safari
• Find memory leaks by comparing heap snapshots
  Note: If you think your memory leak comes from DOM nodes, you can also use the Detached Elements tool in Edge, see Get detached DOM elements to investigate memory leaks. Memory leaks are hard to find... Read more
  Categories:

  • perf

  Supported by:

  • edge
  • chrome
• Display the current framerate of your webpage
  For a super smooth user experience on your website or app, it's better if the browser manages to render your page at a high framerate. Ideally, this rate should be 60 frames per second (FPS). This giv... Read more
  Categories:

  • perf

  Supported by:

  • edge
  • chrome
• Detect unused CSS and JavaScript code
  To make sure your webpage loads and appears fast for your users, load only the CSS and JS code that your page requires to appear correctly. If some of your CSS or JS code is only needed later, when th... Read more
  Categories:

  • perf
  • css
  • javascript

  Supported by:

  • edge
  • chrome
  • safari
• Throttle your CPU
  Your development machine is very likely much more powerful than the devices your users have (which are probably low-end mobile devices). Before you ship your new app or site, thinking that it will run... Read more
  Categories:

  • perf

  Supported by:

  • edge
  • chrome
• See the size of the transferred data for images, scripts, or other resources
  To know how much data your website transfers between the server and the client to display images, or scripts, or anything else: Open the Network tool. Refresh the page to make sure the list of req... Read more
  Categories:

  • network
  • perf

  Supported by:

  • edge
  • chrome
  • firefox
  • safari
• Show web vitals
  Web vitals are a set of metrics that help you determine how well-built your page is. You can learn more about them here. These scores can be obtained with various online checks like PageSpeed Insights... Read more
  Categories:

  • perf
  • testing

  Supported by:

  • polypane
• Find the most expensive CSS selectors
  When it comes to improving web rendering performance, we often spend time working on JavaScript code. But CSS has an important role to play too in how fast a web page renders. CSS selectors, in partic... Read more
  Categories:

  • css
  • perf

  Supported by:

  • edge
  • chrome
• Automatically get issues your site has with performance, accessibility, security, compatibility, and others.
  Edge has a very useful Issues panel that can automatically list a lot of different issues with your site. It can detect common issues related to browser compatibility, accessibility, performance, secu... Read more
  Categories:

  • accessibility
  • perf
  • testing

  Supported by:

  • edge
• Check if your site can be instantly reloaded from bfcache
  Most browsers are now able to instantly go back to previously visited pages without having to wait for them to load. This ability is powered by the back/forward cache (or bfcache). Firefox, Safari, an... Read more
  Categories:

  • perf

  Supported by:

  • edge
  • chrome
• Record and replay user flows
  Sometimes, you need to repeatedly test the same user scenario on a website. This can happen when working on a fix or a performance improvement. Testing the same user scenario over and over again requi... Read more
  Categories:

  • testing
  • perf

  Supported by:

  • chrome
  • edge
• Query object instances and holders from the console
  All browser DevTools have a few built-in functions in the console to do things like get the current element, or copy a string. But Safari exposes 2 nice built-in functions: queryInstances queryHolder... Read more
  Categories:

  • console
  • perf

  Supported by:

  • safari
• Get detached DOM elements to investigate memory leaks
  Note: This Microsoft Edge-specific feature is being removed starting with Edge 133. The feature that it provides will continue to be available by using the Memory tool instead, and using the upcoming... Read more
  Categories:

  • perf

  Supported by:

  • edge
• Throttle the network speed to test your website on slower connections
  While you may develop your website on a fast network connection at home or at work, your users may not be able to use it with an equally fast connection. Perhaps they're in a moving car, or on the sub... Read more
  Categories:

  • network
  • perf

  Supported by:

  • edge
  • chrome
  • firefox
  • polypane
• View performance markers in order
  When logging performance.timing events to the console, they appear in alphabetical order since they are properties of the PerformanceTiming object. In order to view them in order, you can use console.... Read more
  Categories:

  • javascript
  • perf
  • console

  Supported by:

  • edge
  • chrome
  • safari