Conocer como funciona el DOM, CSSOM, orden de renderización y Navigation Timing API, para poder tener tu una parte de tu sitio optimizado.

1. Grupos de Estudio
Web Performance
Optimization

2. Document Object Model

3. CSS Object Model

4. Render tree

5. Orden de renderización
● Se analiza los nodos visibles en el DOM.
● Los nodos no visibles se omiten.
● Los nodos que se ocultan con CSS se omiten también.
● Para cada nodo visible busca y aplica su estilo desde
el CSSOM.
● Muestra los nodos visibles.

6. Problema 1 : CSS retrasa la visualización
MEDIA QUERIES
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 125px)" />

7. Problema 2 : Javascript
● Recordando la secuencia ….
● La creación de DOM se pone en pausa.
● Javascript puede enviar consultas a DOM y CSSOM y
modificarlos.
● La ejecución de JavaScript se retrasa hasta que
CSSOM esté a punto.
Síncrono Asíncrono
CASOS

8. Marcas en el tiempo y Navigation Timing API
Prueba con marcas

9. SOLUCIONES

10. Analizar y “MEDIR” todo
MEJORA LA CONVERSIÓN
Ejemplos
Solo HTML
Con CSS y JS
CON JS Asincrono

11. Chrome DevTools
https://developer.chrome.com/devtools
Explorar DevTools
http://discover-devtools.codeschool.com/
Casos de estudio
http://www.google.com/think/multiscreen/success.html
Recursos

12. Créditos
Julio C Silva Guzmán
@juliosguz