Useful performance metrics

1518538c2cd5fc2e54d4df083f1b3fa6?s=47 Ben Schwarz
December 10, 2014

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?

1518538c2cd5fc2e54d4df083f1b3fa6?s=128

Ben Schwarz

December 10, 2014
Tweet

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!

  22. None
  23. LESS CPU BURNING, PAINTING & HEAVY EFFECTS equals less battery

    burn.
  24. ONLY LOAD WHAT YOU ACTUALLY NEED.

  25. None
  26. None
  27. None
  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

  33. None
  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
  38. None
  39. None
  40. None
  41. None
  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')
  46. None
  47. None
  48. None
  49. Radical TOOLS

  50. PINGDOM / NEW RELIC

  51. CSSSTATS.COM

  52. CALIBREAPP.COM

  53. None
  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