What does successful profiling look like?

• Ask the right questions
• Highlight successes
• Isolate flaws

Don't be selfish

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