Measuring and Optimizing Front-End Web Performance

A quick tour through the tools, techniques and things to look out for in order to deliver a fast web experience. We will cover a broad range of topics including:

* Reporting the performance of users visiting your sites
* New browser primitives that provide incredible insight and diagnostics as well as upcoming specs to be aware of
* Testing for web performance
* Best practices around what to measure and how
* Practical hands-on examples with WebPageTest
* What it takes to deliver a visually fast experience
* Implications for mobile
* What changes with HTTP/2
* CDN's
* Third-Party code (Ads, Analytics, Social, etc)

Transcript

1. Web Performance Patrick Meenan @PatMeenan
2. @PatMeenan #doddc www.slideshare.net/patrickmeenan Get the slides
3. Quick Overview
4. Network Waterfall Diagram “Back-end” (226ms) “Front-end” (2,197ms) http://www.webpagetest.org/result/150605_XT_MNM/ CPU Utilization Bandwidth Browser Main Thread (Chrome only) 5-10% Back-end 90-95% Front-end
5. Back-end DNS Lookup (28ms) Socket Connect (93ms) HTTP Request (85ms) Response Download (48ms) HTTP Request – Socket Connect = Back End Time Shoot for < 100ms
6. Back-end
7. Front-end SPOF
8. Blocking scripts, CSS or external fonts
9. When AddThis or typogrgrophy.com is Unavailable…. http://www.webpagetest.org/video/view.php?id=150605_5a7217844002b16a8da2f70be1739092b107dec1
10. And with healthcare.gov… cdn.optimizely.com
11. Testing for SPOF : SPOF-O-Matic https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg?hl=en-US
12. Testing for SPOF : webpagetest.org
13. Web Server CDN Server Test Machine Synthetic Testing
14. Web Server CDN Server Test Machine Gaming Synthetic Testing Use last-mile agents (or traffic shaping)
15. Measure passively APM (Back-End) RUM (Browser-View)
16. APM https://rpm.newrelic.com/
17. RUM https://mpulse.soasta.com/
18. Access Logs FTW! ▪ Tons of “free” data: ▪ Timestamp ▪ Region (IP Lookup) ▪ ISP (IP Lookup) ▪ OS ▪ Browser ▪ Mobile Device ▪ Page (Referer) ▪ Add metrics as URL query params
19. Roll Your Own Reporting Logster https://github.com/etsy/logster StatsD https://github.com/etsy/statsd Graphite http://graphite.wikidot.com/ https://codeascraft.com/2011/02/15/measure-anything-measure-everything/
20. Measurement best-practices ▪  Instrument the user experience ▪  onload (page load time) is a horrible metric ▪  window.performance.mark() ▪  Prefer user experience/visual metrics ▪  Speed Index ▪  Time to start render ▪  “Time to first tweet” ▪  “Time to first pin”
21. Navigation Timing http://www.w3.org/TR/navigation-timing/ window.performance.timing desktop
22. Resource Timing http://www.w3.org/TR/resource-timing/ window.performance.getEntriesByType(“resource”)
23. In-flight W3C Specs ▪  Network Error Logging ▪  http://www.w3.org/TR/network-error-logging/ ▪  Beacon failed requests (policy specified in headers) ▪  Server Timing ▪  http://www.w3.org/TR/server-timing/ ▪  Add metrics to HTTP response header ▪  Metrics exposed to javascript
24. Making it Fast!
25. One Second Pages on Mobile ▪  300ms+ RTT ▪  DNS Lookup + Socket Connect + Request RTT = 900ms ▪  Payload to display above-the-fold content needs to be in first 15KB ▪  Assumes modern server with Initial Congestion Window of 10 ▪  No external resources in the head ▪  inline critical css for above-the-fold ▪  Load full external css later in the body ▪  Scripts at the end of the body (or async if possible)
26. HTTP/2 ▪  Requires HTTPS (in practice) ▪  Multiplexes same-origin requests over single connection ▪  Coalesces connections if alt-name matches and DNS resolves to same IP ▪  Makes a few historical best-practices anti-patterns ▪  Domain sharding ▪  Script/css combining ▪  Image sprites ▪  Servers need to implement priotitization/dependencies ▪  Chrome disables all resource scheduling and sends all requests to server immediately
27. Fast TLS Negotiation ▪  Can be done in 1 RTT ▪  OCSP Stapling (avoid revocation checks) ▪  Implement NPN/ALPN ▪  Even if not advertising HTTP/2 ▪  Enables TLS False Start in Chrome/Firefox ▪  Advertise PFS ciphers ▪  Enables TLS False Start in Safari ▪  Watch certificate chain sizes (relative to initial congestion window) ▪  Update your server (older versions of nginx/HAProxy are bad with > 4KB certs) ▪  Tune TLS buffer sizes https://istlsfastyet.com/
28. Service workers ▪  Javascript-programmable site-wide MITM ▪  Sees every request from all pages on service-worker origin/scope ▪  Including cross-origin requests ▪  And the headers ▪  Can synthesize responses ▪  Supports fetch ▪  Has a programmable cache and Indexed DB ▪  HTTPS only
29. Thank You! @PatMeenan pmeenan@webpagetest.org