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