CSS Perfomance

 

https://gist.github.com/taesup/b1438c2f377ddf06b5fe

What I'm going to cover

• Writing performant code
• Efficient Debugging
• Sane Deployment

So you wanna make this thing ...

CSS vs. JS

CSS for simple state transitions

JS for complex animations

 

 

https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript?hl=en

Know what's at your hands

• CSS Animations (Key Frame Animations)
• Request Animation Frame
• Web Animation API
• GreenSock (http://greensock.com/gsap)

This thing doesn't work ...

Tools not Rules

 

Debug twice, refactor once (or so...)

But you should probably remember these rules anyway

 

What forces layout / reflow

https://gist.github.com/paulirish/5d52fb081b3570c81e3a

 

layout, paint, composite

http://csstriggers.com/

Showoff your ... thing?

Pre/Post Processors

 

https://medium.com/@vilcins/css-tools-that-i-use-67cb8bfa2e2d

On index.html...

• Initial Payload should be Above the Fold
• Removed Unused CSS - it's still being processed
• Minify everything (including images!)
• Defer the rest of the code till later