2. Microsoft Confidential Sabia que? «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» - Steve Souders
4. Proceso Necesidad de Optimización Proceso mayormente reactivo Aplicaciones testeadas en escenarios irreales: WebServer sin peticiones concurrentes. Pruebas a nivel local Desarrollos contra el tiempo. Front-End vs BackEnd Microsoft Confidential
5. Procesamiento excesivo de Javascript Tamaño de Imágenes no apropiadas Tamaño de archivos JS descomunales RoundTrips innecesarios Http Request evitables Microsoft Confidential Proceso Necesidad de OptimizaciónResultados del analisis Web lentas = Usuarios Enojados + (-Visitas)
6. Optimización - compromiso del Team Actividad 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
10. Realizar menos peticiones HTTP Utilizando CSS Sprites Reducción de Tiempos hasta en ~50% Evita hacer peticiones HTTP por cada imagen Especial para menús. Combinando Scripts En la medida de lo posible hacer mix de CSS y JS Balancear entre modularidad y performance. Optimización hasta un ~30%
11. Content Delevery Network Garantizan velocidad y disponibilidad Enví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.
13. Utilizar Gzip (1/2) Reducir el tamaño del HTTP Response Gzip Vs Deflate – GzipWin! +Popular Alto impacto en la performance Algunos sitios solo comprimen HTML Comprimir HTML, JS, CSS Microsoft Confidential
14. 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 TablaComparativaWebSite con Gzip
15. JS Abajo … Scripts pueden retrasan el renderizado de la página Los script bloquean la descarga en paralelo. Mediciones indican que el peor caso es arriba, el mejor.. abajo VS ABAJO ARRIBA
16. 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. Microsoft Confidential
17. - JavaScript al final Gonzalo Pérez C. MVP ASP/ASP.NET http://www.chalalo.cl demo
18. Minificar Archivos Javascript No es compresión, es minificación! Efectos a nivel de código, imperceptibles Buena práctica Comprimir + Minimizar Microsoft Ajax Minifierhttp://closure-compiler.appspot.com/home Microsoft Confidential
19. - Microsoft Ajax Minifier Gonzalo Pérez C. MVP ASP/ASP.NET http://www.chalalo.cl demo
20. 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=False Elimina nombres largos de páginas páginas maestras (contentTemplate) Habilitar la compresion a nivel de Web.config
21. ASP.NET AJAX… Abuso de UpdatePanel Poca o nula configuración a Nivel de ScriptManager Minimizar las llamadas Asíncronas «Ajaxifico> luego existo… Existen configuraciones que nos ayudan a cumplir las reglas anteriores. Microsoft Confidential
22. A Nivel de ScriptManager (1/2)ScriptReferenceProfiler + CompositeScript Primero determinar los script que generó el ScritpManager en tiempo de ejecución con CompositeScript Luego agregar al Scriptmanager
23. 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.js LoadScriptBeforeUI, genera los Script luego del tagBody Microsoft Confidential A Nivel de ScriptManager (2/2)
24. Remplazo por ToolkitScriptManager Hereda de ScriptManager Parte de Ajax Control Toolkit Permite realizar combinado de Script Permite la utilización de AJAX CDN Fácil reemplazo para el actual ScriptManager ganando rendimiento Microsoft Confidential
26. A nivel de Web.ConfigHabilitar compresion y Cache para ASP.NET AJAX <system.web.extensions> <scripting> <scriptResourceHandlerenableCompression="true"enableCaching="true"/> </scripting> </system.web.extensions>
28. Saludos, desde el epicentro del terremoto y maremoto en Chile. !Fuerza Concepción!!Fuerza Dichato!!Fuerza Talcahuano! Gonzalo “Chalalo” Pérez C. ASP/ASP.NET http://www.chalalo.cl
