Web Performance Optimization

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

Transcript

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