Cómo funciona AMP
Las siguientes optimizaciones combinadas son la razón de que las páginas AMP sean tan rápidas que parecen cargarse al instante. Hay 7 razones en total, pero si no tiene tiempo de leerlas todas, simplemente vea el video explicativo:
Ejecución asíncrona de todo el JavaScript de AMP
JavaScript es potente, puede modificar casi todos los aspectos de la página, pero también puede bloquear la creación del DOM y renderizar la visualización de la página (consulte también Cómo agregar interactividad con JavaScript). Para evitar que JavaScript renderice la visualización de la página, AMP solo permite el JavaScript asíncrono.
Los componentes de AMP pueden incluir JavaScript como un recurso oculto, pero están cuidadosamente diseñados para garantizar que no causen una disminución del rendimiento.
Aunque el uso de JS personalizado está permitido en amp-script, y el uso de JS de terceros está permitido en iframes, no se puede bloquear la renderización. Por ejemplo, si el JS de terceros utiliza super-bad-for-performance document.write API, no se bloqueará la renderización de la página principal.
Dimensión estática de todos los recursos
Los recursos externos, por ejemplo, imágenes, anuncios o iframes, deben indicar su tamaño en el código HTML para que AMP pueda determinar el tamaño y la posición de cada elemento antes de descargar los recursos. AMP cargará el diseño de la página sin esperar que se descargue ningún recurso.
AMP separa el diseño del documento del diseño de los recursos. Solo se necesita una solicitud HTTP para diseñar todo el documento (más fuentes). Dado que AMP está optimizado para evitar costosos recálculos de estilo y de diseños en el navegador, no habrá ningún cambio de diseño cuando se carguen los recursos.
No permite que los mecanismos de extensión bloqueen la renderización
AMP no permite que los mecanismos de extensión bloqueen la renderización de las páginas. AMP admite extensiones para elementos como lightboxes, instagram integrados, tweets, etc. Aunque se necesitan solicitudes HTTP adicionales, dichas solicitudes no bloquean el diseño ni la renderización de la página.
Cualquier página que utilice un script personalizado debe informar al sistema AMP que eventualmente contará con una etiqueta personalizada. Por ejemplo, el script amp-iframe le informa al sistema que habrá una etiqueta amp-iframe. AMP crea la casilla de iframe antes de que sepa lo que contendrá:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Mantiene todos los JavaScript de terceros fuera de la ruta crítica
A los JS de terceros le encanta utilizar la carga JS sincrónica. También les gusta integrar otros scripts de sincronización document.write. Por ejemplo, si hay cinco anuncios en su página y cada uno de ellos genera tres cargas síncronas, cada una con una conexión de latencia de 1 segundo, se necesitarán 15 segundos simplemente para cargar el JS.
Las páginas AMP permiten el uso de JavaScript de terceros, pero solo en los iframes que se encuentran en un aislamiento de procesos. Al restringirlos a iframes, no pueden bloquear la ejecución de la página principal. Incluso si activan múltiples cálculos de estilo, sus pequeños iframes contienen muy pocos DOM.
El tiempo que toma hacer recálculos de estilo y de diseño está limitado por el tamaño del DOM, así que los recálculos del iframe son muy rápidos en comparación con el recálculo del estilo y diseño de la página.
Todos los CSS deben estar integrados en el código de la página y restringidos a un tamaño
CSS bloquea toda la renderización, bloquea la carga de la página y tiende a volverse voluminoso. En las páginas AMP HTML solo se permiten los estilos integrados en el código. Esto elimina una o más solicitudes HTTP de la ruta de renderizado crítica, en comparación con la mayoría de las páginas web.
Además, la hoja de estilos integrados en el código tiene un tamaño máximo de 50 kilobytes. Aunque este tamaño es lo suficientemente grande para páginas muy sofisticadas, aún es necesario que el autor de la página efectúe una buena limpieza del CSS.
La activación de fuentes debe ser eficiente
Las fuentes web son muy grandes, así que su optimización es esencial para lograr un buen rendimiento. En una página común que contiene algunos scripts de sincronización y en algunas hojas de estilo externas, el navegador espera bastante para iniciar la descarga de esta enorme cantidad de fuentes hasta que todo eso sucede.
El sistema AMP envía cero solicitudes HTTP hasta que las fuentes comienzan a descargarse. Esto solamente es posible porque todos los JS en AMP tienen el atributo asíncrono y solo se permiten hojas de estilos integrados en el código, no hay solicitudes HTTP que bloqueen el navegador para descargar fuentes.
Reducción de los recálculos de estilo
Cada vez que usted mide algo, se activan recálculos de estilo que resultan muy costosos porque el navegador tiene que diseñar toda la página. En las páginas AMP, todas las lecturas DOM se efectúan antes que todas las escrituras. Esto garantiza que habrá solo un máximo de recálculos de estilo por cuadro.
Obtenga más información sobre el efecto de los recálculos de estilo y diseño en el rendimiento de la renderización.
Ejecución de animaciones solo mediante aceleración GPU
La única forma de conseguir optimizaciones rápidas es ejecutarlas en la GPU. La GPU conoce las capas, sabe cómo hacer ciertas operaciones en dichas capas, puede moverlas, puede desvanecerlas, pero no puede actualizar el diseño de la página, entonces encargará esa tarea al navegador y eso no es nada bueno.
Las reglas del CSS relacionadas con la animación garantizan que las animaciones puedan hacerse mediante aceleración GPU. Siendo más precisos, AMP solo permite hacer animaciones y transiciones durante la transformación y la opacidad, para que no sea necesario el diseño de la página. Obtenga más información sobre el uso de la transformación y la opacidad para hacer cambios en las animaciones.
Da prioridad a la carga de recursos
AMP controla todas las descargas de los recursos: da prioridad a la carga de recursos, cargando solo los que se necesitan, y busca anticipadamente los recursos en la carga diferida.
Cuando AMP descarga recursos, optimiza las descargas para que primero se descarguen los recursos más importantes. Las imágenes y los anuncios solo se descargan si es probable que el usuario los vea, en primer plano, o si es probable que el usuario se desplace rápidamente hasta ellos.
AMP también busca con anticipación los recursos en la carga diferida. Los recursos se cargan lo más tarde posible, pero se buscan con anticipación. De este modo los elementos se cargan muy rápidamente, pero el CPU solo se utiliza cuando los recursos se muestran realmente a los usuarios.
Carga las páginas en un instante
La nueva API de preconexión se utiliza a menudo para garantizar que las solicitudes HTTP sean lo más rápidas posible cuando se realizan. De este modo, una página puede renderizarse antes de que el usuario declare explícitamente que le gustaría navegar en ella. Es posible que la página ya esté disponible cuando el usuario la seleccione, lo cual implica que la carga debe ser instantánea.
Si bien la pre-renderización puede aplicarse a todo el contenido web, también puede utilizar mucho ancho de banda y CPU. El AMP está optimizado para reducir ambos factores. El renderizado previo solo descarga recursos en la primera parte de la página y no renderiza elementos que podrían ser costosos en términos del CPU.
Cuando los documentos de AMP son pre-renderizados para la carga instantánea, solo se descargan los recursos que se encuentran en primer plano en la página. Cuando los documentos de AMP son pre-renderizados para la carga instantánea, no se descargan los recursos que podrían utilizar mucho CPU (como los iframes de terceros).
Obtenga más información sobre por qué AMP HTML no aprovecha al máximo el escaneo previo a la carga.