Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

ASP.NET WEB OPTIMIZATIONS

Slide 3

Slide 3 text

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: [email protected]

Slide 4

Slide 4 text

The Goal

Slide 5

Slide 5 text

• CSS: top (antes de ) • Scripts: bottom (antes de ) • Nunca dejes el src de un vacío! (Petición extra al servidor) • Especifica width y height de • < # cookies = < bandwith = > velocidad • < # elems DOM = > velocidad render = > UX HTML Structure

Slide 6

Slide 6 text

• HTML: • CSS: background: url(data:image/png;base64,XXXX); Base64 img data (I)

Slide 7

Slide 7 text

// 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)

Slide 8

Slide 8 text

CSS Sprites (I)

Slide 9

Slide 9 text

.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)

Slide 10

Slide 10 text

• Online builder: http://css-sprit.es/ CSS Sprites (III)

Slide 11

Slide 11 text

• 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

Slide 12

Slide 12 text

• “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

Slide 13

Slide 13 text

• Web.config: Statics caching @ IIS 7

Slide 14

Slide 14 text

• Algunos desde el web.config… • Pero otros IIS 7 no deja cambiarlos: Cleaning IIS Headers (I)

Slide 15

Slide 15 text

• 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)

Slide 16

Slide 16 text

• Carga de JS asíncrono y externo: (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')); • Ejecución de fragmento de código asíncronamente: Loading & Execution (I)

Slide 17

Slide 17 text

• Carga correcta de JS secuencial: 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); } • Si se usa JQuery, meterlo dentro de: jQuery(document).ready(function(){ /* … */ }); Loading & Execution (II)

Slide 18

Slide 18 text

• 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)

Slide 19

Slide 19 text

• 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)

Slide 20

Slide 20 text

• Precalcular lengths y similares for (var i=0; i < items.length; i++) { // ... } for (var i=0, count=items.length; i < count; i++) { // ... } Loops (I)

Slide 21

Slide 21 text

• 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)

Slide 22

Slide 22 text

• 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

Slide 23

Slide 23 text

• FXCop para CSS • Usa CSS Lint (de Nicholas Zakas) • Reglas configurables • URL: http://kartones.net/r.ashx?NF CSSCop

Slide 24

Slide 24 text

• URL: http://kartones.net/r.ashx?NG CSS3 Intellisense Schema

Slide 25

Slide 25 text

• 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

Slide 26

Slide 26 text

• Minimizador de Javascript y CSS • También hace análisis de sintaxis • URL: http://ajaxmin.codeplex.com/ Microsoft AJAX Minimizer

Slide 27

Slide 27 text

• Bundling de CSS y JS en runtime 1. Ficheros CSS en una carpeta (ej: “styles”) 2. Link a la carpeta con /css de sufijo: • También minimiza (2x1!) • + Info: http://kartones.net/r.ashx?NQ ASP.NET 4.5 Bundling

Slide 28

Slide 28 text

• Profiling, funcionalidades, limitaciones… • URL: http://www.browserscope.org • Ejemplo: Browserscope

Slide 29

Slide 29 text

• 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

Slide 30

Slide 30 text

• 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

Slide 31

Slide 31 text

GRACIAS

Slide 32

Slide 32 text

Patrocinan

Slide 33

Slide 33 text

No content