Slide 1
Slide 1 text
Frontend Performance and You
A Beginner's Guide
Slide 2
Slide 2 text
Frontend Performance and You
A Beginner's Guide Checklist
Slide 3
Slide 3 text
@dcousineau
Slide 4
Slide 4 text
Any improvement is good
Slide 5
Slide 5 text
Always measure first
Slide 6
Slide 6 text
https://support.google.com/analytics/answer/2383341
Slide 7
Slide 7 text
Page Load Time
Redirect
Domain
Lookup
Server
Connect
Server
Response
Document
Interactive
Document Content
Loaded
Parse & Compile
TTI
https://www.bounteous.com/insights/2015/09/09/guide-to-google-analytics-site-speed-metrics/
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
https://speedcurve.com/
Slide 11
Slide 11 text
A word on Lighthouse
Slide 12
Slide 12 text
Making your servers faster is another talk
Slide 13
Slide 13 text
Minify your outputs
Slide 14
Slide 14 text
uglify terser
Slide 15
Slide 15 text
cssnano
Slide 16
Slide 16 text
Implement a CDN
Slide 17
Slide 17 text
Not just for images!
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
47.62ms one-way
95.23ms round-trip
Penalty for simply existing
Slide 22
Slide 22 text
08.11ms one-way
16.23ms round-trip
Penalty for simply existing
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Compress content over the wire
Slide 26
Slide 26 text
Size Saved (Bytes) Saved (%)
uncompressed 1,163,479 0 0.00%
gzip 353,215 810,264 69.64%
zopfli 338,177 825,302 70.93%
brotli 296,420 867,059 74.52%
https://blog.kowalczyk.info/article/c11d3c20753445618b98d18be5ce037e/zopfli-vs.-brotli-vs.-gzip.html
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Reduce request count
Slide 31
Slide 31 text
https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x
Browsers have max persistent connection
limit per domain
https://docs.pushtechnology.com/cloud/latest/manual/html/designguide/solution/support/connection_limitations.html
~6 per domain
Slide 32
Slide 32 text
But domain sharding is old and busted
Slide 33
Slide 33 text
Inline direct dependencies into responses
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Inline initial data into HTML payloads
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Preload / Prefetch
Slide 38
Slide 38 text
(You’re putting your scripts at the bottom right?)
Slide 39
Slide 39 text
https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
Prefetch
Preload I will use this on the current page very soon
I will use this eventually in the future
Slide 40
Slide 40 text
https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
Slide 41
Slide 41 text
But what about h2 push?
Slide 42
Slide 42 text
tl;dr cache issues, proxy support
Slide 43
Slide 43 text
Advanced usage: leveraging your pub/
marketing sites!
Slide 44
Slide 44 text
Slide 45
Slide 45 text
Load only what you need
Stream the rest
Slide 46
Slide 46 text
https://webpack.js.org/guides/code-splitting/
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Load only visible images
Load only what you need part 2:
Slide 49
Slide 49 text
Browser JS is Single-Threaded Concurrency*
* Service Workers change this a little bit
Slide 50
Slide 50 text
Loading & Rendering offscreen images can
impact real (aka not-SEO) performance!
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Better images
Load only what you need part 2:
Slide 53
Slide 53 text
Use srcset to load best sized images
https://docs.imgix.com/tutorials/responsive-images-srcset-imgix
Slide 54
Slide 54 text
Slide 55
Slide 55 text
Use smarter image formats
Don’t send PNG unless you have to
Slide 56
Slide 56 text
Safari
Chrome Send webp Image
Send jpeg2000*
https://docs.imgix.com/tutorials/improved-compression-auto-content-negotiation
*
IE Send jpeg xr
Send jpeg
Slide 57
Slide 57 text
Use a 3rd party to help
Bonus: checks the CDN box
Slide 58
Slide 58 text
Optimized
PERCEIVED
Performance
Slide 59
Slide 59 text
“Lie”
Slide 60
Slide 60 text
http://assets.eli.wtf/talks/perceived-perf-talk/
@elifitch
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Optimistically Render Local Data
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
Selectively Indicate Loading
Slide 65
Slide 65 text
“Fake It Till You Make It”
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
Additional reading
Slide 69
Slide 69 text
https://scotch.io/tutorials/browser-rendering-optimizations-for-frontend-development
Repaint, Reflow
https://developers.google.com/web/fundamentals/performance/rendering/
Slide 70
Slide 70 text
https://scotch.io/tutorials/how-to-use-chrome-dev-tools-to-find-performance-bottlenecks
Chrome DevTool Audits
Slide 71
Slide 71 text
Go to Josh Holme’s talk tomorrow
Slide 72
Slide 72 text
https://github.com/NekR/offline-plugin
Service Workers & offline-plugin
https://webpack.js.org/guides/progressive-web-application/
Slide 73
Slide 73 text
fin.
Questions?