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.
From the Windows Blog