¿Por qué AMP es más rápido?

Últimamente estamos todos revolucionados con la nueva tecnología AMP para ofrecer páginas aceleradas para móviles (de ahí el nombre) pero ¿por qué es más rápido AMP?

Principalmente debes tener en cuenta que AMP es un HTML optimizado para móviles, con unas reglas muy estrictas que, lógicamente, están orientadas a ofrecer visualizaciones de páginas realmente rápidas, y esto pasa por comprometer algunas funcionalidades a las que estamos acostumbrados.

Piensa que el objetivo de AMP es ofrecer contenidos adaptados a móviles y todo lo que esto supone:

Lectura rápida
Eliminación de distracciones
Aprovechar al máximo las (cada vez menos) pequeñas pantallas

Por qué AMP es tan rápido

Así que vamos a ver los principios en los que se basa AMP, para entender por qué AMP es más rápido:

Solo se permiten scripts asíncronos. Los scripts no asíncronos bloquean la construcción DOM y retrasan la carga de la página.De hecho AMP restringe el uso de todo JavaScript. Solo se permiten scripts dentro de elementos personalizados AMP que estén específicamente diseñados para un rendimiento óptimo. Ejemplos de scripts AMP son Google Analytics, Facebook, Twitter y YouTube.Otros scripts, como anuncios de otros servicios por ejemplo, de momento quedan fuera, y solo se les permite cargar dentro de iframes. El objetivo final es que no bloqueen la carga de la página.
Los recursos externos deben tener definidas las dimensiones. Imágenes e iframes tienen que tener los tamaños explícitamente definidos para asegurar que AMP conozca el tamaño de los elementos antes de descargarlos.
No se permite la carga en bloque de nada. El principio básico es que nada frene la carga de AMP. Los elementos externos se incluyen en iframes. AMP creará la caja del iframe sin importar lo que contenga.
El CSS debe estar incluido y los tamaños especificados. AMP nos cambia de nuevo el modo de trabajar, por el que habitualmente enlazamos el CSS desde un archivo externo. Ahora AMP obliga al CSS inline, y es por el mismo motivo que con los scripts: para evitar que el CSS bloquee la carga de la página.Se permite un máximo de 50 Kb de CSS inline para asegurar su eficiencia, así que si tu CSS pesa más te toca tarea de adelgazamiento y limpieza.
La carga de las fuentes debe ser lo más eficaz posible. Las fuentes web en ocasiones son demasiado pesadas y pueden comprometer de manera importante el rendimiento. Como sabrás, en circunstancias normales los navegadores impide que se descarguen fuentes hasta que no se hayan descargado y cargado los estilos y scripts. Esto genera un tiempo de espera inicial elevado hasta que se empiecen a cargar las fuentes.En AMP el CSS es inline y los scripts son asíncronos, así que el navegador no tiene que esperarlos para empezar a descargar las fuentes.
Las animaciones solo se ejecutan en la GPU. Hay animaciones que requieren refrescos de página, normalmente realizados por el navegador, no por la GPU. AMP limita las animacionesa y para que no hagan falta refrescos de página y así todas las animaciones las ejecute la GPU, mucho más rápida.
Se establecen prioridades de carga de recursos. AMP optimiza la descarga de recursos para que se descarguen primero los recursos más importantes. Por ejamplo, las imágenes se descargarán solo si las va a ver el usuario.
Las páginas se cargan en un instante. Se usa la API PreConnect para hacer la precarga (prefetch), carga y descarga de los recursos que utilizará el usuario. Además esto se hace de un modo eficaz: se precarga el contenido y se descarga solo si va a ser solicitado por el usuario.

Como puedes ver la cosa es seria, pero no es por fastidiar sino para ofrecer una mejor experiencia de navegación móvil, pues no olvides que en muchos países ya se navega más desde el móvil que desde ordenadores de escritorio.

Ya se navega más desde el móvil que desde ordenadores de escritorio. AMP es una obligación, no una opción
Click Para Twittear

¿Consecuencias? Nos toca actualizarnos y adaptarnos a los nuevos tiempos, y de momento parece que todo pasa por AMP.

Por si acabas de descubrir AMP aquí tienes unos recursos imprescindibles:

Como suelo decir ... ¡Ya tardas!

¿Falta algo?

He tratado de hacer un resumen de los principales fundamentos de AMP, que hacen que cargue tan rápido, pero si crees que hay algo más (esto se actualiza casi cada día) es tu turno, cuéntanoslo en los comentarios. Todos estamos deseando aprender.

Via::

Comments are closed.