Ort Spirit. Matías Woloski

High Performance Matias Woloski (Southworks) Websites Otras reglas

Algunos números

Unused Section Space 3

UpdatePanel vs JSON

Las reglas Unused Section Space 4

My blog http://blogs.southworks.net/mwol oski

Unused Section Space 5

Unused Section Space 2

Recursos y referencias

Unused Section Space 6

Unused Section Space 1

Algunos números

pptPlex Section Divider The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.

Back-end vs Front-end

Performance del front-end

Las reglas

pptPlex Section Divider The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.

Las 14 reglas 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.

Reducir la cantidad de HTTP requests Usar una CDN Agregar Expires header Aplicar compresión Poner los CSS al principio Mover los JS al final Evitar las expresiones de CSS Los JS y CSS mantenerlos externos Reducir DNS lookups Minificar los JS Evitar redirects Remover scripts duplicados Configurar ETags Hacer el AJAX pequeño y cacheable

Regla 1: Reducir la cantidad de

• CSS sprites • Combinar scripts, Combinar

CSS Sprites

<span style=" background-image: url('sprites.gif'); background-position: -260px -90px;">

Combinar Scripts, combinar Stylesheets • Combinar 6 scripts en uno elimina 5 HTTP Requests • Desafíos: – producto vs perf. (scripts modulares) – bajar más de lo necesario

• Solución posible:

Empty vs. Full Cache – Expires

• 83% menos bytes • 90% menos HTTP requests

Otras reglas

pptPlex Section Divider The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.

Regla 4: Aplicar compresión • Reduce la cantidad de bytes considerablemente (texto) • 90%+ de los browsers ya soportan

Gzip: No solo para el HTML

Regla 5: Poner los CSS al • Bloquean el ‘progressive rendering’ • Solución: Poner los stylesheets en el HEAD • Evita el “Flash of Unstyled Content” • Usar LINK (no @import)

Regla 6: Mover los JS al final • Los scripts bloquean los requests paralelos en todos los hostname • Los scripts bloquean el rendering de todo lo que este debajo de ellos

Regla 7: Evitar expresiones de • Para setear propiedades de CSS dinámicamente en IE • width: expression( document.body.clientWidth < 600 ? • “600px” : “auto” ); •

• Problema: las expresiones se ejecutan muchas veces • mouse move, key press, resize, scroll, etc.

Regla 8: Los JS y CSS mantenerlos externos • Inline: el HTML se vuelve más pesado. • External: mas HTTP requests, pero cacheables • A tener en cuenta • page views por usuario • empty vs. primed cache • componentización y reutilización

• External es mejor generalmente • home pages pueden ser la excepción

Regla 9: Reducir DNS lookups

• Agregan en general 20-120 ms • Bloquean downloads paralelos • Tip • Tratar de mantener de 2 a 4 los hostnames

Regla10: Minificar los JS • Remover whitespace (\s \r \n \t) para bajar el peso • Se puede aplicar offline o en runtime • 85k: JavaScript sin JSMin y sin Gzip • 68k: Javascript con JSMin (21% menos) • 23k: Javascript con Gzip solamente (73% menos) • 19k: Javascript con JSMin y Gzip (78%

Regla 10: ¿Quién minifica?

Regla 11: Evitar redirects • Bloquea la carga!

Regla 12: Remover scripts

• Baja la perf • Extra HTTP requests (solo en IE) • Extra ejecuciones

• Pero no es atípico? • 2 de los 10 top sites contienen scripts duplicados

• Tiene que ver con el tamaño del equipo y # de scripts

Regla 13: Configurar/Remover

• Identificador unico • ETag: "c8897e-aee-4165acf0" • Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT

• Usado en conditional GET requests • If-None-Match: "c8897e-aee-4165acf0" • If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT

Regla 14: Hacer el AJAX pequeño

• XHR, JSON, iframe, XML, scripts dinámicos pueden ser cacheados, minificados, y comprimidos.

Recursos y referencias

pptPlex Section Divider The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.

Links •Matias Woloski blog: http://staff.southworks.net/matiaswoloski •Presentación y Demo: http://tinyurl.com/5u9ywn •Libro: http://www.oreilly.com/catalog/9780596514211/ •Ejemplos: http://stevesouders.com/examples/ •JSMin: http://crockford.com/javascript/jsmin •Dojo compressor: http://dojotoolkit.org/docs/shrinksafe •HTTP status codes: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html •Firebug: http://www.getfirebug.com/ •YSlow: http://developer.yahoo.com/yslow/ •Fiddler: http://www.fiddlertool.com/ •IBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailer •YUIBlog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ • http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ • http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ • http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

Herramientas

Yslow Firefo x

Firebu g

UpdatePanel vs JSON

pptPlex Section Divider The slides after this divider will be grouped into a section and given the label you type above. Feel free to move this slide to any position in the deck.

UpdatePanel vs. Raw JSON GridView + UpdatePanel Holdings.asp x

v s.

AJAX Grid + JSON WebServices HoldingsAjaxGrid. aspx

Grilla con 7 Items

Grilla con 7 Items Con UpdatePanel no solo se recibe data sino que HTML tambien, por eso el payload es 8x mas

La inyeccion de html vs cargar JSON data impacta 100% en tiempo de rendering

Retrieve 250 Items

Grilla con 250 Items El payload con UpdatePanel es 10x mas grande (logaritmico)

Rendering empeora 3x en tiempo

Data transferred using

Data transferred using JSON

Compresión Gzip en respuestas JSON

Comprimiendo la respuesta IIS no comprime JSON, pero se puede lograr con modules

Conclusiones • Se puede controlar el response time del usuario final. • El potencial de mejora optimizando el front-end grande. • El esfuerzo que requiere es relativamente poco. • Estas prácticas no afectan al desarrollo del sitio. • Son aplicables a cualquier tipo de