Sobes.tech
Ayuda para la entrevista
Recursos
Preparación de la entrevista
Recursos
Búsqueda de empleo
Recursos
Legales
Volver a preguntas
Middle

¿Qué son las páginas AMP?

sobes.tech AI

Respuesta de la IA

AMP (Páginas Móviles Aceleradas) es un marco de trabajo HTML de código abierto creado por Google para crear páginas web rápidas y adaptables que se muestran bien en dispositivos móviles.

Principios básicos de AMP:

  • Conjunto limitado de etiquetas HTML: Se utiliza un subconjunto de HTML, lo que permite acelerar el análisis y renderizado de la página.
  • Carga asíncrona de recursos: Scripts, imágenes y otros recursos se cargan de forma asíncrona, sin bloquear el renderizado del contenido principal.
  • Prioridad del contenido: La optimización está dirigida a la carga rápida del contenido visible.
  • Tamaños estáticos de los elementos: La mayoría de los elementos tienen tamaños predefinidos, lo que reduce los "saltos" de contenido durante la carga.
  • Uso de AMP Cache: Una organización externa (por ejemplo, Google) puede almacenar en caché las páginas AMP y entregarlas desde su caché, asegurando una carga instantánea.

Componentes clave de AMP:

  • AMP HTML: Conjunto limitado de etiquetas HTML con la adición de componentes AMP personalizados.
  • AMP JS: Biblioteca de JavaScript para gestionar la carga de recursos y la interactividad.
  • AMP Cache: Red proxy para almacenar en caché y entregar páginas AMP.

Ejemplo de uso de AMP:

<!doctype html>
<html amp lang="ru">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Ejemplo de página AMP</title>
    <link rel="canonical" href="https://example.com/обычная-страница.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}}@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>
    <style amp-custom>
      /* Tus estilos CSS */
    </style>
  </head>
  <body>
    <h1>¡Hola, AMP!</h1>
    <p>Esta es una página rápida.</p>
    <amp-img src="/images/kitten.jpg" alt="Gatito" width="100" height="100" layout="responsive"></amp-img>
  </body>
</html>

Ventajas de AMP:

  • Velocidad de carga: Las páginas se cargan muy rápido, especialmente en dispositivos móviles.
  • Mejor SEO: Google da preferencia a las páginas AMP en los resultados móviles.
  • Mejor experiencia de usuario: Carga rápida y desplazamiento suave.

Desventajas de AMP:

  • Limitaciones en diseño y funcionalidad: No todas las etiquetas HTML y funciones de JavaScript están disponibles.
  • Complejidad en la implementación: Requiere desarrollo separado o adaptación del contenido existente.
  • Dependencia de Google (en cierta medida): AMP Cache está bajo control de Google.

AMP se usa ampliamente para artículos de noticias, blogs y otro contenido donde la velocidad de carga es críticamente importante en dispositivos móviles.

AnteriorSiguiente