Optimización JS y CSS

Optimización CSS y JavaScript @lucascepeda WebcatBCN, 14/03/2012

Optimizaciones muy distintas @lucascepeda WebcatBCN, 14/03/2012 • CSS: Optimización para
el desarrollador* • JavaScript: Optimización para el usuario*

CSS: Lo que ya debes saber @lucascepeda WebcatBCN, 14/03/2012 •
Código inline, caca • @import, caca • Debe ir en el <head> • Usar shorthand

CSS: Lo que ya tendrías que hacer @lucascepeda WebcatBCN, 14/03/2012
• Combinar • Minimizar • Comprimir

CSS: Combinar @lucascepeda WebcatBCN, 14/03/2012 <head> <link rel="stylesheet" type="text/css" href="styles/yellow.css">
<link rel="stylesheet" type="text/css" href="styles/blue.css"> <link rel="stylesheet" type="text/css" href="styles/big.css"> <link rel="stylesheet" type="text/css" href="styles/bold.css"> </head>

CSS: Combinar @lucascepeda WebcatBCN, 14/03/2012 <head> <link rel="stylesheet" type="text/css" href="styles/combined.css">
</head>

CSS: Minimizar @lucascepeda WebcatBCN, 14/03/2012 /***** Multi-line comment before a
new class name *****/ .classname { /* comment in declaration block */ font-weight: normal; }

CSS: Minimizar @lucascepeda WebcatBCN, 14/03/2012 .classname{font-weight:normal}

CSS: Combinar y minimizar @lucascepeda WebcatBCN, 14/03/2012 YUI Compressor: http://developer.yahoo.com/yui/compressor/
minify: http://code.google.com/p/minify/

CSS: Comprimir @lucascepeda WebcatBCN, 14/03/2012 En servidor (apache, node.js, lighttp,
IIS...) • gzip • zlib

CSS: Lo que quizá no sepas @lucascepeda WebcatBCN, 14/03/2012 •
25K • RTL • CSS antes que JS en el <head> #footer .column ul li a { color: #FAFAFA }

CSS: CSS antes que JS en <head> @lucascepeda WebcatBCN, 14/03/2012

CSS: Best practices @lucascepeda WebcatBCN, 14/03/2012 • IDs vs Clases
• Selectores eficientes • OOCSS

CSS: Optimización prematura @lucascepeda WebcatBCN, 14/03/2012

CSS: Problemas conocidos @lucascepeda WebcatBCN, 14/03/2012 • :hover en elementos
distintos que <a> • border-radius en IE9 • Expresiones en IE

JS: Lo que ya debes saber @lucascepeda WebcatBCN, 14/03/2012 •
Bloques <script> al final • Evitar document.write • eval es evil

JS: Lo que ya tendrías que hacer @lucascepeda WebcatBCN, 14/03/2012
• Combinar • Minimizar • Comprimir

JS: Combinar @lucascepeda WebcatBCN, 14/03/2012

JS: Lo que quizá no sepas @lucascepeda WebcatBCN, 14/03/2012 •
Smart Event Handler • Mantener la estructura de los objetos • Selectores

JS: Smart Event Handlers @lucascepeda WebcatBCN, 14/03/2012

JS: Mantener estructura en objetos @lucascepeda WebcatBCN, 14/03/2012 var universe
= { answer: 42 }; // do something else universe.panic = false;

JS: Mantener estructura en objetos @lucascepeda WebcatBCN, 14/03/2012 var universe
= { answer: 42, panic: true }; // do something else universe.panic = false;

JS: Mantener estructura en objetos @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/javascript-object-structure-speed-matters/2

JS: Selectores @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/id-vs-class-vs-tag-selectors/2

JS: Selectores (CSS3 not vs .not) @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/jquery-css3-not-vs-not

JS: Selectores (nativo vs liberías) @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/finding-an-element-w-jquery/6

JS: Loops @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/loops/29

JS: ?????? @lucascepeda WebcatBCN, 14/03/2012 Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(',,').push(1)]

JS: ?????? @lucascepeda WebcatBCN, 14/03/2012 Array(2).concat(b, c)[String(a).match(/(t)|(f)/).join().split(',,').push(1)] [0, 1, 2,
3, b, c][String(a).length]

3, b, c][String(a).length] ({ 'true': b, 'false': c })[a]

3, b, c][String(a).length] ({ 'true': b, 'false': c })[a] switch(a) { case true: return b case false: return c }

JS: ternary operator vs alternatives @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/ternary-operators/3

JS: localStorage vs cookies @lucascepeda WebcatBCN, 14/03/2012 http://jsperf.com/localstorage-vs-objects/19

Referencias CSS @lucascepeda WebcatBCN, 14/03/2012 http://speckyboy.com/2011/03/08/website-speed-part-1-write-more-efficient-css http://www.impressivewebs.com/css-specificity-irrelevant/ http://code.google.com/speed/page-speed/docs/rendering.html http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors

Referencias JS @lucascepeda WebcatBCN, 14/03/2012 http://code.google.com/speed/page-speed/docs/ http://developer.yahoo.com/performance/ http://ariya.ofilabs.com/2012/02/javascript-object-structure-speed-matters.html http://css-tricks.com/thinking-async/ http://jsperf.com

Gracias @lucascepeda WebcatBCN, 14/03/2012

@lucascepeda WebcatBCN, 14/03/2012

Optimización JS y CSS

Optimización JS y CSS

More Decks by Lucas Cepeda

Other Decks in Design

Featured

Transcript