CSS Performance – The critical path – THE END
CSS Performance – The critical path – THE END
0 1
css-performance-talk
On Github cironunes / css-performance-talk
CSS Performance
by Ciro Nunes @AvenueCode
> a 1-second page slowdown could cost Amazon $1.6 billion in sales each year.
## Performance == UX
Today I'm going to share 11 performance tips with you
## Agenda
- Front-end Performance 101
- Optimizing the critical path
- Animations
- Selectors
#1 Put styles at the top and scripts at the bottom
#2 Make fewer HTTP requests
#3 Maximize the parallelisation
#4 Use DNS prefetching
```html
<link rel="dns-prefetch" href="http://avenuecode.com/">
```
#5 Gzip and minify the resources
#6 Remove the ability of the user to zoom to eliminate the 300ms click delay(mobile)
Even better, eliminate the 300ms delay without accessibly using FastClick
[developer.yahoo.com/yslow](http://developer.yahoo.com/yslow)
[developers.google.com/speed/pagespeed](http://developers.google.com/speed/pagespeed)
[browserdiet.com](http://browserdiet.com)
The critical path
> “Critical path is the necessary journey between a user requesting your page and then actually seeing something” - [CSS Wizardry](http://www.csswizardry.com/)
Loading CSS blocks the page rendering, so...
Image from phpied.com/css-and-the-critical-path/
## Animations
4 things a browser can animate cheaply
- Position (transform: translate)
- Scale (transform: scale)
- Rotation (transform: rotate)
- Opacity
Paint & Layout
Image from html5rocks.com/en/tutorials/speed/high-performance-animations/
#9 Avoid layout
#10 Animate using transform (it may require translateZ or translate3d)
[daneden.github.io/animate.css/](http://daneden.github.io/animate.css/)
[h5bp.github.io/Effeckt.css/](http://h5bp.github.io/Effeckt.css/)
```css
ul > li > * {
...
}
```
Should we really care?
[TLDR;](http://csswizardry.com/2011/09/writing-efficient-css-selectors/) NO!
#11 Before worrying about CSS Selectors performance (micro improvements) do the basics
## Learn more
- [Front-end Performance Guide - CSS Wizardry](http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/)
- [Browser Diet](http://browserdiet.com/en/)
- [CSS the critical path](http://www.phpied.com/css-and-the-critical-path/)
- [High Performance Animations](http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)
- [Writting Efficient CSS Selectors](http://csswizardry.com/2011/09/writing-efficient-css-selectors/)
- [Avoiding the 300ms click delay](http://timkadlec.com/2013/11/Avoiding-the-300ms-click-delay-accessibly/)