ASP.NET Web Optimizations

@ MindCamp 4.0 (February 2012)

2. ASP.NET WEB OPTIMIZATIONS
3. Intro Status: 200 OK Date: 24-26 Feb 2012 Server: kartones.net Content-Type: text/powerpoint Content-Length: 20min Cache-Control: cache, share, tweet X-Powered-By: MindCamp/4.0 X-Author: Diego 'Kartones' X-Twitter: @Kartones X-Email: diego@kartones.net
4. The Goal
5. • CSS: top (antes de </head>) • Scripts: bottom (antes de </body>) • Nunca dejes el src de un <img> vacío! (Petición extra al servidor) • Especifica width y height de <img> • < # cookies = < bandwith = > velocidad • < # elems DOM = > velocidad render = > UX HTML Structure
6. • HTML: <img src=“data:image/png;base64,XXXX” /> • CSS: background: url(data:image/png;base64,XXXX); Base64 img data (I)
7. // ImageFormat.Gif / ImageFormat.Png public string ConvertToFormat(string ImagePath, ImageFormat SourceFormat) { string base64String = string.Empty; using (Image sourceImage = Image.FromFile(@ImagePath)) { using (MemoryStream memoryStream = new MemoryStream()) { sourceImage.Save(memoryStream, SourceFormat); byte[] imageBytes = memoryStream.ToArray(); base64String = Convert.ToBase64String(imageBytes); } } return (SourceFormat == ImageFormat.Gif ? "data:image/gif;base64," : "data:image/png;base64,") + base64String; } Base64 img data (II)
8. CSS Sprites (I)
9. .menuspr { background-image : url(...); background-color : transparent; background-repeat : no-repeat; height : 16px; width : 16px; } #spr01 { background-position : -0px -0px; } #spr02 { background-position : -16px -0px; } CSS Sprites (II)
10. <div class="menuspr" id="spr01"></div> <div class="menuspr" id="spr02"></div> <div class="menuspr" id="spr03"></div> • Online builder: http://css-sprit.es/ CSS Sprites (III)
11. • sessionStorage: Disponible solamente en un tab/ventana • localStorage: Se mantiene entre sesiones/tabs/ventanas • Siempre en un mismo browser • 5-10 MB por dominio usualmente • Desactivable por el usuario! • No es increíblemente rápido, pero no está mal • URL: http://dev.w3.org/html5/webstorage/ Web Storage
12. • “el código más rápido es el que no se ejecuta” -> “la página más ligera es la que no tiene contenido” Response.Status = "204 No Content"; • Perfecto para keep-alives y pings • Mejor que un tracking pixel si podemos hacer peticiones AJAX Tracking pixels, keep-alives
13. • Web.config: <urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true" /> <caching enabled="true" enableKernelCache="true"> <profiles> <add extension=".jpg" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" /> <add extension=".gif" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" /> <add extension=".png" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" /> </profiles> </caching> <staticContent> <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="15.00:00:00" /> </staticContent> Statics caching @ IIS 7
14. • Algunos desde el web.config… <system.webServer> <httpProtocol> <customHeaders> <remove name="X-Powered-By" /> </customHeaders> </httpProtocol> </system.webServer> • Pero otros IIS 7 no deja cambiarlos: Cleaning IIS Headers (I)
15. • Solución: Crear un HttpModule public class CustomHeaderModule : IHttpModule { public void Init(HttpApplication application) { application.PostReleaseRequestState += new EventHandler(CleanHeaders); } void CleanHeaders(object sender, EventArgs e) { HttpContext.Current.Response.Headers.Remove("Server"); HttpContext.Current.Response.Headers.Remove("X-AspNet-Version"); HttpContext.Current.Response.Headers.Remove("ETag"); } } Cleaning IIS Headers (II)
16. • Carga de JS asíncrono y externo: <script type="text/javascript"> (function (d,t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1; g.src = ' http:// kartones.net/myJS.js'; s.parentNode.insertBefore(g,s); } (document,'script')); </script> • Ejecución de fragmento de código asíncronamente: <script type="text/javascript" async="true"> </script> Loading & Execution (I)
17. • Carga correcta de JS secuencial: <script type="text/javascript"> window.onload = function () { var g = document.createElement('script'); var s = document.getElementsByTagName('script')[0]; g.src = ‘http://kartones.net/myJS.js'; s.parentNode.insertBefore(g, s); } </script> • Si se usa JQuery, meterlo dentro de: jQuery(document).ready(function(){ /* … */ }); Loading & Execution (II)
18. • Render tree: Partes visuales del DOM tree. • Frames/boxes: Nodos en el render tree. • Reflow (Mozilla) / Layout (others): Recalcular partes del render tree. • Repaint / Redraw (IE): Actualizar pantalla con render tree recalculado. • Style recalculation (Google SpeedTracer): styles sin cambios de geometría. Reflows / Repaints (I)
19. • Causas de reflows y/o repaints: • Añadir/modificar/eliminar nodos del DOM • Aplicar display: none (reflow + repaint) o visibility: hidden (repaint) • Mover o animar un nodo DOM • Añadir un stylesheet • Añadir un atributo style • Acciones del usuario: Redimensionado de ventana, cambio de tamaño de fuente, scroll • URL: http://kartones.net/r.ashx?NR Reflows / Repaints (II)
20. • Precalcular lengths y similares for (var i=0; i < items.length; i++) { // ... } for (var i=0, count=items.length; i < count; i++) { // ... } Loops (I)
21. • Extraer DOM lookups fuera de bucles for (var i=0, len=divs.length; i < len; i++) { var div = document.getElementsByTagName("div")[i]; // ... } var divs = document.getElementsByTagName("div"); for (var i=0, len=divs.length; i < len; i++) { var div = divs[i]; // ... } Loops (II)
22. • Siempre siempre siempre definir variables con “var” –Sino, es una variable global –Con var tienen un scope definido • Menos recorrido del DOM para encontrarlas –Bonus: var es similar a “private” Var
23. • FXCop para CSS • Usa CSS Lint (de Nicholas Zakas) • Reglas configurables • URL: http://kartones.net/r.ashx?NF CSSCop
24. • URL: http://kartones.net/r.ashx?NG CSS3 Intellisense Schema
25. • Intellisense y warnings de HTML 5 • Soporte de los nuevos tags HTML 5 • También sirve para VS2008 • URL: http://kartones.net/r.ashx?OH HTML5 Intellisense VS2010
26. • Minimizador de Javascript y CSS • También hace análisis de sintaxis • URL: http://ajaxmin.codeplex.com/ Microsoft AJAX Minimizer
27. • Bundling de CSS y JS en runtime 1. Ficheros CSS en una carpeta (ej: “styles”) 2. Link a la carpeta con /css de sufijo: <link href="styles/css" rel="stylesheet" /> • También minimiza (2x1!) • + Info: http://kartones.net/r.ashx?NQ ASP.NET 4.5 Bundling
28. • Profiling, funcionalidades, limitaciones… • URL: http://www.browserscope.org • Ejemplo: Browserscope
29. • Escalabilidad: http://speakerdeck.com/u/kartones/p/escalando-que-es-gerundio • PHP best practices: http://speakerdeck.com/u/kartones/p/tuenti-hardcore-php-uam • Debugging con Chrome: http://Kartones.Net/r.ashx?NY • Esta y otras charlas: http://speakerdeck.com/u/kartones/ Related Links
30. • Todo lo comentado en esta charla funciona en Chrome, Firefox y Safari. • Gran parte también funciona con IE8+… en teoría (no lo he testeado). Friends don’t let friends use IE Disclaimer
31. GRACIAS
32. Patrocinan