Sitios Web Rápidos y Furiosos

2,011 views

Published on

Presentación en Barcamp Litoral 2011 sobre técnicas y tips de optimización y performance de sitios web

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,011
On SlideShare
0
From Embeds
0
Number of Embeds
1,180
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sitios Web Rápidos y Furiosos

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

×