September 19–20, 2016: Training
September 20–22, 2016: Tutorials & Conference
New York, NY

Using Chrome traces to measure rendering performance of web pages and mobile apps

Parashuram Narasimhan (Microsoft)
3:50pm–4:30pm Thursday, 09/22/2016
Measuring the right things Automation, DevOps Beekman Audience level: Intermediate
Average rating: ****.
(4.86, 7 ratings)

Prerequisite knowledge

  • A basic knowledge of Chrome tracing
  • What you'll learn

  • Understand how Chrome DevTools gets the information that it uses to display various performance information and how this information can be used to collect the right metrics that would be helpful for measuring rendering performance
  • Learn to write scripts that can automate the measurement of rendering performance
  • Description

    Ten years ago, increasing the performance of a website usually meant tweaking the server-side code to spit out responses faster. Today, it is mostly about ensuring that content is delivered to the user as fast as possible. However, it is still very hard to measure the user experience in terms of the smoothness and runtime performance of a website.

    Chrome has excellent devtools that help fixing rendering performance issues in web pages. Parashuram Narasimhan demonstrates how to create scripts that use the same source of information as the devtools to automatically measure metrics like frame rates, paint times, and layout calculations and explains how this method is being used to continuously track rendering performance of web apps.

    Topics include:

    • How to leverage the same source that Chrome DevTools use to collect trace information about a web app’s performance
    • Understanding the events in a Chrome trace and tips and tricks to parse and aggregate them into usable metrics
    • How to plug this back into any web performance system like WebPagetest or Speedcurve so that this information can be monitored continuously
    Photo of Parashuram Narasimhan

    Parashuram Narasimhan

    Microsoft

    Parashuram Narasimhan is a senior program manager with Microsoft. He also works on many interesting open source projects, including Apache Cordova. Parashuram is a frontend developer who is passionate about web performance and likes to talk about performance practices at conferences.