Understanding Frontend Performance The tools and methods for debugging performance issues

Philip Tellis Principal RUM Distiller @ Akamai Author of the OpenSource boomerang RUM library twitter:@bluesmoon ⦿ github:@bluesmoon speakerdeck:@bluesmoon

Agenda ● Tools to measure web performance ● Understanding waterfalls ● Understanding browser diagnostic data ● Measuring RUM data ● How do modern web apps complicate things?

WebPageTest.org

Select these two

Select this

Select this

RequestMap.WebPerf.Tools

Google Lighthouse

Chrome Network Waterfall

mPulse Beacon Waterfall

mPulse Aggregate Waterfall

boomerang: https://developer.akamai.com/mpulse/whats-in-a-beacon

SPAs & AMP complicate measurement!

No JavaScript on AMP ● Analytics code cannot run as usual ● Register an amp-analytics tag to collect whitelisted data https://developer.akamai.com/tools/mpulse/amphtml#Introduction ● Alternately, use amp-pixel

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.

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

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

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

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/

Thank You!