Iniciando la representación de una mobile-web-page pensando en el rendimiento - Parte 1

Hoy quería compartir con ustedes un enfoque simple y ágil sobre el análisis de rendimiento pensado sobre un entorno  web-mobile. Este tipo de técnicas ya se utilizan a diario en mundo web tradicional pero actualmente el despertar del mundo mobile y con sus aristas mobile-web han despertado necesidad e interés en cada referente tecnológico.

La idea es muy simple, vamos a trabajar el camino crítico de renderización de una web-page, y al llevar el concepto a mobile-web estos elementos se hacen mucho más críticos...

Para esta actividad utilizaremos RAIL [Response-Animation-Idle-Load] y en concreto trabajaremos sobre el elemento #Load.

Fig.1 camino crítico de renderización

Vamos a empezar por representar el DOM y el CSSOM, en un ejemplo relativamente simple.
html:

css:

Como representarías el DOM y el CSSOM ? esta actividad representaría el primero de los pasos para recorrer el camino crítico de renderización y por supuesto optimizar nuestro ambiente web-mobile.

Fig.2 Representación del DOM para el ejemplo

Ahora debemos representar el CSSOM

Con ambos elementos crearemos el #ArboldeRenderizado[Render Tree], luego vamos a utilizar debug remoto para visualizar nuestro desarrollo en un modelo web-mobile.

entorno: #chrome_canary, #tablet_nexus #chrome_beta_mobile. [como nuestro desarrollo será local debemos habilitar el port forwarding]

Fig.3 port forwarding

Fig.4 navegación en el dispositivo del desarrollo

Fig.5 Inspección en el dispositivo del desarrollo

Con estas opciones analizaremos que está ocurriendo en el este ejemplo con la perspectiva web-mobile.

Aún nos falta un poco de trabajo para representar el camino completo propuesto Fig.1, pero les dejo como tarea reflexionar sobre estas técnicas simples y la cantidad de incongruencias en los sitios actuales que evidencian notoriamente la inmadurez al trasladarnos a un enfoque a web-mobile de rendimiento.  

Continuará...

Referencias esenciales: Critical rendering path, Ilya Grigorik [link]

Iniciando la representación de una mobile-web-page pensando en el rendimiento - Parte 1 por Nicolas Bortolotti se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.