Módulo 4: Tecnologías web avanzadas

4.1.1 ¿Qué es AMP?

AMP es una forma de crear páginas web de contenido estático que se cargan rápidamente. AMP en funcionamiento consta de tres partes diferenciadas:

  1. AMP HTML es HTML con algunas restricciones que sirven para proporcionar un rendimiento fiable, además de algunas extensiones que se usan para crear contenido enriquecido más allá de la vista básica en HTML.
  2. La biblioteca AMP JS garantiza el procesamiento rápido de las páginas AMP HTML.
  3. La memoria caché de Google AMP se puede utilizar para mostrar páginas HTML AMP almacenadas en caché.

AMP HTML

AMP HTML es básicamente una ampliación de HTML con propiedades personalizadas de AMP. El archivo AMP HTML más sencillo tiene este aspecto:

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>¡Hola a todos!</body>
</html>


Aunque la mayoría de las etiquetas de una página AMP HTML son etiquetas HTML normales, algunas se sustituyen por etiquetas específicas de AMP (consulta esta página sobre las etiquetas HTML en las especificaciones de AMP). Estos elementos personalizados, llamados componentes AMP HTML, crean patrones comunes que se pueden implementar de manera fácil y eficaz.

Por ejemplo, la etiqueta amp-img proporciona compatibilidad total con srcset, incluso en navegadores que aún no lo admiten. Descubre cómo crear tu primera página AMP HTML .

AMP JS

La biblioteca AMP JS aplica todas las recomendaciones para el rendimiento de AMP, gestiona la carga de recursos y te proporciona las etiquetas personalizadas mencionadas; y todo para garantizar el rápido procesamiento de tu página.

Entre las optimizaciones más importantes destaca la capacidad de convertir todo lo que procede de recursos externos en asíncrono, de modo que ningún elemento de la página puede bloquear el procesamiento.

Otras técnicas para la mejora del rendimiento incluyen el aislamiento de todos los iframes en una zona de pruebas, el cálculo previo del diseño de cada elemento en la página antes de cargar los recursos y la desactivación de los selectores de CSS de poca velocidad.

Para obtener más información sobre las optimizaciones y las limitaciones, consulta las especificaciones de AMP HTML.

Caché de Google AMP

La caché de Google AMP es una red de distribución de contenido basada en proxy y destinada a entregar todos los documentos válidos de AMP. Su función consiste en recopilar las páginas AMP HTML, almacenarlas en caché y mejorar el rendimiento de la página de forma automática. Cuando se utiliza la caché de Google AMP, el documento, todos los archivos JS y todas las imágenes se cargan desde el mismo origen, en el que se utiliza HTTP 2.0 para obtener la mayor eficacia posible.

En la caché también se incluye un sistema de validación integrado que confirma que el funcionamiento de la página está garantizado y que no depende de recursos externos. El sistema de validación ejecuta una serie de aserciones que confirman que las etiquetas de la página cumplen las especificaciones de AMP HTML.

Cada página de AMP incluye otra versión del validador. Esta versión puede registrar errores de validación directamente en la consola del navegador cuando se procesa la página, lo que permite ver cómo los cambios complejos en tu código pueden afectar al rendimiento y a la experiencia del usuario.

Obtén más información sobre cómo probar las páginas AMP HTML.

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?