concha

Web Performance
Optimization

La velocidad es un elemento diferencial;
el rendimiento es una nueva oportunidad.
08/05/2011
Keep It Simple Lab
Javier Casares
javier.casares@kisslab.com
http://webperformanceoptimization.es/
http://keepitsimplelab.com/

WEB PERFORMANCE OPTIMIZATION

CONTENIDO
¿Qué es Web Performance Optimization?.............................................................................................. 5
¿Qué tiene en cuenta el Web Performance Optimization? .................................................................. 6
Web Performance Optimization y las mejoras de conversión .............................................................. 6
¿Cómo se puede organizar el Web Performance Optimizacion?.......................................................... 7
Herramientas que ayudan al Web Performance Optimization ............................................................. 7
NavigationTiming, el estándar del W3C ............................................................................................... 8
Reducir peticiones HTTP....................................................................................................................... 11
Combinar varios CSS o JS en uno ....................................................................................................... 11
Combinar imágenes o iconos en CSS Sprites ...................................................................................... 12
Incluir imágenes en HTML o CSS con el método“data:”..................................................................... 12
Uso de GET en peticiones AJAX ......................................................................................................... 14
Uso de JSON en peticiones AJAX ....................................................................................................... 14
Paralelizar peticiones HTTP................................................................................................................... 15
Mejor una grande que muchas pequeñas.......................................................................................... 15
Incluir los CSS en la parte superior .................................................................................................... 15
Incluir los JS en la parte inferior........................................................................................................ 16
Uso del atributo «DEFER» para scripts que sin «document.write» ..................................................... 16
Uso de «non-blocking scripts» .......................................................................................................... 16
Evitar enlaces a contenidos «404 Not Found»................................................................................... 18
Externalizar contenidos CSS y JS............................................................................................................ 19
Ficheros .CSS y .JS cacheables ........................................................................................................... 19
Mejor usar el tag en vez de @importpara los CSS ................................................................... 19
Minimizar CSS y JS ................................................................................................................................ 20
Reducir el tamaño de CSS y JS ........................................................................................................... 20
Ofuscar el código.............................................................................................................................. 20
Generar un archivo único y cachearlo ............................................................................................... 21

Javier Casares – http://webperformanceoptimization.es/

Página 1

WEB PERFORMANCE OPTIMIZATION

Códigos cortos de...