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

Recuerda que tienes disponible esta Guía WPO en PDF.

1. ¿Qué es Web Performance Optimization?
   1. ¿Qué tiene en cuenta el Web Performance Optimization?
   2. Web Performance Optimization y las mejoras de conversión
   3. ¿Cómo se puede organizar el Web Performance Optimizacion?
   4. Herramientas que ayudan al Web Performance Optimization
   5. NavigationTiming, el estándar del W3C
2. Reducir peticiones HTTP
   1. Combinar varios CSS o JS en uno
   2. Combinar imágenes o iconos en CSS Sprites
   3. Incluir imágenes en HTML o CSS con el método “data:”
   4. Uso de GET en peticiones AJAX
   5. Uso de JSON en peticiones AJAX
3. Paralelizar peticiones HTTP
   1. Mejor una grande que muchas pequeñas
   2. Incluir los CSS en la parte superior
   3. Incluir los JS en la parte inferior
   4. Uso del atributo «DEFER» para scripts que sin «document.write»
   5. Uso de «non-blocking scripts»
   6. Evitar enlaces a contenidos «404 Not Found»
4. Externalizar contenidos CSS y JS
   1. Ficheros .CSS y .JS cacheables
   2. Mejor usar el tag en vez de @import para los CSS
5. Minimizar CSS y JS
   1. Reducir el tamaño de CSS y JS
   2. Ofuscar el código
   3. Generar un archivo único y cachearlo
   4. Códigos cortos de color
6. Reducir el tamaño de las cookies
   1. Eliminar cookies que no sean necesarias
   2. Reducir el tamaño de las cookies al mínimo posible
   3. Aplicar las cookies al nivel de dominio-subdominio necesario
   4. Aplicar una fecha de eliminación ni muy lejana ni muy temprana
7. Evitar redirecciones
   1. Redirecciones acompañadas de “Expires” o “Cache-Control”
   2. Automatizar la barra “/” al final de URL
   3. Uso del Meta-Refresh
8. Comprimir los contenidos posibles
   1. Usar el protocolo «HTTP/1.1»
   2. Activar el Deflate en Apache
9. Dominios sin cookies
   1. Dominios sin cookies para estáticos
10. Usar ETags
    1. Devolver la cabecera ETag
    2. Cabecera Etag en CDN o Domain Sharding
11. Control de caché y almacenaje estático
    1. Domain Sharding
    2. Distribución geográfica de contenidos estáticos (CDN)
    3. Cabeceras con control de caché y expiración
    4. Caché en contenidos dinámicos
    5. Usar “Cache control: public” para cachear conexiones seguras “HTTPS”
    6. En Apache usar mod_cache, mod_disk_cache, mod_mem_cache, mod_file_cache y htcacheclean
12. PreCarga de elementos
    1. Anticipar y cachear elementos
13. Reducir las peticiones DNS
    1. Minimizar las peticiones externas
    2. Uso de scrips asíncronos
    3. Reducir el uso de CNAME
    4. Configuración de los DNS
    5. DNS prefetching
14. Optimización de las imágenes
    1. Cantidad de colores
    2. Reducir el peso de las imágenes
    3. Codificación de los JPEG
    4. Codificación de los PNG
    5. Escalado de imágenes
    6. Optimizar los CSS Sprites
    7. Usar un «favicon.ico» pequeño y cacheable
    8. Elementos de imágenes sin contenido
    9. Herramientas para optimizar imágenes
15. Optimización de contenidos multimedia
    1. Reducción de ficheros SWF (Adobe Flash)
    2. Optimización de fuentes CSS @font-face
16. Devolver código parcialmente
    1. Función “flush()”
17. Programación en los CSS
    1. Problemas con Internet Explorer
18. Programación de los JS
    1. Optimización General para JavaScript
    2. Optimización para jQuery
19. Elementos DOM
    1. Número elevado de elementos DOM
    2. Reducir el número de <iframe>
    3. Usar tablas con ancho fijo
    4. Cerrar los elementos HTML
20. Tamaño de los contenidos
    1. Devolver contenidos HTML de menos de 25KB
21. Sitios web móviles
    1. Adaptarse a la pantalla del terminal
    2. Adaptarse a la velocidad de conexión
    3. Reducción de peticiones HTTP
    4. Reducir el uso de JavaScript
22. Mejorando el rendimiento de elementos comunes
    1. Código de Google Analytics
    2. Google Analytics para medir la velocidad de carga de una página
    3. Código de Google AdSense
    4. Tiempos de Inactividad del sitio web