Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Useful performance metrics

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?

Ben Schwarz

December 10, 2014
Tweet

More Decks by Ben Schwarz

Other Decks in Technology

Transcript

  1. USEFUL
    FRONT END METRICS

    View full-size slide

  2. The score so far…

    View full-size slide

  3. TIME IS
    MONEY

    View full-size slide

  4. "Accidentally all the money"
    - Amazon

    View full-size slide

  5. 40% OF PEOPLE ABANDON
    YOUR SITE WHEN IT TAKES
    MORE THAN 3 SECONDS
    TO LOAD.

    View full-size slide

  6. 47% OF CONSUMERS EXPECT
    A WEB PAGE TO LOAD IN 2
    SECONDS OR LESS.

    View full-size slide

  7. After a second or more, the user’s flow
    and engagement with the initiated task
    is broken
    - Ilya Grigorik

    View full-size slide

  8. ESTY.COM LEARNT
    ADD 160K TO A PAGE
    +12% BOUNCE RATE ON MOBILE

    View full-size slide

  9. RESPONSE SIZE

    View full-size slide

  10. Everyone on your team is responsible for
    performance

    View full-size slide

  11. What we already know…

    View full-size slide

  12. AKA "THE RULES"

    View full-size slide

  13. MINIFY EVERYTHING.
    USE ASYNC JAVASCRIPT.

    View full-size slide

  14. BASE64ING LARGE FONTS
    "BLOCKS" YOUR OTHER
    STYLES FROM LOADING*

    View full-size slide

  15. ANIMATE USING CSS,
    NOT JAVASCRIPT*.

    View full-size slide

  16. USE REQUESTANIMATIONFRAME
    FOR JS BASED ANIMATION*

    View full-size slide

  17. CHANGING OPACITY, TRANSFORMS, CLIP
    AND FILTERS ARE 'CHEAP' TO DO BECAUSE
    THEY'RE HARDWARE ACCELERATED*

    View full-size slide

  18. POSITION: FIXED; OVERFLOW: SCROLL;
    HOVER EFFECTS, CAN ALL CAUSE
    UNNECESSARY PAINTS WHILE SCROLLING*

    View full-size slide

  19. BOX-SHADOW
    CAN BE KIND OF
    EVIL

    View full-size slide

  20. 60FPS
    OR GTFO!

    View full-size slide

  21. LESS CPU BURNING, PAINTING &
    HEAVY EFFECTS equals less battery burn.

    View full-size slide

  22. ONLY LOAD WHAT YOU
    ACTUALLY NEED.

    View full-size slide

  23. Ok cool, I know everything now…
    What do I do next?

    View full-size slide

  24. SET A BUDGET

    View full-size slide

  25. HOW MUCH IS
    TOO MUCH?

    View full-size slide

  26. Monitor all the things!

    View full-size slide

  27. REAL TIME USER MONITORING
    aka RUM

    View full-size slide

  28. Navigation timing API
    window.performance.timing

    View full-size slide

  29. 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

    View full-size slide

  30. User timing API
    window.performance.getEntries()

    View full-size slide

  31. 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

    View full-size slide

  32. TIME TO FIRST TWEET (TTFT)

    View full-size slide

  33. Set a mark when the user tweets
    window.performance.mark('tweet')

    View full-size slide

  34. Measure the time taken from domComplete
    window.performance.measure('TTFT',
    'domComplete', 'tweet')

    View full-size slide

  35. Get that measurement and send it to your analytics
    window.performance.getEntriesByType('measur
    e')

    View full-size slide

  36. Radical TOOLS

    View full-size slide

  37. PINGDOM / NEW RELIC

    View full-size slide

  38. CSSSTATS.COM

    View full-size slide

  39. CALIBREAPP.COM

    View full-size slide

  40. MONITOR YOUR WORK

    View full-size slide

  41. SET PERFORMANCE BUDGETS

    View full-size slide

  42. DON'T RELY ON WHAT YOU THINK YOU KNOW. PROVE IT.

    View full-size slide

  43. THANK YOU!
    @benschwarz

    View full-size slide