c:\fakepath\optimizacion

Técnicas Ninja!Optimización Web +ASP.NET AJAXGonzalo Pérez C.MVP ASP/ASP.NEThttp://www.chalalo.cl

Microsoft Confidential

«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»

Sabia que?

- Steve Souders

AgendaNecesidad OptimizaciónOptimización - Compromiso del TeamOptimización WebOptimizacion ASP.NET AJAX

DEMOS

Microsoft Confidential

Proceso Necesidad de OptimizaciónProceso mayormente reactivo

Aplicaciones testeadas en escenarios irreales:

WebServer sin peticiones concurrentes.Pruebas a nivel local

Desarrollos contra el tiempo.Front-End vs BackEnd

Desarrollo Puesta en Marcha

Optimización

Microsoft Confidential

Procesamiento excesivo de JavascriptTamaño de Imágenes no apropiadasTamaño de archivos JS descomunalesRoundTrips innecesariosHttp Request evitables

Proceso Necesidad de OptimizaciónResultados del analisis

Web lentas = Usuarios Enojados + (-Visitas)

Microsoft Confidential

Optimización - compromiso del TeamActividad Proactiva del equipo

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.

Desarrollando para el peor escenario:Clientes con escasa capacidad de procesamiento.Ancho de banda limitado.Considerar todo recurso escaso.

Microsoft Confidential

Tips de Optimización

Excelente LibroHigh Performance Web SitesSteve Souder

• 14 Reglas de Oro.• Guía indispensable para

desarrolladores Web. • Revisaremos algunos de

estas reglas a continuación:

Realizar menos peticiones HTTPUtilizando CSS Sprites

Reducción de Tiempos hasta en ~50%Evita hacer peticiones HTTP por cada imagenEspecial para menús.

Combinando ScriptsEn la medida de lo posible hacer mix de CSS y JSBalancear entre modularidad y performance.Optimización hasta un ~30%

Garantizan velocidad y disponibilidadEnvío de Script comprimidos desde el servidor (si el nuestro no lo tiene activado)Existe un Límite de peticiones HTTP concurrentes al mismo Sitio.CDN de Microsoft, Google ,EdgeCast, etc.

Content Delevery Network

-CSS Sprites

Gonzalo Pérez C.MVP ASP/ASP.NEThttp://www.chalalo.cl

demo

Microsoft Confidential

Utilizar Gzip (1/2)

Reducir el tamaño del HTTP ResponseGzip Vs Deflate – Gzip Win! +PopularAlto impacto en la performanceAlgunos sitios solo comprimen HTMLComprimir HTML, JS, CSS

Utilizar Gzip (1/2)

No comprimir PDF, JPG (Gasto de recursos innecesarios, se agrega info al archivo y queda más grande!)Costo de CPU, determinar tamaño mínimo de compresión.Activarlo a Nivel de Hosting

Tabla Comparativa WebSite con Gzip

JS Abajo …Scripts pueden retrasan el renderizado de la páginaLos script bloquean la descarga en paralelo.Mediciones indican que el peor caso es arriba, el mejor.. abajo

ARRIBA VS ABAJO

Microsoft Confidential

Crear los JavaScript y CSS en Archivos

Dentro de la página o fuera de la página?

Descarga paralela hace que el sitio se descargue más rápido.El cache ayuda para la siguiente carga (aunque cambie el contenido html)Se debe llegar a un equilibrio con los otros puntos de optimización.

- JavaScript al final

Gonzalo Pérez C.MVP ASP/ASP.NEThttp://www.chalalo.cl

demo

Microsoft Confidential

Minificar Archivos Javascript

No es compresión, es minificación!Efectos a nivel de código, imperceptiblesBuena práctica Comprimir + Minimizar Microsoft Ajax Minifier http://closure-compiler.appspot.com/home

- Microsoft Ajax Minifier

Gonzalo Pérez C.MVP ASP/ASP.NEThttp://www.chalalo.cl

demo

El turno de ASP.NET

Ser muy cuidados con:ViewState ,preguntarse

¿Necesito guardar todos los estados?No guardar dataset en el viewstate!ViewstateMode de ASP.NET 4.0 permite de manera efectiva, controlar la generación de contenido al viewstate.Ver Blog (Buscar ViewstateMode)

Setea siempre en producción Debug=FalseElimina nombres largos de páginas páginas maestras (contentTemplate)Habilitar la compresion a nivel de Web.config

Microsoft Confidential

ASP.NET AJAX…

Abuso de UpdatePanelPoca o nula configuración a Nivel de ScriptManagerMinimizar las llamadas Asíncronas«Ajaxifico> luego existo…

Existen configuraciones que nos ayudan a cumplir las reglas anteriores.

A Nivel de ScriptManager (1/2)ScriptReferenceProfiler + CompositeScriptPrimero determinar los script que generó el

ScritpManager en tiempo de ejecución con CompositeScript

Luego agregar al Scriptmanager

Microsoft Confidential

ScriptMode, en release, esto evita se levanten procesos internos de debug y traza, demorando la ejecución del código generado.EnablePartialRerendering = false, si es que no hay UpdatePanel en la página, esto evita que cargue innecesariamente MicrosoftAjaxWebForm.jsLoadScriptBeforeUI, genera los Script luego del tag Body

A Nivel de ScriptManager (2/2)

Microsoft Confidential

Remplazo por ToolkitScriptManager

Hereda de ScriptManagerParte de Ajax Control ToolkitPermite realizar combinado de Script Permite la utilización de AJAX CDNFácil reemplazo para el actual ScriptManager ganando rendimiento

Optimizaciones: ScriptmanagerToolkitScriptManager

Gonzalo Pérez C.MVP ASP/ASP.NEThttp://www.chalalo.cl

demo

A nivel de Web.ConfigHabilitar compresion y Cache para ASP.NET AJAX <system.web.extensions> <scripting> <scriptResourceHandler enableCompression="true"

enableCaching="true"/> </scripting> </system.web.extensions>

Habilitar Compresión & Caché

Gonzalo Pérez C.MVP ASP/ASP.NEThttp://www.chalalo.cl

demo

Gonzalo “Chalalo” Pérez C.

ASP/ASP.NEThttp://www.chalalo.cl

Saludos, desde el epicentro del terremoto y maremoto en Chile.

!Fuerza Concepción!!Fuerza Dichato!!Fuerza Talcahuano!