Presentación realizada en el #webcat Barcelona de Marzo del 2012
Autor: Lucas Cepeda (@lucascepeda)
------------------------------------------------
RECURSOS:
- YUI Compressor
http://developer.yahoo.com/yui/compressor/
- Minify
http://code.google.com/p/minify/
- Avoid document.write
http://code.google.com/speed/page-speed/docs/rtt.html#AvoidDocumentWrite
- JavaScript object structure: speed matters
http://jsperf.com/javascript-object-structure-speed-matters/2
- id vs class vs tag vs pseudo vs. attribute selectors
http://jsperf.com/id-vs-class-vs-tag-selectors/2
- JS: Selectores (CSS3 not vs .not)
http://jsperf.com/jquery-css3-not-vs-not
- Finding a DOM element (native vs jQuery vs Prototype)
http://jsperf.com/finding-an-element-w-jquery/6
- Loops
http://jsperf.com/loops/29
- Ternary Operators: a = false
http://jsperf.com/ternary-operators/3
- localStorage vs. Cookies
http://jsperf.com/localstorage-vs-objects/19
- Website Speed Part 1: Write More Efficient CSS
http://speckyboy.com/2011/03/08/website-speed-part-1-write-more-efficient-css
- CSS Specificity Should Be Irrelevant
http://www.impressivewebs.com/css-specificity-irrelevant/
- Optimize browser rendering
http://code.google.com/speed/page-speed/docs/rendering.html
- Our (CSS) Best Practices Are Killing US
http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
- Performance Impact of CSS Selectors
http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors
- Page Speed Family
http://code.google.com/speed/page-speed/docs/
- Exceptional Performance
http://developer.yahoo.com/performance/
- JavaScript object structure: speed matters
http://ariya.ofilabs.com/2012/02/javascript-object-structure-speed-matters.html
- Thinking Async
http://css-tricks.com/thinking-async/
- jsPerf — JavaScript performance playground
http://jsperf.com
2. Optimizaciones muy distintas
● CSS: Optimización para el desarrollador*
● JavaScript: Optimización para el usuario*
@lucascepeda WebcatBCN, 14/03/2012
3. CSS: Lo que ya debes saber
● Código inline, caca
● @import, caca
● Debe ir en el <head>
● Usar shorthand
@lucascepeda WebcatBCN, 14/03/2012
4. CSS: Lo que ya tendrías que hacer
● Combinar
● Minimizar
● Comprimir
@lucascepeda WebcatBCN, 14/03/2012
7. CSS: Minimizar
/*****
Multi-line comment
before a new class name
*****/
.classname {
/* comment in declaration block */
font-weight: normal;
}
@lucascepeda WebcatBCN, 14/03/2012
11. CSS: Lo que quizá no sepas
● 25K
● RTL
#footer .column ul li a { color: #FAFAFA }
● CSS antes que JS en el <head>
@lucascepeda WebcatBCN, 14/03/2012
12. CSS: CSS antes que JS en <head>
@lucascepeda WebcatBCN, 14/03/2012
13. CSS: CSS antes que JS en <head>
@lucascepeda WebcatBCN, 14/03/2012
14. CSS: Best practices
● IDs vs Clases
● Selectores eficientes
● OOCSS
@lucascepeda WebcatBCN, 14/03/2012