Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
USEFUL FRONT END METRICS
Slide 2
Slide 2 text
@BENSCHWARZ
Slide 3
Slide 3 text
The score so far…
Slide 4
Slide 4 text
TIME IS MONEY
Slide 5
Slide 5 text
"Accidentally all the money" - Amazon
Slide 6
Slide 6 text
40% OF PEOPLE ABANDON YOUR SITE WHEN IT TAKES MORE THAN 3 SECONDS TO LOAD.
Slide 7
Slide 7 text
47% OF CONSUMERS EXPECT A WEB PAGE TO LOAD IN 2 SECONDS OR LESS.
Slide 8
Slide 8 text
After a second or more, the user’s flow and engagement with the initiated task is broken - Ilya Grigorik
Slide 9
Slide 9 text
ESTY.COM LEARNT ADD 160K TO A PAGE +12% BOUNCE RATE ON MOBILE
Slide 10
Slide 10 text
RESPONSE SIZE
Slide 11
Slide 11 text
Everyone on your team is responsible for performance
Slide 12
Slide 12 text
What we already know…
Slide 13
Slide 13 text
AKA "THE RULES"
Slide 14
Slide 14 text
MINIFY EVERYTHING. USE ASYNC JAVASCRIPT.
Slide 15
Slide 15 text
BASE64ING LARGE FONTS "BLOCKS" YOUR OTHER STYLES FROM LOADING*
Slide 16
Slide 16 text
ANIMATE USING CSS, NOT JAVASCRIPT*.
Slide 17
Slide 17 text
USE REQUESTANIMATIONFRAME FOR JS BASED ANIMATION*
Slide 18
Slide 18 text
CHANGING OPACITY, TRANSFORMS, CLIP AND FILTERS ARE 'CHEAP' TO DO BECAUSE THEY'RE HARDWARE ACCELERATED*
Slide 19
Slide 19 text
POSITION: FIXED; OVERFLOW: SCROLL; HOVER EFFECTS, CAN ALL CAUSE UNNECESSARY PAINTS WHILE SCROLLING*
Slide 20
Slide 20 text
BOX-SHADOW CAN BE KIND OF EVIL
Slide 21
Slide 21 text
60FPS OR GTFO!
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
LESS CPU BURNING, PAINTING & HEAVY EFFECTS equals less battery burn.
Slide 24
Slide 24 text
ONLY LOAD WHAT YOU ACTUALLY NEED.
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Ok cool, I know everything now… What do I do next?
Slide 29
Slide 29 text
SET A BUDGET
Slide 30
Slide 30 text
HOW MUCH IS TOO MUCH?
Slide 31
Slide 31 text
Monitor all the things!
Slide 32
Slide 32 text
REAL TIME USER MONITORING aka RUM
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Navigation timing API window.performance.timing
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
User timing API window.performance.getEntries()
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
TIME TO FIRST TWEET (TTFT)
Slide 43
Slide 43 text
Set a mark when the user tweets window.performance.mark('tweet')
Slide 44
Slide 44 text
Measure the time taken from domComplete window.performance.measure('TTFT', 'domComplete', 'tweet')
Slide 45
Slide 45 text
Get that measurement and send it to your analytics window.performance.getEntriesByType('measur e')
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Radical TOOLS
Slide 50
Slide 50 text
PINGDOM / NEW RELIC
Slide 51
Slide 51 text
CSSSTATS.COM
Slide 52
Slide 52 text
CALIBREAPP.COM
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
TAKEAWAYS
Slide 55
Slide 55 text
MONITOR YOUR WORK
Slide 56
Slide 56 text
SET PERFORMANCE BUDGETS
Slide 57
Slide 57 text
DON'T RELY ON WHAT YOU THINK YOU KNOW. PROVE IT.
Slide 58
Slide 58 text
THANK YOU! @benschwarz