Sitios web rápidos y furiosos

Optimización y performance de sitios web.
Charla en Barcamp Litoral 2011

Transcript

2. CEO PSICOFXP @briascoi CTO PSICOFXP @minimalart
3. Cualquiera puede (y debe) seguir una lista de buenas prácticas para mejorar y optimizar su sitio web. Pero las recomendaciones muchas veces se aplican como reglas absolutas, cuando en realidad hay que evaluar cada caso. Porque no es lo mismo un blog, un diario o una red social  
4.   •  Reducir peticiones HTTP •  Utilizar una CDN •  Cache-Control Header •  Gzip de componentes •  Poner estilos principio •  Poner scripts al final •  Minificar CSS y Scripts •  Diferir la carga de scripts •  Análisis de tráfico •  Análisis de codigo •  Análisis de base de datos •  Metodología y planificación •  Esquema de desarrollo •  Infraestructura Las recomendaciones de Yahoo! son las más completas http://developer.yahoo.com/performance/rules.html Además hay otras técnicas y procesos a tener en cuenta durante el desarrollo y mantenimiento de un sitio.
5. Usar una CDN Distribuye de forma más eficiente Analizar alternativas y costos Analizar ubicación del público   CSS Sprites Reduce peticiones HTTP Mantener pequeños los archivos Evaluar rediseños constantes Gzip de componentes Reduce la transferencia Conviene hacerlo desde el server Caché-Control Headers Aprovecha el cache de browsers Es necesario versionar en cambios Estilos al principio, scripts al final Dividir entre estructura y diseño Algunos scripts hay que precargarlos No siempre se debe usar el defer Antes de tomar decisiones es imperativo hacer un análisis, y para ello contar con las herramientas adecuadas SEO Google incluye el tiempo de carga como parámetro de indexación.
6.   El análisis de tráfico permite conocer la actividad de los visitantes de nuestro sitio y actuar en consecuencia. Google Analytics Estadísticas de páginas visitadas http://www.google.com/analytics/ Chartbeat Reportes en tiempo real de la actividad de los visitantes. http://chartbeat.com
7.   El análisis de performance permite monitorear los tiempos de respuesta, visibilidad y rendimiento del sitio. Pingdom Tiempos de carga, alertas de downtime http://tools.pingdom.com/ Google Webmaster Tools Como Google ve tu sitio =) https://www.google.com/webmasters/tools/
8. Optimización de código y consultas En miles de request, los milisegundos cuentan. Lo mismo con las consultas lentas «Release early, release often» es genial para 37signals, pero si no tenemos seniority en el equipo es recomendable la prolijidad. Compresión y optimización de CSS y JS Minificar cada archivo Hacer uso del cache y de una CDN Revisarlo y mejorarlo periodicamente Desarrollar herramientas propias Dashboard Seguimiento de bots y crawlers Mantenerse actualizado Ejemplos: Javascript defer, CSS3 y HTML5 Saber cuando y como utilizarlos Mejora continua Desarrollar, implementar, medir, mejorar, medir, mejorar, medir, mejorar, medir… Realizar A/B testings Equipo y foco Importancia de alguien enfocado en el producto (y que evite los volantazos)
9. TE TIENE QUE GUSTAR (sino ponete una pancheria)
10. MAX KRASZEWSKI twitter: @minimalart blog: minimalart.org ISMAEL BRIASCO twitter: @briascoi blog: psicogeek.com