Web Performace Optimization

Grupos de Estudio

Web Performance Optimization

Document Object Model

CSS Object Model

Render tree

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.

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)" />

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

Marcas en el tiempo y Navigation Timing API

Prueba con marcas

SOLUCIONES

Analizar y “MEDIR” todo

MEJORA LA CONVERSIÓN

EjemplosSolo HTML

Con CSS y JSCON JS Asincrono

Chrome DevTools https://developer.chrome.com/devtools

Explorar DevTools http://discover-devtools.codeschool.com/

Casos de estudiohttp://www.google.com/think/multiscreen/success.html

Recursos

CréditosJulio C Silva Guzmán

@juliosguz