Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understanding Frontend Performance

Understanding Frontend Performance

One of the first things to do when working on performance improvements is to start measuring. We cannot improve what we don’t measure, and things that are measured and watched tend to improve over time. The earlier talks in this track discussed which metrics were important to measure. In this talk, we’ll go over how to measure performance, and how to get useful diagnostics out of our tools.

We will cover:

* Tools to measure web performance
* Understanding waterfalls
* Understanding browser diagnostic data
* Measuring RUM data
* How do modern web applications complicate the situation?
* Single Page Applications (SPAs)
* Accelerated Mobile Pages (AMP

Philip Tellis

May 22, 2019

More Decks by Philip Tellis

Other Decks in Technology


  1. Philip Tellis Principal RUM Distiller @ Akamai Author of the

    OpenSource boomerang RUM library twitter:@bluesmoon ⦿ github:@bluesmoon speakerdeck:@bluesmoon
  2. Agenda • Tools to measure web performance • Understanding waterfalls

    • Understanding browser diagnostic data • Measuring RUM data • How do modern web apps complicate things?
  3. No JavaScript on AMP • Analytics code cannot run as

    usual • Register an amp-analytics tag to collect whitelisted data <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"> </script> <amp-analytics type="mpulse" config="mpulse/api/amp-config.json..."> </amp-analytics> https://developer.akamai.com/tools/mpulse/amphtml#Introduction • Alternately, use amp-pixel <amp-pixel src="http://myserver.com/beacon?u= AMPDOC_URL&t=PAGE_LOAD_TIME">
  4. SPAs Are Different • Some user actions result in a

    soft navigation • No browser event to tell you when a soft navigation ended • Resource Timing Buffer fills up • WebPageTest works with scripting Page transitions without a full reload means most APIs don’t have relevant data.
  5. Our approach to measuring SPAs • Look for network activity

    or DOM mutations that happen soon after a user action • Keep listening for more activity until we hit a timeout. • If images or CSS, or other renderable assets were fetched, wait for them to complete https://www.slideshare.net/nicjansma/measuring-the-performance-of-single-page-applications
  6. Our approach to measuring SPAs • Additionally, if the browser

    supports Resource Timing, we can use values from there to construct navigation time points. • We need to clear the resource timing buffer after each beacon. This is easier to see with a quick demo https://www.slideshare.net/nicjansma/measuring-the-performance-of-single-page-applications
  7. Summary • There are many tools freely available for developers

    to study their site’s performance • Looking at Waterfalls individually and in aggregate gives different insights • Modern development frameworks require creative ways to study performance Boston Shipyard Artist’s Community
  8. References • WebPageTest.org • RequestMap • Lighthouse • github.com:boomerang •

    mPulse Aggregate Waterfall • What’s in an mPulse beacon • AMP in mPulse • AMP does it really make your site faster • Measuring the performance of Single Page Applications • Scripting WebPageTest • https://virtualglobetrotting.com/