Boosting Web Performance: Microsoft Edge and Office Performance Team’s Innovative DevTools Capabilities

Posted by

The Microsoft Edge team collaborates with the Office Performance team to enhance web performance tools. They have developed new DevTools capabilities to improve web experiences. The complexity of web applications necessitates intentional effort and effective tools to maintain speed and performance.

Boosting Web Performance with Microsoft Edge

Microsoft Edge, in collaboration with the Office Performance team, is raising the bar for web apps performance, irrespective of the device used. This partnership has resulted in new DevTools capabilities that significantly improve the performance of production web experiences.

Understanding Web App Complexity

Web app complexity can be measured in various ways. However, performance often hinges on a few key indicators:

  • Number of nodes in the DOM tree
  • Number of stylesheets and CSS rules in the document
  • Number of HTTP requests and total data size transferred on page load

The more resources a web app requires, the more work the browser has to do. This can affect loading times and app updates.

Microsoft’s Web Products Complexity

Microsoft’s web products like Outlook, Word, Excel, PowerPoint, and Teams are designed to enhance productivity. These powerful tools are correspondingly complex, often requiring more than 5000 CSS rules, creating over 2000 nodes in the DOM tree, and sending dozens of HTTP requests on page load.

“With apps this complex, developers can’t assume they will be fast by default. Building them to be fast, as well as keeping them fast, requires intentional effort and effective tools.”

Performance Tools for Complex Apps

The complexity of these products has led to the development of better performance tools. These tools help in investigating performance issues, often leading to browser-level optimizations for all websites.

Reducing CPU Sampling Overhead

Earlier this year, the Office team made a significant breakthrough while investigating the launch performance of the PowerPoint web app. They noticed significant CPU usage overhead while recording profiles in the Performance tool of Edge DevTools. Using Event Tracing for Windows (ETW), they found that this was due to the way the CPU profiler in Chromium was doing its sampling.

“In some instances, DevTools was seemingly responsible for saturating an engineer’s 10 core CPU while profiling.”

By addressing this issue, they were able to reduce CPU sampling overhead by 95%, significantly improving the performance of the web app.

  • The Microsoft Edge team works with various product teams across Microsoft to enhance web experiences.
  • New DevTools capabilities have been developed in partnership with the Office Performance team.
  • Web applications’ complexity necessitates intentional and ongoing efforts to maintain speed and performance.
  • The team has gained insights into real-world use cases, leading to the creation of better performance tools.
  • The Office team has reduced CPU sampling overhead by 95% in their investigation of the PowerPoint web app’s launch performance.
  • From the Windows Blog