Guía para principiantes de páginas móviles aceleradas (AMP)

Páginas Móviles Aceleradas Es la iniciativa de Google que pretende resolver el mayor problema de la web móvil. - velocidad. Las increíbles experiencias de usuario que estamos diseñando con mucho cuidado, son extremadamente lentas en dispositivos móviles.

La lentitud no es únicamente un problema de UX, sino también reduce las tasas de conversión, y perjudica la accesibilidad Al excluir a los usuarios con conexiones de internet más lentas. AMPERIO es un esfuerzo de equipo lanzado con el objetivo de permitir a los editores crear contenido móvil optimizado una vez, y haz 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 asumir con seguridad que AMP es una innovación que vale la pena considerar para todos los que quieran mantenerse competitivos en el móvil web.

AMP en acción

Antes de sumergirse en los detalles, aquí está el Demostración de AMP, así que puedes verlo en acción. La demo se puede acceder en este enlace..

Para ver AMP en acción, necesitas hacer dos cosas:

1. Vea la demostración en un dispositivo móvil o en un simulador móvil, por ejemplo. Simulador de dispositivos móviles de Chrome DevTools.
2. Ejecutar 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 noticia nueva..

En la captura de pantalla a continuación, puede ver lo que obtuve cuando usé el término de búsqueda Juegos Olímpicos de Río.

Como puedes ver, las páginas de AMP aparecen como Google Rich Cards, una 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 compatible con dispositivos móviles. 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 móvil..

Experiencia técnica

AMP es un estándar web construido sobre tecnologías web existentes, y enfocado en contenido estático. Tiene 3 partes diferentes:

1. 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).
2. AMP JS: aplica las mejores prácticas para disminuir el tiempo de carga de la página
3. AMPERIO CDN: un caché con un sistema de validación incorporado, que optimiza aún más su sitio

Si desea obtener más información sobre los antecedentes técnicos de las páginas de AMP, vea el video a continuación en el que Paul Bakaus de Google ofrece una charla introductoria en AMP.

Si desea profundizar, también vale la pena comprender qué técnicas de optimización utiliza AMP para acelerar el rendimiento en dispositivos móviles. En el video a continuación, Malte Ubl, el líder de AMP Engineering explica la anatomía de la AMP en detalle.

AMP HTML

Las Páginas Móviles Aceleradas son páginas HTML regulares esa necesidad de sigue un conjunto de reglas para hacer que las páginas se carguen más rápido y se rendericen con un rendimiento confiable.

Echemos un vistazo a las cosas más importantes que necesita saber al respecto. También puedes echar un vistazo a la especificación completa de AMP HTML..

Decide si quieres una página AMP separada

Para la misma página de contenido estático, puede tener 2 versiones separadas - uno para el AMP y otro para la versión no AMP. También puedes optar por tener solo una version - La página de AMP, y usarla en todas partes. Sobre soporte del navegador, Las reclamaciones de la página de Github de AMP:

Si aún estás preocupado por el soporte del navegador, consulta la publicación de Paul Irish de Google en Stackoverflow.

En caso de que quiera tener dos páginas (AMP y no AMP), necesita enlace a cada uno de ellos a fin de que informar a los motores de búsqueda sobre la existencia de la dos versiones.

Agregue el siguiente código a la sección de la página no AMP:

También agregue la siguiente línea a la sección de la página AMP:

Si solo tiene una página AMP, todavía necesita enlazarlo desde sí mismo de la siguiente manera:

Placa de calderas de arranque

El proyecto AMP ofrece diferentes calderitas de arranque Puedes usar para empezar. Echa un vistazo a la plantilla de HTML de AMP más simple a continuación:

          Hola Mundo!  

Puede ver que la plantilla de enlaces enlaza la página HTML normal utilizando el etiqueta. los > etiqueta agrega el Biblioteca AMP JS.

los

Solo puedes tener uno hoja de estilo incrustada, y también hay muchos reglas de estilo no permitidas, por ejemplo, no puedes usar el !importante calificador, el @importar regla, y pseudo-clases.

No olvide revisar las restricciones de la hoja de estilo antes de comenzar a escribir CSS para sus páginas AMP.

Hay otra cosa que es importante saber acerca de las reglas de estilo de AMP: usted no puedes usar el diseño que quieras - ya que es uno de los principios de AMP para permitir que el navegador Calcula el espacio de cada elemento. en la pagina por adelantado.

Echa un vistazo a los diseños compatibles y no compatibles.

AMP JS

Los documentos de AMP pueden incluir ni ningún autor escrito, ni ningún JavaScripts de terceros, Sin embargo, esto no significa que las Páginas Móviles Aceleradas no utilicen JavaScript en absoluto. La biblioteca de JavaScript de AMP (el tiempo de ejecución de AMP) es responsable de cargar y renderizar las páginas de AMP rápidamente hacer cumplir las mejores prácticas de rendimiento.

Componentes AMP

Los componentes de AMP son definido por el tiempo de ejecución de AMP. Son los mencionados Etiquetas HTML específicas de AMP Necesita usar en lugar de su contraparte regular, como en vez de etiqueta.

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 Gestionar la carga de recursos externos. de una manera razonable ejecutándolos dentro de cajas de arena.

AMP te proporciona 2 tipos de componentes:

1. Componentes incorporados: siempre están disponibles en cada documento AMP, están integrado en el tiempo de ejecución de AMP. Actualmente hay cinco de ellos:
   1. para mostrar anuncios
   2. Para las imágenes, se utiliza en lugar de la etiqueta
   3. para el seguimiento de píxeles (utilizado para contar vistas de página)
   4. para incrustaciones de archivos de video HTML5 directo, reemplaza la etiqueta
   5. para elementos embebidos (se puede utilizar en lugar de en algunos casos)
2. Componentes extendidos: Componentes adicionales, debes explícitamente incluirlos en su documento AMP. Hay muchos útiles, como y , vea la lista completa Muchos de ellos pueden ser utilizados para incrustar contenido de servicios de terceros, tales como desde Twitter o Instagram.

Tenga en cuenta que todos los recursos cargados externamente, como y debe tener un conocido y atributo con el fin de habilitar el navegador para calcular el diseño de antemano.

AMP CDN

los AMP CDN es básicamente un caché, llamado Google AMP Cache. Obtiene documentos válidos de AMP, los almacena en caché y los carga. AMP CDN también tiene un sistema de validación incorporado.

Merece la pena probando tus páginas AMP Antes de dejarlos ir en línea con el fin de con seguridad pasar el validador. Puedes hacerlo de muchas maneras diferentes..

Es bueno saber que AMP CDN utiliza el protocolo HTTP / 2 para lograr el mejor rendimiento posible..

Herramientas AMP

Hay algunas herramientas excelentes que pueden ayudarlo a implementar las 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 AMP que muestra un recuento de páginas AMP indexadas con éxito, y errores relacionados con AMP también.

De Lullabot Biblioteca PHP AMP le permite convertir sus páginas HTML a HTML de AMP, y también informa del cumplimiento de cualquier documento HTML con los estándares de AMP.

Si desea utilizar AMP en su sitio de WordPress, lea el tutorial de Yoast sobre cómo configurar WordPress para AMP y cómo funciona AMP con el complemento Yoast SEO.

También puedes echar un vistazo a Automattic's Plugin AMP que le permite habilitar páginas móviles aceleradas en su sitio de WordPress.

Consideraciones adicionales

Si aún no está convencido, eche un vistazo al video sobre una prueba de velocidad rápida abajo.

Jonathan Abrams, el fundador de Nuzzel hace afirmaciones aún mejores, 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 tomar tres segundos para cargar la página promedio, se carga una página en menos de medio 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 aún está buscando una respuesta para "¿cuál es el problema?", Consulte la publicación de Yoast que menciona los temores de que AMP básicamente nos lleve a un horario de Internet antes de 2000, y pregunta si realmente es un estándar abierto..

.