Páginas AMP y Turbo: Pros, contras y resultados de implementación

Quienes siguen las noticias de la industria de TI conocen las "p√°ginas r√°pidas" de Google y Yandex: p√°ginas AMP y Turbo. Fueron lanzados hace m√°s de 2 a√Īos, pero no hicieron mucho ruido en el mercado. Mi nombre es Konstantin. Soy el director del estudio web AlkoDesign. Decidimos recordar estas herramientas y compartir los resultados de su implementaci√≥n.

imagen

El tr√°fico m√≥vil ha estado creciendo constantemente en los √ļltimos a√Īos. Los usuarios leen cada vez m√°s sitios de noticias, solicitan productos y art√≠culos desde sus tel√©fonos. Las versiones m√≥viles y adaptativas de los sitios han dejado de ser una ventaja atractiva, pero se han convertido en una necesidad real.

imagen

Pero no todo es tan hermoso. En la b√ļsqueda del tr√°fico y la reducci√≥n de fallas, tenemos que buscar nuevas soluciones. Las versiones m√≥viles y adaptativas no siempre salvan la situaci√≥n, y a veces son generalmente inc√≥modas: la adaptativa resulta ser demasiado "pesada" para descargar, debido a esto la velocidad de descarga en los tel√©fonos inteligentes deja mucho que desear. (¬ŅEs necesario decir que a los visitantes y motores de b√ļsqueda no les gusta la carga larga?)

En AlkoDesign.ru trabajamos con un gran portal de información. (Lo haremos sin nombres). Una de las tareas establecidas para nosotros fue: aumentar el tráfico y reducir el porcentaje de fallas. Sin pensarlo dos veces, decidimos usar las páginas rápidas de Google y Yandex.

En este artículo compartiremos los resultados de introducir tales páginas en uno de los portales de noticias y describiremos brevemente qué son las páginas rápidas y con qué comen (para aquellos que no están en el tema).

Teoría


AMP y Turbo Pages es una tecnolog√≠a de p√°gina m√≥vil acelerada desarrollada por desarrolladores independientes y promovida activamente por ambos motores de b√ļsqueda. Dichas p√°ginas se cargan incluso m√°s r√°pido que la p√°gina de la versi√≥n m√≥vil del sitio.

P√°ginas AMP google.ru


imagen

La conclusi√≥n es que el sitio usa etiquetas especiales (con el amplificador de prefijo), cuyo n√ļmero y funcionalidad est√°n estrictamente limitados. La tarea del desarrollador es armar una mezcolanza de esquemas disponibles que resolver√°n el problema del cliente.

Los motores de b√ļsqueda encuentran estas etiquetas especiales e informaci√≥n de cach√© en ellas. Despu√©s de eso, cuando el usuario busca algo, el navegador en segundo plano carga la informaci√≥n del CDN en un iframe especial y, al hacer clic en el enlace, abre una p√°gina ya cargada en una ventana especial.

Al usar cualquier CMS en el sitio, para las p√°ginas AMP debe crear su propia plantilla separada para mostrar datos de acuerdo con los requisitos para marcar las p√°ginas AMP.

Yandex Turbo Pages


imagen

La principal diferencia con AMP es que el contenido de las p√°ginas de Turbo no se toma de las p√°ginas del sitio, sino de una fuente RSS especial.

Sus contenidos se almacenan en servidores Yandex. Pero para que Yandex tome contenido de nuestro sitio web, debemos escribir un script que transfiera todos los datos necesarios (texto, imágenes, estilos, etc.) en un formato de documento XML especial. El proceso es similar a la preparación de datos para Yandex.Products o Yandex.Market.

Honestamente, la configuraci√≥n es lo m√°s simple posible. Si el n√ļmero de p√°ginas es peque√Īo (10-20), puede crear una fuente RSS para Yandex usted mismo, sin involucrar a un programador. Es cierto que en este caso tambi√©n se actualizar√° manualmente.

La velocidad de carga de la p√°gina Turbo es aproximadamente 15 veces m√°s r√°pida de lo habitual. Y, un bono adicional (pero no el √ļltimo): si el sitio falla, por ejemplo, debido a una infecci√≥n o un ataque DDoS, sus p√°ginas Turbo continuar√°n abri√©ndose y el contenido seguir√° estando disponible para los usuarios.
Las p√°ginas con AMP y Turbo se clasifican por encima de otras consultas de b√ļsqueda debido al hecho de que cumplen con los requisitos para una carga r√°pida.

Características de las páginas AMP y Turbo


La primera y más importante diferencia de los sitios estándar es la incapacidad de insertar scripts "regulares". Es decir, la mayor parte de la funcionalidad vinculada al cambio dinámico (acciones de clic, animación, filtrado, ventanas modales) se vuelve inaccesible.

La solución es usar componentes disponibles y un iframe. Los componentes disponibles le permiten lograr, aunque no esté completo, la implementación de las herramientas habituales en el sitio, pero presentan un reemplazo decente y están optimizados para descargas rápidas.

Con la ayuda de las etiquetas AMP y Turbo, puede implementar el men√ļ lateral, el carrusel, el env√≠o de formularios, el contenido descargable, la publicidad y m√°s. Cada componente est√° asociado con su propia biblioteca js, que debe estar conectada para usarla en el sitio.

Características de la página Turbo


Ayudan a aumentar el alcance de la audiencia móvil: los usuarios no tienen que esperar mucho tiempo para que se cargue el sitio, y casi inmediatamente cambian a su contenido. El aumento en el tráfico puede ser significativo.

Las ventajas de las p√°ginas Turbo son que, una vez implementadas en su sitio:

  • La tasa de rebote est√° cayendo. Cuando un usuario visita su sitio y, debido a su mala conexi√≥n a Internet durante mucho tiempo, no puede abrir su p√°gina, simplemente no puede esperar a que se cargue, cierre y vuelva a los resultados de b√ļsqueda para encontrar otro sitio m√°s r√°pido. Por lo tanto, su tasa de rebote aumenta, y cuanto mayor sea la tasa de rebote, peor ser√° su posici√≥n en los resultados de b√ļsqueda.
  • El tr√°fico m√≥vil est√° creciendo. Hoy, muchos usuarios ya saben que los sitios marcados con un √≠cono de cohete se cargan muy r√°pidamente y, por lo tanto, hacen clic activamente en ellos. Esto le brinda una ventaja sobre los competidores y le permite aumentar el tr√°fico a su sitio desde dispositivos m√≥viles.
  • La carga de alojamiento se reduce. Si el sitio tiene un tr√°fico bastante alto, este art√≠culo tambi√©n ser√° relevante. Debido al hecho de que la descarga de contenido no es desde su alojamiento, sino desde servidores Yandex, la carga se reduce. Al mismo tiempo, Yandex utiliza su propia red de entrega de contenido (CDN) para crear y almacenar p√°ginas Turbo, lo que acelera a√ļn m√°s la carga de contenido.

Desventajas Turbo - en funcionalidad limitada:

  • Los formularios de comentarios no son compatibles, no hay posibilidad de ordenar productos o servicios. Esto se puede llamar el menos m√°s importante, porque para una p√°gina de destino o una tienda en l√≠nea, el uso de p√°ginas turbo ser√° inapropiado, ya que a√ļn no podr√° recibir aplicaciones de ellos.
  • El sitio est√° dise√Īado de acuerdo con una plantilla predefinida de peque√Īo tama√Īo. Cuando hace clic en el enlace marcado con el icono "Turbo", su contenido aparecer√° en una p√°gina simplificada creada por el motor de b√ļsqueda, y nadie ver√° el dise√Īo exclusivo de su sitio web. Por lo tanto, aqu√≠ debe elegir entre la alta velocidad de carga del sitio y el dise√Īo √ļnico de su versi√≥n m√≥vil o adaptativa.

Características de AMP


  • Creaci√≥n de p√°ginas "f√°ciles";
  • El motor de b√ļsqueda guarda versiones ligeras de p√°ginas en sus servidores;
  • Yandex ofrece a los propietarios de tel√©fonos inteligentes p√°ginas turbo en una b√ļsqueda o fuente de noticias;
  • Gracias a la alta velocidad de descarga, se mejora la experiencia del usuario y los indicadores de comportamiento.

Despu√©s de crear p√°ginas AMP, Google fue m√°s all√°. Transferi√≥ todos los sitios a un nuevo sistema de clasificaci√≥n: Google Mobile Friendly. Ahora la clasificaci√≥n de los sitios depende principalmente de la versi√≥n m√≥vil del sitio. Si antes era posible crear y "lamer" la versi√≥n de escritorio del sitio sin hacer una versi√≥n adaptativa o, como √ļltimo recurso, m√≥vil del sitio. Ahora, al desarrollar un sitio, se debe prestar especial atenci√≥n a la versi√≥n adaptativa.

Preparación de datos


imagen

Para p√°ginas AMP


Todas las imágenes de la página deben describirse en una etiqueta especial <amp-img>, lo que dificulta al usuario insertar imágenes a través de un editor de texto.

Además, si está utilizando un carrusel o una caja de luz, debe insertar análogos de los componentes del amplificador. Para implementar esta funcionalidad, se implementó un controlador que, utilizando expresiones regulares, reemplaza las etiquetas HTML estándar con las etiquetas utilizadas en la especificación del amplificador.

Otra caracter√≠stica que deber√≠a referirse principalmente a un editor de texto, ya que la edici√≥n de estilos all√≠ tiene lugar en l√≠nea. Los elementos con atributos como style = "color: ..." no son v√°lidos, y cambiar el color o el tama√Īo de fuente escribir√° esta propiedad en el c√≥digo.

Para que el motor de b√ļsqueda entienda que hay una versi√≥n AMP de la p√°gina, debe contener un enlace:
<link rel = "amphtml" href = " www.site.com/url/to/amp/document.html ">

Y en la p√°gina de AMP hay un enlace de regreso:
<link rel = "canonical" href = " www.site.com/url/to/full/document.html ">

Los estilos CSS se escriben en l√≠nea y su tama√Īo no debe exceder los 50 kb.

Para p√°ginas turbo


Para conectar las p√°ginas de Turbo, es suficiente realizar peque√Īos cambios en el archivo de exportaci√≥n actual de acuerdo con los requisitos t√©cnicos:

  • El elemento ra√≠z del archivo RSS es rss, cuyo atributo de versi√≥n debe establecerse en 2.0.
  • Dentro del elemento rss est√° el elemento del canal, que incluye informaci√≥n sobre la fuente y su contenido.

Se indican los siguientes:

  • Informaci√≥n sobre el sitio fuente: la informaci√≥n se transmite en el elemento del canal.
  • Informaci√≥n del mensaje: los datos se transfieren en el elemento del elemento.
  • contenido de la p√°gina turbo

En la página turbo, puede incrustar elementos adicionales como: encabezado de página, enlaces, imágenes, video, botón Compartir, citas, tablas, etc. También puede conectar algunos sistemas de análisis web.

Practica


Implementamos AMP en el sitio


Teniendo en cuenta que estamos lejos de ser principiantes en la esfera de TI, la introducción de páginas no fue difícil.

Creamos una plantilla separada para el sitio usando las etiquetas necesarias de las especificaciones AMP y Turbo. Luego configuramos la generación automática de páginas.

imagen

Inmediatamente después de la introducción de páginas rápidas, lanzamos un cheque a través del validador de Google y Yandex. Después de comenzar, encontraron errores adicionales que se resolvieron con éxito.

imagen

Introduciendo Turbo Pages


Para implementar las páginas de Turbo en el sitio, se estudió la especificación del formato. Plantillas definidas para generar encabezados de páginas turbo e indicar imágenes adicionales. Se desarrolló un módulo especializado para CMS, que genera archivos de datos RSS, de acuerdo con la documentación técnica de Yandex ( partner.news.yandex.ru/tech.pdf ).

Dado que los materiales en el sitio se agregan constantemente, la actualización de las fuentes RSS con páginas turbo también se actualiza ejecutando el script de actualización en CRON. Debido a los detalles del proyecto, se decidió hacer varias fuentes RSS, cada una para su propio tipo de contenido.
En la configuración del módulo, puede especificar qué secciones del sitio desea exportar a RSS, especificar datos adicionales para la exportación. La frecuencia de las actualizaciones de fuentes RSS para páginas turbo se establece por la frecuencia de la tarea CRON.

Después de pasar la validación RSS por Yandex, se agregaron páginas Turbo a la indexación.

Resultados


Rebote


Tras la introducción de las páginas AMP y Turbo, las métricas de comportamiento han cambiado.

Para el trimestre, la tasa de rebote general del sitio fue del 14,2% . Aquí se consideran todos los visitantes, incluidos los usuarios de escritorio.

imagen

La tasa de rebote para los propietarios de teléfonos inteligentes que llegaron a las páginas normales fue del 23.7% en el trimestre .

imagen

La tasa de rebote para los visitantes de las páginas Turbo durante el mismo período fue del 6.2%.

imagen

Es decir, en términos de porcentaje de rebote, las páginas normales pierden más del doble que las páginas turbo: 23.7% versus 6.2% con páginas Turbo y un total de 14.2% .

Asistencia


Desde la introducción de las páginas AMP y Turbo, hemos aumentado el tráfico al portal en 2 veces .

imagen

Velocidad de descarga de la p√°gina


La ventaja principal es un aumento en la velocidad de carga de la página de 3 a 10 veces . Ella creció instantáneamente debido al almacenamiento en caché.

Y también:

  • Carga del servidor reducida
  • Los factores de comportamiento han crecido (AMP no afecta directamente las posiciones en lo org√°nico).

Conclusión: presentamos el lugar y sabiamente


Donde sea necesario transmitir contenido al usuario lo m√°s r√°pido posible y de una manera simple.

En nuestro caso, el resultado de la implementación fue:


  • la tasa de rechazo disminuy√≥ en general 2 veces;
  • la asistencia aument√≥ en 2 veces;
  • la velocidad de descarga aument√≥ 3-10 veces

Para quien Turbo a√ļn no es adecuado:


  • Comercio electr√≥nico porque no hay canasta. (actualmente en desarrollo)
  • P√°gina de destino, porque los botones y formularios en las p√°ginas no son compatibles

¬ŅQui√©nes son las p√°ginas Turbo ideales?


  • Los medios
  • Proyectos de contenido
  • Blogs dentro de sitios (por ejemplo, una secci√≥n de informaci√≥n en una tienda en l√≠nea, con noticias, descripciones de nuevos productos en la industria, etc.)

Recomendamos encarecidamente que los propietarios de portales de noticias, sitios de medios o blogs de información conecten dichas páginas. Esto le permitirá obtener tráfico adicional, reducir la cantidad de impresiones y aumentar la cantidad de páginas vistas.

Las páginas AMP y Turbo son una tecnología interesante para usar sabiamente. Se puede utilizar para la versión móvil "fácil" del sitio, o para ciertas secciones que no requieren una alta funcionalidad. Y, por supuesto, esta es una gran solución para sitios de información, blogs, revistas en línea.

Source: https://habr.com/ru/post/440742/


All Articles