Web Performance Made Easy from BrowserMobProxy to Dev Tools API

The Internet gets heavier and heavier every year. If we check the state of the web we can see that a median page on mobile weights at about 1.5MB, with the majority of that being JavaScript and images.

The growing size of the websites, together with other factors, like network latency, CPU limitations, render blocking patterns, contributes to the complicated performance puzzle.

Most users rate speed as being at the very top of the UX hierarchy of their needs. The current client whom I consulted had a lot of users moving away from their website and we had to work with them to improve web performance and measure performance as part of CI/CD practices.

This talk will look into solutions that I used to automatically capture web metrics and performance assertions using Webdriver and Chrome Dev Tools. Looking at the tracing data it’s hard to understand what the measure looks like. You will learn how tracing data is structured and how you can compute the important user experience metric. I will deep dive into Lighthouse building blocks, its architecture and learn how we can start auditing and collecting custom metrics for our web pages.

Lighthouse is an audit tool developed by Google which collects different metrics of your website. After collecting the metrics it will present a series of scores for your webpage.

We will also talk through LightWallet on how to calculate the budget. A performance budget is a set of limits imposed on metrics that affect site performance. This could be the total size of a page, the time it takes to load on a mobile network, or even the number of HTTP requests that are sent. Defining a budget helps get the web performance conversation started. It serves as a point of reference for making decisions about design, technology, and adding features.

 
 

Outline/Structure of the Talk

In this talk, I will cover my learnings with the following points:

  • Why Web performance matter? ~ 3 mins
  • Client-Side Performance Testing ~ 5 mins
  • Performance Metrics ~ 3 mins
  • W3C Spec Overview ~ 2 min
  • From BrowserMobProxy to DevTools API ~ 2 mins
  • Google’s Lighthouse and ways to use it ~ 7 mins
  • Selenium 4 + Performance Metrics - Live Demo ~ 15 mins
    • Architecture & Events exposed by CDP
    • Time ticks vs Thread ticks
    • Run over the captured metrics
  • Performance Budgets - LightWeight ~ 5mins

Learning Outcome

Understand the Importance of Web Performance.

Measure different metrics and understand how to compute the data.

How to use WebDriver to drive these metrics.

Lighthouse and It’s usage.

Target Audience

Testers, Developers

schedule Submitted 8 months ago

Public Feedback

comment Suggest improvements to the Speaker
  • Robin Gupta
    By Robin Gupta  ~  7 months ago
    reply Reply

    Can you please add low level architecture/technical details on point 7 from the outline for greater details into the presentation?

    • Srinivasan Sekar
      By Srinivasan Sekar  ~  7 months ago
      reply Reply

      Hi Robin,

      Detail requested is shared as the link now. Architecture is the same as detailed out there but this talk is performance heavy and only driven by performance compared to the one shared. let me know if you need more details.

  • Deepti Tomar
    By Deepti Tomar  ~  7 months ago
    reply Reply

    Hello Sai & Srinivasan,

    Thanks for your proposal!

    Could you please update the Outline/Structure section of your proposal with a time-wise breakup of how you plan to use 45 mins for the topics you've highlighted?

    Thanks!

    • Srinivasan Sekar
      By Srinivasan Sekar  ~  7 months ago
      reply Reply

      Hi Deepti,

      Details are updated now. Thanks.