Profiling your
web app

1 August 1991

25 years ago

Tim Berners-Lee published

the first website

Average Page Size

2.4 MB

http://httparchive.org/interesting.php?a=All&l=Jul%2015%202016

14%

increase since 2015

33%

increase since 2014

What it is

  • Page Performance
     
  • Dynamic
  • Custom
  • Developer tool
  • Product tool

What it isn't

  • Just performance metrics
  • Once-and-done
  • One-size-fits all
  • Post-dev process
  • Report

Who should worry about profiling?

  • Engineers
    • ​Back-end, Front-end, DevOps
  • UX
  • Product Management
  • Support
  • Everyone
    (except HR and Accounting)

What does successful profiling look like?

  • Ask the right questions
  • Highlight successes
  • Isolate flaws

Don't be selfish

Open Your DevTools

Network tab

  • Requests/
    Duration
  • Errors
  • File sizes
  • Time in flight
  • Summary

Network tab

Protocol
(http2, SPDY)

Content-encoding
(gzip)

Timeline tab

Overview

Screen captures

JS flame chart





Details

FPS

  • Higher green bar, higher FPS
  • Red blocks above are long frames, likely candidates for jank

CPU

  • CPU resources consumed by event type

     
  • Striped colors == off of the main thread  

NET

  • Each bar represents resource request over time
HTML Files Scripts Stylesheets Media Files Miscellaneous

Flame chart shows every JavaScript function call.

Works best with development scripts.

  • Green line represents time to first paint
  • Blue line represents the DOMContentLoaded event
  • Red line represents the load event.

Key moments in page load

Time to first paint

"Is it happening?"

Time to first meaningful paint

"Is it useful?"

Time to first

meaningful interaction

"Is it usable?"

https://twitter.com/addyosmani/status/760490332983177216

RAIL

Performance model

TL;DR

  • Focus on the user; the end goal is to ultimately make users happy
  • Respond to users immediately; acknowledge user input in under 100ms
  • Render each frame in under 16ms and aim for consistency; users notice 'jank'
  • Maximize main thread idle time
  • Keep users engaged; deliver interactive content in under 1000ms

Awesome tool that you already have access to*

Features

  • Page Load time
    • Entire page load cycle
  • Timing AJAX calls
  • Time spent
    • in the front end (browser)
    • in the back end (network and web app)
  • Geographic origin
  • Browser type and version
  • Operating system
  • SPA route changes
  • Logs JavaScript errors

Documentation/Help

  • Confluence: newrelic/

  • Slack: #new-relic

Asking the right questions

  • How can the page make users happy?
  • Can interaction responses be improved?
  • Is there any unintended disconnect?
  • How to keep users engaged while waiting?
  • What is "meaningful" in context of your app?
  • What is "usable" in context? "Fully usable"?

How can you best quantify these answers?

Tips & Resources

Profiling your web app

By Carlos Filoteo

Profiling your web app

  • 602