Performance: Beyond Your Portfolio
Transcript of Performance: Beyond Your Portfolio
![Page 1: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/1.jpg)
Performance: Beyond Your Portfolio
FITC WEB UNLEASHED - OCTOBER 4TH, 2016
![Page 2: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/2.jpg)
Welcome.
![Page 3: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/3.jpg)
* jokes may not be as funny
![Page 4: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/4.jpg)
Welcome.
![Page 5: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/5.jpg)
*
![Page 6: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/6.jpg)
Luke DeWitt
WEB TEAM LEAD / DAD / ALL AROUND GOOD GUY
… who are you?
![Page 7: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/7.jpg)
![Page 8: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/8.jpg)
![Page 9: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/9.jpg)
![Page 10: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/10.jpg)
RAIL
![Page 11: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/11.jpg)
RESPONSE
![Page 12: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/12.jpg)
ANIMATION
![Page 13: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/13.jpg)
IDLE
![Page 14: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/14.jpg)
LOAD
![Page 15: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/15.jpg)
Response Animation Idle Load
![Page 16: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/16.jpg)
It’s all about the user…
![Page 17: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/17.jpg)
Response Times
0.1second
“Instantaneous Reaction”
1second
“Uninterrupted Flow of Thought”
10seconds
“User’s Attention”
![Page 18: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/18.jpg)
Show of hands…
![Page 19: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/19.jpg)
SQUIRREL!!!
![Page 20: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/20.jpg)
Response Animation Idle Load
![Page 21: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/21.jpg)
Response
100ms = Lag
Immediate, with substance
User Perceived Performance
![Page 22: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/22.jpg)
Animation
![Page 23: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/23.jpg)
![Page 24: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/24.jpg)
![Page 25: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/25.jpg)
60 FPS
![Page 26: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/26.jpg)
![Page 27: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/27.jpg)
60 FPS
16ms to react
![Page 28: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/28.jpg)
Idle
Simple tasks
Aim for < 50ms
![Page 29: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/29.jpg)
Load
![Page 30: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/30.jpg)
SQUIRREL!!!
![Page 31: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/31.jpg)
Load
Load in < 1s
Focus on critical path rendering
User perceived performance
![Page 32: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/32.jpg)
Critical Path Rendering0.0s 0.3s 0.8s 1.2s 1.5s
![Page 33: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/33.jpg)
Critical Path CSS
![Page 34: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/34.jpg)
![Page 35: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/35.jpg)
Eliminate Render Blocking JavaScript
![Page 36: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/36.jpg)
Render Blocking
LOADED IN
<head>
LOADED BEFORE
</body>
![Page 37: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/37.jpg)
Image Optimizations
![Page 38: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/38.jpg)
Image Compression
TinyPNG https://tinypng.com
![Page 39: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/39.jpg)
1.7MB 305.9kb
Image Compression
-82%
![Page 40: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/40.jpg)
Responsive Images
![Page 41: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/41.jpg)
Lazy Loading Images
![Page 42: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/42.jpg)
File Compression Gzip
![Page 43: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/43.jpg)
File Delivery
![Page 44: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/44.jpg)
HTTP/2
![Page 45: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/45.jpg)
HTTP/2 == SPDY?
![Page 46: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/46.jpg)
![Page 47: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/47.jpg)
• Concatenate files • Inline Assets • Combine Images • Domain Sharding
![Page 48: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/48.jpg)
Components of an HTTP Request
– Chapter 10. Primer on Web Performance
![Page 49: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/49.jpg)
What’s cool in HTTP/2
![Page 50: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/50.jpg)
Binary Protocol
![Page 51: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/51.jpg)
Multiplexing
![Page 55: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/55.jpg)
![Page 57: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/57.jpg)
Header Compression
![Page 58: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/58.jpg)
*HTTP/2 requires TLS
![Page 59: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/59.jpg)
Getting Ready
![Page 60: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/60.jpg)
![Page 61: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/61.jpg)
Getting Ready
![Page 62: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/62.jpg)
Browser Support
![Page 63: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/63.jpg)
Node.js PHP Go
Scala Microsoft ISS
CloudFlare CloudFront
Akamai nginx
Apache
![Page 64: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/64.jpg)
HTTP/2 is here!
![Page 65: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/65.jpg)
Questions?
redspace.com / T (902) 444.3490 FACEBOOK REDspace
TWITTER @theREDspace
LINKEDIN The REDspaceLUKE DEWITT @whatadewitt
![Page 66: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/66.jpg)
![Page 67: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/67.jpg)
Questions?
redspace.com / T (902) 444.3490 FACEBOOK REDspace
TWITTER @theREDspace
LINKEDIN The REDspaceLUKE DEWITT @whatadewitt
![Page 68: Performance: Beyond Your Portfolio](https://reader031.fdocuments.us/reader031/viewer/2022022413/58ee2e7f1a28ab2b0b8b45a5/html5/thumbnails/68.jpg)
THANK YOU!
Oh, by the way, we’re hiring! http://redspace.recruiterbox.com