Useful performance metrics

Sometimes we focus on numbers that don't really mean much to performance… now that we 'know everything' about performance — what do we do next?

Transcript

1. USEFUL FRONT END METRICS
2. @BENSCHWARZ
3. The score so far…
4. TIME IS MONEY
5. "Accidentally all the money" - Amazon
6. 40% OF PEOPLE ABANDON YOUR SITE WHEN IT TAKES MORE THAN 3 SECONDS TO LOAD.
7. 47% OF CONSUMERS EXPECT A WEB PAGE TO LOAD IN 2 SECONDS OR LESS.
8. After a second or more, the user’s flow and engagement with the initiated task is broken - Ilya Grigorik
9. ESTY.COM LEARNT ADD 160K TO A PAGE +12% BOUNCE RATE ON MOBILE
10. RESPONSE SIZE
11. Everyone on your team is responsible for performance
12. What we already know…
13. AKA "THE RULES"
14. MINIFY EVERYTHING. USE ASYNC JAVASCRIPT.
15. BASE64ING LARGE FONTS "BLOCKS" YOUR OTHER STYLES FROM LOADING*
16. ANIMATE USING CSS, NOT JAVASCRIPT*.
17. USE REQUESTANIMATIONFRAME FOR JS BASED ANIMATION*
18. CHANGING OPACITY, TRANSFORMS, CLIP AND FILTERS ARE 'CHEAP' TO DO BECAUSE THEY'RE HARDWARE ACCELERATED*
19. POSITION: FIXED; OVERFLOW: SCROLL; HOVER EFFECTS, CAN ALL CAUSE UNNECESSARY PAINTS WHILE SCROLLING*
20. BOX-SHADOW CAN BE KIND OF EVIL
21. 60FPS OR GTFO!
23. LESS CPU BURNING, PAINTING & HEAVY EFFECTS equals less battery burn.
24. ONLY LOAD WHAT YOU ACTUALLY NEED.
28. Ok cool, I know everything now… What do I do next?
29. SET A BUDGET
30. HOW MUCH IS TOO MUCH?
31. Monitor all the things!
32. REAL TIME USER MONITORING aka RUM
34. Navigation timing API window.performance.timing
35. connectEnd: 1425719094911 connectStart: 1425719094800 domComplete: 1425719096142 domContentLoadedEventEnd: 1425719095715 domContentLoadedEventStart: 1425719095677 domInteractive: 1425719095677 domLoading: 1425719095584 domainLookupEnd: 1425719094800 domainLookupStart: 1425719094800 fetchStart: 1425719094795 loadEventEnd: 1425719096143 loadEventStart: 1425719096142 navigationStart: 1425719094795 redirectEnd: 0 redirectStart: 0 requestStart: 1425719094911 responseEnd: 1425719095558 responseStart: 1425719095555 secureConnectionStart: 0 unloadEventEnd: 1425719095558 unloadEventStart: 1425719095557
36. User timing API window.performance.getEntries()
37. connectEnd: 0 connectStart: 0 domainLookupEnd: 0 domainLookupStart: 0 duration: 0 entryType: "resource" fetchStart: 819.8899999842979 initiatorType: "link" name: "http://d3brtmsfoeeao4.cloudfront.net/css/page-setup.9b58d1aa.gz.css" redirectEnd: 0 redirectStart: 0 requestStart: 0 responseEnd: 819.8899999842979 responseStart: 0 secureConnectionStart: 0 startTime: 819.8899999842979
42. TIME TO FIRST TWEET (TTFT)
43. Set a mark when the user tweets window.performance.mark('tweet')
44. Measure the time taken from domComplete window.performance.measure('TTFT', 'domComplete', 'tweet')
45. Get that measurement and send it to your analytics window.performance.getEntriesByType('measur e')
49. Radical TOOLS
50. PINGDOM / NEW RELIC
51. CSSSTATS.COM
52. CALIBREAPP.COM
54. TAKEAWAYS
55. MONITOR YOUR WORK
56. SET PERFORMANCE BUDGETS
57. DON'T RELY ON WHAT YOU THINK YOU KNOW. PROVE IT.
58. THANK YOU! @benschwarz