La lentitud no es solo un problema de UX, sino que también reduce las tasas de conversión y perjudica la accesibilidad al excluir a los usuarios con conexiones a Internet más lentas.
AMP es un esfuerzo de equipo que se lanzó con el objetivo de permitir a los editores crear contenido optimizado para dispositivos móviles una vez y hacer que se cargue instantáneamente en todas partes.
Desde el lanzamiento, muchos editores como BBC, The Economist, Guardian News y Financial Times han implementado la iniciativa, por lo que ahora podemos suponer con seguridad que AMP es una innovación que vale la pena considerar para todos los que quieran seguir siendo competitivos en el dispositivo móvil. web.
AMP en acción
Antes de profundizar en los detalles, aquí está la demostración de AMP , para que pueda verla en acción .
Para ver a AMP en acción, debe hacer dos cosas:
- Vea la demostración, ya sea en un dispositivo móvil, o en un simulador móvil, por ejemplo, Chrome DevTools' móvil Simulador de dispositivos .
- Ejecuta consulta de búsqueda en la barra de búsqueda. Como Google AMP actualmente trabaja principalmente con el sitio de noticias, la mejor opción es una nueva historia.
En la captura de pantalla a continuación, puede ver lo que obtuve cuando utilicé el término de búsqueda rio olympics.
Demostración acelerada de páginas móviles en IPad Como puede ver, las páginas de AMP aparecen como Google Rich Cards, un carrusel de imágenes optimizado para dispositivos móviles, que Google lanzó en mayo de 2016.
Observe cómo Google diferencia las páginas AMP de otras páginas optimizadas para dispositivos móviles utilizando 2 etiquetas diferentes: AMP y Mobile-friendly. También vale la pena hacer clic en algunos de los resultados para ver cómo se ve una página web de AMP y qué tan rápido se ejecuta en el dispositivo móvil.
Experiencia técnica
AMP es un estándar web basado en tecnologías web existentes y se centra en contenido estático . Tiene 3 partes diferentes:
- AMP HTML: HTML modificado con (1) la restricción de ciertas características regulares de HTML / CSS y (2) la introducción de nuevas etiquetas personalizadas (Componentes)
- AMP JS: aplica las mejores prácticas para aumentar el tiempo de carga de la página
- AMP CDN : una memoria caché con un sistema de validación incorporado que optimiza aún más su sitio
AMP HTML
Las páginas móviles aceleradas son páginas HTML regulares que necesitan seguir un conjunto de reglas para hacer que las páginas carguen más rápido y rindan con un rendimiento confiable.
Echemos un vistazo a las cosas más importantes que debe saber al respecto.
Decide si quieres una página AMP separada
Para la misma página de contenido estático, puede tener 2 versiones separadas, una para AMP y otra para la versión que no es de AMP.
También puede elegir tener una sola versión, la página de AMP, y usarla en todas partes:
- En general, admitimos las 2 versiones más recientes de los principales navegadores como Chrome, Firefox, Edge, Safari y Opera.
- Admitimos la versión de escritorio, teléfono, tableta y vista web de estos navegadores respectivos.
Si aún te preocupa el soporte del navegador, echa un vistazo a la publicación de Paul Irish de Google en Stackoverflow.
En caso de que desee tener dos páginas (AMP y no AMP), debe vincularlas a cada una de ellas para informar a los motores de búsqueda sobre la existencia de las dos versiones.
Agregue el siguiente código a la <head> sección de la página que no es de AMP:
<link rel = "amphtml" href = "amp-version.html">También agregue la siguiente línea a la <head> sección de la página que no es de AMP:
<link rel = "canonical" href = "non-amp-version.html">Si solo tiene una página de AMP, aún necesita vincularla de la siguiente manera:
<link rel = "canonical" href = "amp-version.html">Starting Boilerplate
AMP Project ofrece diferentes plantillas iniciales que puede usar para comenzar. Echa un vistazo a la plantilla más simple de AMP HTML a continuación:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/es/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.webp"
]
}
</script>
<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>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>Puede ver que el texto estándar vincula la página HTML normal con la etiqueta <link rel="canonical">
La etiqueta <script> agrega la biblioteca AMP JS.
El <style amp-boilerplate> y las <noscript> etiquetas (en la misma línea que <style>) son utilizados por el validador AMP así que no olvide incluirlos.
También puede encontrar estas dos etiquetas por separado en Github como AMP Boilerplate Code: los documentos advierten a los usuarios que no cambien el código dentro de estas dos etiquetas ya que el Validador de AMP usa expresiones regulares (regex).
Puede encontrar una plantilla repetitiva de AMP HTML más avanzada en el sitio oficial de AMP, además de los elementos necesarios, también contiene el marcado de schema.org en formato JSON-LD; para que su contenido aparezca en Google Rich Cards, es necesario agregar datos enriquecidos.
Consulte la marca requerida cada documento HTML de AMP debe seguir en Github. AMP Project también tiene una gran guía paso a paso que lo ayuda a crear su primera página de AMP.
Etiquetas AMP HTML
Para aumentar la velocidad, la especificación AMP restringe cómo puede usar HTML. Las etiquetas HTML se pueden dividir en 3 grupos:
- Las etiquetas HTML que se pueden usar sin modificaciones se pueden encontrar en la lista blanca del Anexo de etiquetas HTML de AMP.
- Etiquetas HTML prohibidas , como <embed> y <object>, se pueden encontrar en esta lista más amplia .
- Las etiquetas HTML que tienen etiquetas equivalentes específicas de AMP, como <amp-img> y <amp-video>, también se denominan componentes de AMP : permiten implementar patrones comunes de manera inteligente para los recursos. (Nos pondremos en contacto con ellos más tarde.)
Diseña tus páginas HTML AMP
En las páginas de AMP, no puede usar hojas de estilo externas, debe agregar sus estilos personalizados como una hoja de estilo en línea en la sección <head> de la siguiente manera:
<style amp-custom> h1 {
color: # 333;
}
// otros estilos personalizados
</ style>Solo puede tener una hoja de estilo incrustada, y también hay muchas reglas de estilo no permitido, por ejemplo, no puede usar el calificador !important, la regla @import y las pseudoclases.
No olvide verificar las restricciones de la hoja de estilo antes de comenzar a escribir CSS para sus páginas de AMP.
Hay otra cosa que es importante saber sobre las reglas de estilo de AMP: no puede usar el diseño que desee, ya que uno de los principios de AMP es permitir que el navegador calcule el espacio de cada elemento en la página con anticipación.
AMP JS
Los documentos AMP no pueden incluir jаvascripts escritos por autores ni por terceros, sin embargo, esto no significa que las páginas móviles aceleradas no usen jаvascript en absoluto. La biblioteca de jаvascript de AMP (el tiempo de ejecución de AMP) es responsable de cargar y procesar páginas AMP rápidamente mediante el cumplimiento de las mejores prácticas de rendimiento.
Componentes de AMP
Los componentes de AMP están definidos por el tiempo de ejecución de AMP. Son las etiquetas HTML específicas de AMP antes mencionadas que debe usar en lugar de su contraparte habitual, como en <amp-img> lugar de la etiqueta <img>.
Cada componente AMP contiene un recurso externo particular (una imagen, un video, una inserción, etc.). Los recursos externos son propensos a ralentizar los sitios web. El objetivo principal de esta solución es administrar la carga de recursos externos de una manera razonable ejecutándose dentro de entornos aislados.
AMP le proporciona 2 tipos de componentes:
- Componentes incorporados: siempre están disponibles en todos los documentos de AMP, están integrados en el tiempo de ejecución de AMP . Actualmente hay cinco de ellos: <amp-ads> para anuncios <amp-img> para imágenes, <amp-pixel> para el seguimiento de píxeles (utilizado para contar visitas de página), <amp-video> para las incrustaciones directas de archivos de video HTML5, reemplaza la <video>, <amp-embed> para elementos incrustados (se puede usar en lugar de <amp-ad> en ciertos casos)
- Componentes ampliados: componentes adicionales, debe incluirlos explícitamente en su documento de AMP. Hay muchos útiles, como <amp-accordion> y<amp-lightbox>, vea la lista completa. Muchos de ellos se pueden usar para incorporar contenido de servicios de terceros , como Twitter o Instagram.
Tenga en cuenta que todos los recursos cargados externamente, como <amp-img> y <amp-video> debe tener un conocido y atributo para permitir que el navegador calcule el diseño de antemano.<height> y <width>
AMP CDN
El AMP CDN es básicamente un caché, llamado Google AMP Cache. Busca documentos de AMP válidos, almacena en caché y los carga. AMP CDN también tiene un sistema de validación incorporado.
Vale la pena probar sus páginas AMP antes de permitir que se conecten para pasar el validador de forma segura. Puedes hacerlo de muchas maneras diferentes.
IMAGEN: Proyecto AMP Es bueno saber que AMP CDN usa el protocolo HTTP/2 para lograr el mejor rendimiento posible.
Herramientas AMP
Existen algunas excelentes herramientas que pueden ayudarlo a implementar páginas móviles aceleradas, echemos un vistazo a algunas de ellas.
Google proporciona a los webmasters una práctica herramienta de informe de estado de AMP que muestra un recuento de páginas AMP correctamente indexadas y también errores relacionados con AMP.
La biblioteca de AMP PHP de Lullabot le permite convertir sus páginas HTML a AMP HTML, y también informa el cumplimiento de cualquier documento HTML con los estándares de AMP.
También puede consultar el complemento de AMP de Automattic que le permite habilitar las páginas móviles aceleradas en su sitio de WordPress.
IMAGEN: WordPress.org
Consideraciones adicionales
Jonathan Abrams, el fundador de Nuzzel, afirma aún mejor, ya que afirma que incluso los sitios optimizados para dispositivos móviles como el New York Times se cargan significativamente más rápido, en lugar de tardar tres segundos en cargar la página promedio, una página se carga en menos de la mitad segundo, cuando las páginas móviles aceleradas de Google están habilitadas .
También puede leer un artículo interesante en Verge sobre la competencia de Google AMP y los Artículos instantáneos de Facebook. Si todavía está buscando una respuesta para "¿cuál es el truco?", Consulte la publicación de Yoast que menciona los temores de que AMP básicamente nos está devolviendo a un momento de Internet anterior al año 2000, y cuestiona si realmente se trata de un estándar abierto.
Si no quiere reflexionar demasiado, solo quiere saltar a la codificación de una vez, el sitio Learn AMP by Example es un buen comienzo.
