Performance is important.

Developer time is important.

Performance Tooling

Jack Lawson

Software Engineer, Airbnb

@ajacksified

The Web Request

  1. User enters url in browser
  2. DNS fetch
  3. Hit CDN server from DNS
  4. Request from origin app server
  5. App server requests data from database / services
  6. Browser starts receiving html
  7. Load styles, images, js from CDN
  8. Finished loading assets
  9. Finished running post-load scripts

Backend performance

  1. User enters url in browser
  2. DNS fetch
  3. Hit CDN server from DNS
  4. Request from origin app server
  5. App server requests data from database / services
  6. Browser starts receiving html
  7. Load styles, images, js from CDN
  8. Finished loading assets
  9. Finished running post-load scripts

Frontend performance

  1. User enters url in browser
  2. DNS fetch
  3. Hit CDN server from DNS
  4. Request from origin app server
  5. App server requests data from database / services
  6. Browser starts receiving html
  7. Load styles, images, js from CDN
  8. Finished loading assets
  9. Finished running post-load scripts

Page Load Milestones

  1. User enters url in browser
  2. DNS fetch
  3. Hit CDN server from DNS
  4. Request from origin app server
  5. App server requests data from database / services
  6. (TTFB) Browser starts receiving html
  7. (Render) Load styles, images, js from CDN
  8. (Load Time) Finished loading assets
  9. (Finished) Finished running post-load scripts

Backend Performance

  1. User enters url in browser
  2. DNS fetch
  3. Hit CDN server from DNS
  4. Request from origin app server
  5. App server requests data from database / services
  6. (TTFB) Browser starts receiving html

Backend Performance >

Optimize Your Server

NewRelic Performance Monitoring

NewRelic helps you identify slow pages and figure out why they're slow.

Backend Performance

>

Optimize Your Server

Backend Performance

>

Optimize Your Server

Backend Performance

>

Optimize Your Server

Backend Performance

>

Optimize Your Server

Caching

Skip hitting your server entirely.

Backend Performance

>

Optimize Your Network

Frontend Performance

  • 7. (Render) Load styles, images, js from CDN
  • 8. (Load Time) Finished loading assets
  • 9. (Finished) Finished running post-load scripts

Frontend Performance

Performance Golden Rule

Make Less Requests for Smaller Content

Frontend Performance

In the Cloud

High latency, packet loss, slow browsers, deep packet inspection, old computers, unreliable mobile networks

The Speed of Light

299,792,458 m / s

Frontend Performance

From EC2 in Virginia

  • 15ms to San Francisco
  • 36ms to Tokyo

Frontend Performance

I Don't Have a Direct Cable From My Server In Virginia to My Computer

Frontend Performance

distance * speed of light gives us two things to change

Lower the distance

Increase the speed of light

Frontend Performance

Wormholes

Are Prohibitively Expensive

Frontend Performance

Move The Content Closer

Edge Caching via Akamai

Frontend Performance

Measuring Your Frontend Performance

Frontend Performance >

Tooling

RUM (Real User Metrics)

Global 50th percentile load time, Airbnb.com

Frontend Performance >

Tooling >

Rum

50th percentile load time by page, Airbnb.com

Frontend Performance >

Tooling >

Rum

50th percentile load time by region, Airbnb.com

Frontend Performance >

Tooling >

Rum

50th percentile load time by experiment, Airbnb.com

Frontend Performance >

Tooling

New Relic's Apdex

Frontend Performance >

Tooling

Your Browser's Network Tab

Frontend Performance >

Tooling

PageSpeed

Frontend Performance >

Tooling

WebPageTest

Frontend Performance >

Tooling

Tying It All Together

  • Performance increases happiness and decreases bounce rate
  • Focus on efficient fixes by measuring impact
  • Identify slow requests with NewRelic and RUM
  • Identify what's slow with WebPageTest, browser tests, and PageSpeed
  • Track fixes with NewRelic and RUM

Any questions?