Módulo 4: Tecnologías web avanzadas

4.1.2 ¿Cómo funcionan las AMP?

Las páginas AMP son tan rápidas y parece que se cargan al instante debido a la combinación de las optimizaciones que se mencionan a continuación.

Para obtener más información sobre el funcionamiento de las Accelerated Mobile Pages (AMP), puedes ver el vídeo del director de Ingeniería de AMP, Malte Ubl, o bien leer la información que hay debajo del vídeo.

AMP Anatomy with Malte Ubl

Solo admiten secuencias de comandos asíncronas

JavaScript es un lenguaje de gran potencia. Puede modificar prácticamente todos los aspectos de la página, pero también puede bloquear la creación del DOM y retrasar el procesamiento de páginas (consulta la página sobre cómo agregar interactividad con JavaScript). Con el fin de evitar que JavaScript retrase el procesamiento de páginas, AMP solo admite código asíncrono de JavaScript.

Las páginas AMP no pueden incluir ningún código de JavaScript escrito por el autor. En lugar de usar JavaScript, las características de la página interactiva se gestionan a través de elementos personalizados de AMP. Es posible que los elementos personalizados de AMP incluyan código JavaScript, pero están cuidadosamente diseñados para garantizar que no disminuya el rendimiento.

Aunque el lenguaje JS de terceros se admite en iframes, no es posible utilizarlo para bloquear el procesamiento. Por ejemplo, si el JS de terceros emplea la API super-bad-for-performance document.write, no se bloquea el procesamiento de la página principal.

Ajustan el tamaño de todos los recursos de manera estática

Los recursos externos como imágenes, anuncios o iframes deben indicar su tamaño en el HTML para que la AMP pueda determinar el tamaño y la posición de cada elemento antes de descargar los recursos. La AMP carga el diseño de la página sin esperar a que se carguen los recursos.

La AMP desvincula el diseño del documento del diseño de los recursos. Solo se necesita una solicitud HTTP para dar formato al documento entero (además de a las fuentes). Puesto que la AMP está optimizada para no tener que realizar nuevos cálculos extensos de estilo y de diseño en el navegador, no habrá que modificar el diseño cuando se carguen los recursos.

Evitan que los mecanismos de extensión bloqueen el procesamiento

Las AMP no permiten que los mecanismos de extensión bloqueen el procesamiento de la página. En su lugar, admiten extensiones para elementos como anuncios lightbox, inserciones de instagram, tweets, etc. Si bien dichas extensiones requieren solicitudes HTTP adicionales, esas solicitudes no bloquean el diseño ni el procesamiento de la página.

Todas las páginas que emplean una secuencia de comandos personalizada deben indicar al sistema de AMP que a la larga tendrán una etiqueta personalizada. Por ejemplo, la secuencia de comandos amp-iframe indica al sistema que habrá una etiqueta amp-iframetag. AMP crea el cuadro de iframe antes incluso de saber qué incluirá:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Excluyen el código JavaScript de terceros de la ruta crítica

El código JS de terceros tiende a usar la carga síncrona de JS. También prefieren usar document.write con secuencias de comandos síncronas. Por ejemplo, si tienes cinco anuncios en tu página y cada uno provoca tres cargas síncronas, cada una con una latencia de conexión de 1 segundo, tendrás 15 segundos de tiempo de carga solo para cargar el código JS.

Las páginas AMP admiten JavaScript de terceros, pero solo en iframes controlados. Al restringirlos a las iframes, no pueden bloquear la ejecución de la página principal. Incluso si activan nuevos cálculos de estilo, sus diminutos iframes tienen un DOM muy pequeño.

El tiempo que se tarda en realizar los nuevos cálculos de estilo y los diseños está limitado por el tamaño del DOM, por lo que los nuevos cálculos del iframe son muy rápidos en comparación con el cálculo de los estilos y el diseño de la página.

Todas las CSS deben estar alineadas y tener un tamaño limitado

Las CSS bloquean el procesamiento y la carga de la página y tienden a acumularse. Las páginas AMP HTML solo admiten estilos alineados. Esto elimina una o varias solicitudes HTTP de la ruta de procesamiento crítica en comparación con la mayoría de las páginas web.

Además, la hoja de estilo en línea tiene un tamaño máximo de 50 kilobytes. Aunque este tamaño es suficientemente grande para páginas muy sofisticadas, requiere que el autor de la página realice una buena limpieza de CSS.

La activación de fuentes debe ser eficiente

Las fuentes web son muy grandes, de manera que su optimización es fundamental para el rendimiento. En una página típica con algunas secuencias de comandos síncronas y unas pocas hojas de estilo externas, el navegador se queda esperando para iniciar la descarga de estas fuentes enormes hasta que finalmente se realiza el proceso.

El sistema AMP no declara ninguna solicitud HTTP hasta que las fuentes comienzan a descargarse. Esto es posible únicamente porque todo el código JS en AMP posee el atributo asíncrono y solo se admiten las hojas de estilo alienadas. No hay solicitudes HTTP que bloqueen el navegador e impidan que descargue fuentes.

Reducen al mínimo los nuevos cálculos de estilo

Cada vez que mides algún elemento, se activan nuevos cálculos de estilo que suelen ser muy costosos, ya que el navegador tiene que diseñar la página entera. En las páginas AMP, las lecturas del DOM se producen antes que las escrituras. Esto garantiza que hay como máximo un nuevo cálculo de estilos en cada marco.

Para obtener más información sobre el impacto del estilo y el diseño en los nuevos cálculos, consulta la página sobre el rendimiento del procesamiento.

Solo ejecutan animaciones con aceleración por GPU

La única manera de tener optimizaciones rápidas es ejecutarlas en la GPU. La GPU conoce las capas, sabe cómo realizar algunas acciones en ellas, puede moverlas, fundirlas, pero no puede actualizar el diseño de la página. Dicha tarea se delega al navegador, algo que no es muy recomendable.

Las reglas para CSS relacionadas con la animación garantizan que las animaciones pueden acelerarse en la GPU. En concreto, AMP solo permite realizar animaciones y transiciones con la transformación y la opacidad, de modo que no es necesario el diseño de esa página. Obtén más información sobre el uso de la transformación y la opacidad para realizar cambios en animaciones.

Priorizan la carga de recursos

AMP controla todas las descargas de recursos y les da prioridad, descarga solo lo necesario y almacena previamente recursos que se cargan lentamente.

Cuando AMP descarga recursos, optimiza dicho proceso para descargar en primer lugar aquellos que sean más importantes en ese momento. Las imágenes y los anuncios solo se descargan si es probable que el usuario los vea, si están en la zona superior o si es posible que el usuario se desplace rápidamente hacia ellos.

AMP también recopila los recursos que cargan lentamente. Los recursos se cargan lo más tarde posible, pero se recopilan tan pronto como sea posible. De este modo, todo se carga muy rápido, pero la CPU solo se utiliza cuando los recursos se muestran a los usuarios.

Cargan páginas en un instante

La nueva API de preconexión se utiliza de manera intensiva para garantizar que las solicitudes HTTP tienen la mayor velocidad posible cuando se realizan. De esta forma, se puede procesar una página antes de que el usuario exprese explícitamente que quiere desplazarse a ella. Como es posible que la página ya esté disponible cuando el usuario la seleccione, esta se carga al instante.

Si bien el procesamiento previo se puede aplicar a todo el contenido web, también puede consumir mucho ancho de banda y uso de la CPU. Las AMP se han optimizado para reducir estos dos factores. El procesamiento previo solo descarga los recursos de la parte superior de la página y no procesa elementos que podrían resultar caros para la CPU.

Cuando los documentos de AMP se procesan previamente para su carga instantánea, en realidad solo se descargan los recursos de la mitad superior de la página. Además, no se descargan los recursos que podrían consumir una gran cantidad de CPU (como los iframes de terceros).

Obtén más información sobre las razones por las que AMP HTML no saca el máximo partido del escáner de precarga.

Ayúdanos a aumentar la velocidad de AMP

AMP es un proyecto de código abierto. Necesitamos tu ayuda para que AMP sea más rápido todavía. Obtén más información sobre cómo puedes colaborar.

¿Te ha sido útil este artículo?
¿Cómo podemos mejorar esta página?