High Performance

Matias Woloski (Southworks)

Websites

Algunos
Otras
números reglas
UpdatePanel
Las vs JSON Recursos y
referencias
Unused
Section
reglas
Space 3 Unused
Section Unused
Unused
Space 4 Section
Section
Space 5 Space 6

My blog
http://blogs.southworks.net/mwol Unused
oski Unused Section
Space 1
Section
Space 2
 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. Reducir la cantidad de HTTP requests
2. Usar una CDN
3. Agregar Expires header
4. Aplicar compresión
5. Poner los CSS al principio
6. Mover los JS al final
7. Evitar las expresiones de CSS
8. Los JS y CSS mantenerlos externos
9. Reducir DNS lookups
10. Minificar los JS
11. Evitar redirects
12. Remover scripts duplicados
13. Configurar ETags
14. 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;">
</span>
 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 Firebu
x 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
v AJAX Grid +
JSON
s. WebServices

Holdings.asp HoldingsAjaxGrid.
x 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