Your SlideShare is downloading. ×
0
Sitios Web Rápidos y Furiosos
Sitios Web Rápidos y Furiosos
Sitios Web Rápidos y Furiosos
Sitios Web Rápidos y Furiosos
Sitios Web Rápidos y Furiosos
Sitios Web Rápidos y Furiosos
Sitios Web Rápidos y Furiosos
Sitios Web Rápidos y Furiosos
Sitios Web Rápidos y Furiosos
Sitios Web Rápidos y Furiosos
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Sitios Web Rápidos y Furiosos

1,829

Published on

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

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
1,829
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SITIOS WEB<br />RAPIDOS & FURIOSOS<br />tuning, nitro y neón<br />
  • 2. ismael briasco<br />max kraszewski<br />CEO PSICOFXP<br />@briascoi<br />CTO PSICOFXP<br />@minimalart<br />
  • 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. 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. Poner scripts al final
  • 6. Minificar CSS y Scripts
  • 7. Diferir la carga de scripts
  • 8. Reducir peticiones HTTP
  • 9. Utilizar una CDN
  • 10. Cache-Control Header
  • 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. Análisis de codigo
  • 13. Análisis de base de datos
  • 14. Metodología y planificación
  • 15. Esquema de desarrollo
  • 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. 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. 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. 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. Finalmente…<br />TE TIENE QUE GUSTAR<br />(sino ponete una pancheria)<br />
  • 21. Muchas Gracias!<br />MAX KRASZEWSKI<br />twitter: @minimalart<br />blog: minimalart.org<br />ISMAEL BRIASCO<br />twitter: @briascoi<br />blog: psicogeek.com<br />

×