¿Qué es AMP y cómo optimizar el rendimiento de tu página web mediante AMP?

854Palabras
4Minutos
17 Aug, 2024
- SEO

Con la proliferación de dispositivos móviles, la velocidad de carga de una página web se ha convertido en un factor crucial tanto para la experiencia del usuario como para la optimización SEO. AMP (Accelerated Mobile Pages, o Páginas Móviles Aceleradas) es una tecnología de código abierto impulsada por Google que busca mejorar el rendimiento web reduciendo los tiempos de carga mediante un marco específico y ciertas limitaciones. En este artículo, primero explicaremos qué es AMP y sus ventajas, luego demostraremos cómo convertir una página HTML estándar en una página AMP con ejemplos prácticos y finalmente abordaremos los problemas comunes al implementar AMP.

¿Qué es AMP?

AMP es un marco ligero diseñado para mejorar la velocidad de carga de las páginas en dispositivos móviles. Logra esto al aplicar normas estrictas sobre HTML, CSS y JavaScript, reduciendo así el tiempo de renderizado de la página y mejorando la experiencia del usuario. Las características principales de AMP incluyen:

Alto rendimiento: Al limitar el contenido de la página y reducir la carga de recursos innecesarios, AMP ofrece una presentación más rápida de la página.
Primero móviles: AMP está diseñado específicamente para dispositivos móviles, pero también funciona en computadoras de escritorio.
Ventajas SEO: Las páginas AMP tienen el potencial de aparecer en los primeros resultados de Google, lo que mejora su visibilidad.

Ventajas de AMP

Carga rápida: AMP reduce significativamente el tiempo de carga al limitar el uso de JavaScript externo e imponer la estilización en línea de CSS.
Mejora la experiencia del usuario: Las páginas más rápidas permiten a los usuarios acceder al contenido de manera más eficiente, lo que reduce la tasa de rebote.
SEO amigable: Las páginas AMP pueden tener una mayor prioridad en los resultados de búsqueda (SERP), especialmente en búsquedas móviles.

Ejemplo de transformación a página AMP

Para entender mejor cómo funciona AMP, demostraremos cómo transformar una página HTML estándar en una página AMP mediante código.

Página HTML original

Este es un ejemplo de una página HTML estándar:

1
<!doctype html>
2
<html lang="es">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Mi página web estándar</title>
7
    <link rel="stylesheet" href="styles.css" />
8
  </head>
9
  <body>
10
    <h1>Bienvenidos a mi sitio web</h1>
11
    <img src="ejemplo.jpg" alt="Imagen de ejemplo" />
12
    <script src="script.js"></script>
13
  </body>
14
</html>

Página transformada a AMP

Una página AMP difiere de una página HTML normal en varios aspectos, ya que sigue estrictamente las especificaciones de AMP, como la inclusión de scripts AMP, el uso de componentes AMP y la estilización CSS en línea. A continuación, se muestra la página transformada:

1
<!doctype html>
2
<html ⚡>
3
  <head>
4
    <meta charset="utf-8" />
5
    <link rel="canonical" href="self.html" />
6
    <meta name="viewport" content="width=device-width,minimum-scale=1" />
7
    <style amp-boilerplate>
8
      body {
9
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
10
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
11
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
12
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
13
      }
14
      @-webkit-keyframes -amp-start {
15
        from {
16
          visibility: hidden;
17
        }
18
        to {
19
          visibility: visible;
20
        }
21
      }
22
      /* Estilos adicionales omitidos por brevedad */
23
    </style>
24
    <noscript
25
      ><style amp-boilerplate>
26
        body {
27
          -webkit-animation: none;
28
          -moz-animation: none;
29
          -ms-animation: none;
30
          animation: none;
31
        }
32
      </style></noscript
33
    >
34
    <script async src="https://cdn.ampproject.org/v0.js"></script>
35
  </head>
36
  <body>
37
    <h1>Bienvenidos a mi sitio web</h1>
38
    <amp-img
39
      src="ejemplo.jpg"
40
      width="800"
41
      height="600"
42
      layout="responsive"
43
      alt="Imagen de ejemplo"
44
    ></amp-img>
45
  </body>
46
</html>

Pasos clave para la transformación

Declaración DOCTYPE: Utilizar <html ⚡> para indicar que es una página AMP.
Scripts AMP: Incluir en el <head> el script central de AMP: <script async src="https://cdn.ampproject.org/v0.js"></script>.
Sustitución de etiquetas de imagen: Reemplazar la etiqueta estándar <img> con la etiqueta <amp-img>, especificando los atributos de ancho, alto y diseño.
CSS en línea: El CSS en AMP debe ser en línea y no puede exceder los 50 KB.

Implementación y validación de una página AMP

Antes de poner en marcha una página AMP, es fundamental validarla para asegurarse de que cumple con las normas de AMP.

Validar la página AMP

Utiliza la herramienta AMP Validator para validar rápidamente tu página AMP. Solo necesitas pegar la URL o el HTML de la página para verificar si contiene algún código que no cumpla con las especificaciones de AMP.

Consideraciones al implementar páginas AMP

SEO y AMP: Las páginas AMP deben contener un enlace <link rel="canonical" href="URL"> que apunte a la versión no AMP original, lo cual es vital para la optimización SEO.
AMP Cache: Las páginas AMP pueden almacenarse en la caché de Google AMP, lo que mejora aún más la velocidad de carga. Consulta la documentación oficial para configurarlo.

Problemas comunes al implementar AMP

CSS excede el límite: Dado que AMP limita el tamaño del CSS a 50 KB, puede ser necesario optimizarlo o dividir el contenido en varias subpáginas.
JavaScript personalizado no permitido: AMP no permite el uso de scripts JavaScript personalizados, por lo que las funcionalidades interactivas deben implementarse con componentes AMP integrados, como <amp-bind> para el contenido dinámico.
Retrasos en la actualización de la página: Cuando se usa AMP Cache, las actualizaciones de la página pueden no reflejarse de inmediato. Se puede enviar una solicitud de actualización de AMP Cache para forzar la actualización.

Conclusión

AMP, como herramienta para optimizar el rendimiento de las páginas web, puede mejorar significativamente la experiencia del usuario en dispositivos móviles. Mediante normas estrictas y optimización, AMP no solo acelera la velocidad de carga de las páginas, sino que también mejora el rendimiento SEO. Este artículo ha explicado cómo AMP puede…