c:\fakepath\optimizacion
TRANSCRIPT
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
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!