CSS Performance

by Ciro Nunes @AvenueCode

> a 1-second page slowdown could cost Amazon $1.6 billion in sales each year.

![Performance == UX](http://3vavpsbeqbk19ao0rfgkqm17sj.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/Jakob-Nielsen-response-time-infographic.jpg)

## 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

![Yslow](img/yslow.png) [developer.yahoo.com/yslow](http://developer.yahoo.com/yslow)

![Page Speed](img/page-speed.png) [developers.google.com/speed/pagespeed](http://developers.google.com/speed/pagespeed)

![Browser Diet](img/browser-diet.png) [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...

#7 Serve CSS files from the same host (No DNS lookups).

#8 Consider using inline styles

![Google stylesheets](http://www.phpied.com/wp-content/uploads/2012/06/g.jpg)

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

![Animations](http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/devtools-waterfall.jpg)

Image from html5rocks.com/en/tutorials/speed/high-performance-animations/

#9 Avoid layout

#10 Animate using transform (it may require translateZ or translate3d)

![Animate.css](img/animate.png) [daneden.github.io/animate.css/](http://daneden.github.io/animate.css/)

![Effeckt.css](img/effeckt.png) [h5bp.github.io/Effeckt.css/](http://h5bp.github.io/Effeckt.css/)

## Selectors

Key selector

```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/)

THE END

by Ciro Nunes @Avenue Code

cironunes.com/css-performance-talk