Técnicas Ninja!Optimización Web +ASP.NET AJAX<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br />
Microsoft Confidential<br />Sabia que?<br />«En la mayoría de las paginas web, menos del 10 - 20% del tiempo de carga de u...
Agenda<br />NecesidadOptimización<br />Optimización - Compromiso del Team<br />Optimización Web<br />Optimizacion ASP.NET ...
Proceso Necesidad de Optimización<br />Proceso mayormente reactivo<br />Aplicaciones testeadas en escenarios irreales:<br ...
Procesamiento excesivo de Javascript<br />Tamaño de Imágenes no apropiadas<br />Tamaño de archivos JS descomunales<br />Ro...
Optimización  - compromiso del Team<br />Actividad Proactiva del equipo<br />Analizar para buscar puntos de optimización d...
Tips de Optimización<br />Excelente Libro<br />High Performance Web Sites<br />Steve Souder<br /><ul><li>14 Reglas de Oro.
Guía indispensable  para desarrolladores Web.
Revisaremos algunos de estas reglas a continuación:</li></ul>Microsoft Confidential<br />
Realizar menos peticiones HTTP<br />Utilizando CSS Sprites<br />Reducción de Tiempos hasta en ~50%<br />Evita hacer petici...
Content Delevery Network<br />Garantizan velocidad y disponibilidad<br />Envío de Script comprimidos desde el servidor (si...
-CSS Sprites<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br />demo <br />
Utilizar Gzip (1/2)<br />Reducir el tamaño del HTTP Response<br />Gzip Vs Deflate – GzipWin! +Popular<br />Alto impacto en...
Utilizar Gzip(1/2)<br />No comprimir PDF, JPG (Gasto de recursos innecesarios, se agrega info al archivo y queda más grand...
JS Abajo …<br />Scripts pueden retrasan el renderizado de la página<br />Los script bloquean la descarga en paralelo.<br /...
Crear los JavaScript y CSS en Archivos<br />Dentro de la página o fuera de la página?<br />Descarga paralela hace que el s...
- JavaScript  al final<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br />demo <br />
Minificar Archivos Javascript<br />No es compresión, es minificación!<br />Efectos a nivel de código, imperceptibles<br />...
- Microsoft Ajax Minifier<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br />demo <br />
El turno de ASP.NET <br />Ser muy cuidados con:<br />ViewState ,preguntarse<br />¿Necesito guardar todos los estados?<br /...
ASP.NET AJAX…	<br />Abuso de UpdatePanel<br />Poca o nula configuración a Nivel de ScriptManager<br />Minimizar las llamad...
A Nivel de ScriptManager (1/2)ScriptReferenceProfiler + CompositeScript<br />Primero determinar los script que generó el S...
ScriptMode, en release, esto evita se levanten procesos internos de debug y traza, demorando la ejecución del código gener...
Remplazo por ToolkitScriptManager<br />Hereda de ScriptManager<br />Parte de Ajax Control Toolkit<br />Permite realizar co...
Optimizaciones: ScriptmanagerToolkitScriptManager<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br...
A nivel de Web.ConfigHabilitar compresion y Cache para ASP.NET AJAX <br /> <system.web.extensions><br /><scripting><br /> ...
Upcoming SlideShare
Loading in...5
×

C:\fakepath\optimizacion

899

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
899
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

C:\fakepath\optimizacion

  1. 1. Técnicas Ninja!Optimización Web +ASP.NET AJAX<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br />
  2. 2. Microsoft Confidential<br />Sabia que?<br />«En la mayoría de las paginas web, menos del 10 - 20% del tiempo de carga de una pagina , corresponde a la descarga del documento html, existe entonces un 80-90% que podemos intentar reducir»<br />- Steve Souders<br />
  3. 3. Agenda<br />NecesidadOptimización<br />Optimización - Compromiso del Team<br />Optimización Web<br />Optimizacion ASP.NET AJAX<br />DEMOS<br />
  4. 4. Proceso Necesidad de Optimización<br />Proceso mayormente reactivo<br />Aplicaciones testeadas en escenarios irreales:<br />WebServer sin peticiones concurrentes.<br />Pruebas a nivel local<br />Desarrollos contra el tiempo.<br />Front-End vs BackEnd<br />Microsoft Confidential<br />
  5. 5. Procesamiento excesivo de Javascript<br />Tamaño de Imágenes no apropiadas<br />Tamaño de archivos JS descomunales<br />RoundTrips innecesarios<br />Http Request evitables <br />Microsoft Confidential<br />Proceso Necesidad de OptimizaciónResultados del analisis<br />Web lentas = Usuarios Enojados + (-Visitas)<br />
  6. 6. Optimización - compromiso del Team<br />Actividad Proactiva del equipo<br />Analizar para buscar puntos de optimización de la UI (Front-end) como JS, HTML, HTTP Resquest, AJAX , Posición de los Script, compresión, etc.<br />Desarrollando para el peor escenario:<br />Clientes con escasa capacidad de procesamiento.<br />Ancho de banda limitado.<br />Considerar todo recurso escaso.<br />Microsoft Confidential<br />
  7. 7. Tips de Optimización<br />Excelente Libro<br />High Performance Web Sites<br />Steve Souder<br /><ul><li>14 Reglas de Oro.
  8. 8. Guía indispensable para desarrolladores Web.
  9. 9. Revisaremos algunos de estas reglas a continuación:</li></ul>Microsoft Confidential<br />
  10. 10. Realizar menos peticiones HTTP<br />Utilizando CSS Sprites<br />Reducción de Tiempos hasta en ~50%<br />Evita hacer peticiones HTTP por cada imagen<br />Especial para menús.<br />Combinando Scripts<br />En la medida de lo posible hacer mix de CSS y JS<br />Balancear entre modularidad y performance.<br />Optimización hasta un ~30% <br />
  11. 11. Content Delevery Network<br />Garantizan velocidad y disponibilidad<br />Envío de Script comprimidos desde el servidor (si el nuestro no lo tiene activado)<br />Existe un Límite de peticiones HTTP concurrentes al mismo Sitio.<br />CDN de Microsoft, Google ,EdgeCast, etc.<br />
  12. 12. -CSS Sprites<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br />demo <br />
  13. 13. Utilizar Gzip (1/2)<br />Reducir el tamaño del HTTP Response<br />Gzip Vs Deflate – GzipWin! +Popular<br />Alto impacto en la performance<br />Algunos sitios solo comprimen HTML<br />Comprimir HTML, JS, CSS<br />Microsoft Confidential<br />
  14. 14. Utilizar Gzip(1/2)<br />No comprimir PDF, JPG (Gasto de recursos innecesarios, se agrega info al archivo y queda más grande!)<br />Costo de CPU, determinar tamaño mínimo de compresión.<br />Activarlo a Nivel de Hosting<br />TablaComparativaWebSite con Gzip<br />
  15. 15. JS Abajo …<br />Scripts pueden retrasan el renderizado de la página<br />Los script bloquean la descarga en paralelo.<br />Mediciones indican que el peor caso es arriba, el mejor.. abajo<br />VS<br />ABAJO<br />ARRIBA<br />
  16. 16. Crear los JavaScript y CSS en Archivos<br />Dentro de la página o fuera de la página?<br />Descarga paralela hace que el sitio se descargue más rápido.<br />El cache ayuda para la siguiente carga (aunque cambie el contenido html)<br />Se debe llegar a un equilibrio con los otros puntos de optimización.<br />Microsoft Confidential<br />
  17. 17. - JavaScript al final<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br />demo <br />
  18. 18. Minificar Archivos Javascript<br />No es compresión, es minificación!<br />Efectos a nivel de código, imperceptibles<br />Buena práctica Comprimir + Minimizar <br />Microsoft Ajax Minifierhttp://closure-compiler.appspot.com/home<br />Microsoft Confidential<br />
  19. 19. - Microsoft Ajax Minifier<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br />demo <br />
  20. 20. El turno de ASP.NET <br />Ser muy cuidados con:<br />ViewState ,preguntarse<br />¿Necesito guardar todos los estados?<br />No guardar dataset en el viewstate!<br />ViewstateMode de ASP.NET 4.0 permite de manera efectiva, controlar la generación de contenido al viewstate.<br />Ver Blog (Buscar ViewstateMode)<br />Setea siempre en producción Debug=False<br />Elimina nombres largos de páginas páginas maestras (contentTemplate)<br />Habilitar la compresion a nivel de Web.config<br />
  21. 21. ASP.NET AJAX… <br />Abuso de UpdatePanel<br />Poca o nula configuración a Nivel de ScriptManager<br />Minimizar las llamadas Asíncronas<br />«Ajaxifico> luego existo…<br />Existen configuraciones que nos ayudan a cumplir las reglas anteriores.<br />Microsoft Confidential<br />
  22. 22. A Nivel de ScriptManager (1/2)ScriptReferenceProfiler + CompositeScript<br />Primero determinar los script que generó el ScritpManager en tiempo de ejecución con CompositeScript<br />Luego agregar al Scriptmanager<br />
  23. 23. ScriptMode, en release, esto evita se levanten procesos internos de debug y traza, demorando la ejecución del código generado.<br />EnablePartialRerendering = false, si es que no hay UpdatePanel en la página, esto evita que cargue innecesariamente MicrosoftAjaxWebForm.js<br />LoadScriptBeforeUI, genera los Script luego del tagBody<br />Microsoft Confidential<br />A Nivel de ScriptManager (2/2)<br />
  24. 24. Remplazo por ToolkitScriptManager<br />Hereda de ScriptManager<br />Parte de Ajax Control Toolkit<br />Permite realizar combinado de Script <br />Permite la utilización de AJAX CDN<br />Fácil reemplazo para el actual ScriptManager ganando rendimiento<br />Microsoft Confidential<br />
  25. 25. Optimizaciones: ScriptmanagerToolkitScriptManager<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br />demo <br />
  26. 26. A nivel de Web.ConfigHabilitar compresion y Cache para ASP.NET AJAX <br /> <system.web.extensions><br /><scripting><br /> <scriptResourceHandlerenableCompression="true"enableCaching="true"/><br /></scripting><br /></system.web.extensions><br />
  27. 27. Habilitar Compresión & Caché<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br />demo <br />
  28. 28. Saludos, desde el epicentro del terremoto y maremoto en Chile.<br />!Fuerza Concepción!!Fuerza Dichato!!Fuerza Talcahuano!<br />Gonzalo “Chalalo” Pérez C.<br />ASP/ASP.NET<br />http://www.chalalo.cl<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×