PDF de programación - Web Performance Optimization

Web Performance
Optimization

La velocidad es un elemento diferencial;
el rendimiento es una nueva oportunidad.

08/05/2011
Keep It Simple Lab
Javier Casares

[email protected]
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 <link> en vez de @import para 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 color..................................................................................................................... 21

Reducir el tamaño de las cookies .......................................................................................................... 23

Eliminar cookies que no sean necesarias ........................................................................................... 23

Reducir el tamaño de las cookies al mínimo posible .......................................................................... 23

Aplicar las cookies al nivel de dominio-subdominio necesario ........................................................... 24

Aplicar una fecha de eliminación ni muy lejana ni muy temprana ...................................................... 24

Evitar redirecciones .............................................................................................................................. 25

Redirecciones acompañadas de “Expires” o “Cache-Control” ............................................................ 25

Automatizar la barra “/” al final de URL............................................................................................. 26

Uso del Meta-Refresh ....................................................................................................................... 26

Comprimir los contenidos posibles ....................................................................................................... 27

Usar el protocolo «HTTP/1.1» ........................................................................................................... 27

Activar el Deflate en Apache ............................................................................................................. 27

Dominios sin cookies ............................................................................................................................ 29

Dominios sin cookies para estáticos .................................................................................................. 29

Usar ETags ............................................................................................................................................ 30

Devolver la cabecera ETag ................................................................................................................ 30

Cabecera Etag en CDN o Domain Sharding ........................................................................................ 31

Control de caché y almacenaje estático ................................................................................................ 32

Domain Sharding .............................................................................................................................. 32

Distribución geográfica de contenidos estáticos (CDN) ...................................................................... 33

Cabeceras con control de caché y expiración..................................................................................... 34

Caché en contenidos dinámicos ........................................................................................................ 35

Usar “Cache control: public” para cachear conexiones seguras “HTTPS” ............................................ 35

En Apache usar mod_cache, mod_disk_cache, mod_mem_cache, mod_file_cache y htcacheclean ... 36

PreCarga de elementos......................................................................................................................... 37

Anticipar y cachear elementos .......................................................................................................... 37

Javier Casares – http://webperformanceoptimization.es/

Página 2

WEB PERFORMANCE OPTIMIZATION


Reducir las peticiones DNS.................................................................................................................... 38

Minimizar las peticiones externas ..................................................................................................... 38

Uso de scrips asíncronos ................................................................................................................... 38

Reducir el uso de CNAME.................................................................................................................. 39

Configuración de los DNS .................................................................................................................. 39

DNS prefetching ............................................................................................................................... 40

Optimización de las imágenes ............................................................................................................... 41

Cantidad de colores .......................................................................................................................... 41

Reducir el peso de las imágenes ........................................................................................................ 41

Codificación de los JPEG.................................................................................................................... 42

Codificación de los PNG .................................................................................................................... 43

Escalado de imágenes ....................................................................................................................... 43

Optimizar los CSS Sprites .................................................................................................................. 44

Usar un «favicon.ico» pequeño y cacheable ...................................................................................... 45

Elementos de imágenes sin contenido .............................................................................................. 45

Herramientas para o