Kart, de Rodrigo Tiepolo

Aunque las conexiones a Internet son cada vez más rápidas, conseguir páginas web que carguen de forma instantánea (o casi) sigue siendo un problema. Lo cual es curioso, ¿no crees? Da la sensación de que, a estas alturas, esto ya no debería ser un problema. Pero, claro, resulta que queremos páginas dinámicas (es decir, JavaScript y CSS que habrá que descargar y procesar) y visualmente muy atractivas (¿alguien ha dicho imágenes y vídeos de calidad?), así que el aumento de velocidad nos lo comemos por ahí. Pero además, y para empeorar un poquito las cosas, resulta que cada vez accedemos más a la web con nuestros smartphones y tablets, cuyas conexiones de datos móviles son, en muchos casos, peores que la que podemos tener en casa.

La velocidad de carga de una web es importante porque, sencillamente, no nos gusta esperar. Si tu web tarda más de uno o dos segundos en cargar, tus visitantes se cansan y se van antes de poder ver tu contenido. Y, ya sabes, menos visitas implica menos ingresos por publicidad o ventas.

Para solucionar este problema, Facebook y Google están trabajando en sendos proyectos para acelerar la carga de páginas. Facebook ha diseñado una plataforma llamada Instant Articles para editores de contenido y Google está promoviendo el uso del proyecto AMP (Accelerated Mobile Pages, páginas móviles aceleradas). En esta entrada veremos qué ofrece cada proyecto, algunos de sus puntos fuertes y débiles y cómo añadir compatibilidad con ambas soluciones en WordPress.

Proyecto AMP de Google

Así es como los chicos de Google nos describen su proyecto:

Para muchos, leer contenido en el móvil es una experiencia lenta, incómoda y frustrante. El proyecto AMP es una iniciativa Open Source que tiene como objetivo crear contenidos optimizados para el móvil que puedan cargarse de forma instantánea en cualquier sitio.

No se puede explicar mejor, ¿no? 😉 AMP es una forma de crear páginas web con contenido estático que puedan renderizarse rápidamente. Para ello, dispone de tres componentes:

  • AMP HTML. Básicamente, HTML de toda la vida extendido con algunas propiedades especiales del proyecto AMP.
  • AMP JS. Una pequeña librería JavaScript que implementa las buenas prácticas para la carga rápida de web (por ejemplo, desactivando reglas CSS lentas), que se encarga de la carga y gestión de recursos externos (cargándolos siempre de forma asíncrona) y que añade las etiquetas personalizadas de AMP HTML.
  • La cache AMP de Google. Una red de distribución de contenidos (CDN, por sus siglas en inglés) distribuida que almacena y distribuye las páginas AMP para asegurar que la velocidad de carga es la mayor posible.

Aquí tienes un pequeño vídeo donde te explican más sobre el proyecto:

https://www.youtube.com/watch?v=WrpkFROqR0Q

Ventajas e inconvenientes

Las páginas AMP pueden verse desde cualquier dispositivo o plataforma. No es necesario diseñar plantillas específicas para nuestra web (cosa que, como veremos a continuación, sí sucede con Instant Articles de Facebook). Pero, para mí, una de las principales ventajas de la propuesta de Google es que se trate de un proyecto open source. Trabajando como estamos en WordPress, se agradece poder utilizar herramientas abiertas y con el código fuente disponible.

Los principales inconvenientes son los que uno ya se puede imaginar. Para conseguir páginas que carguen rápido tenemos que dejarnos cosas por el camino (en concreto, aquellas que hacen que las páginas carguen lento). Así, cuando uses AMP quizás descubras que hay algunas partes de tus entradas (posiblemente, las añadidas por otros plugins) que no están disponibles. El estilo tampoco será exactamente el que uses en tu web, aunque podrás personalizar el resultado final. Eso sí, para ello deberás tener nociones de programación :-O 😉

Añadir soporte para AMP en WordPress

¡Está chupado! Simplemente instala el plugin para AMP de Automattic y listo 😀 Una vez instalado, bastará con que añadas /amp/ detrás de la URL de tus entradas para visualizar la versión AMP. Fácil, ¿no?

También te recomiendo que instales el plugin Glue for Yoast SEO & AMP, el cual «modifica el comportamiento del plugin AMP de Automattic ligeramente para que use los metadatos SEO definidos en el plugin de Yoast. Sin el plugin «glue«, cosas como los enlaces canonical podrían no funcionar correctamente.

Instant Articles de Facebook

Si usas la app de Facebook, es muy posible que hayas visto ya más de un Instant Article. ¿Recuerdas alguna vez que, mirando tu muro, has visto un enlace a una noticia y lo has abierto? Si carga instantáneamente, ¡ahí tienes un ejemplo de Instant Article de Facebook!

https://player.vimeo.com/video/127539718

Aunque en el momento de escribir esta entrada los Instant Articles no están disponibles para todo el mundo (Facebook lo ha estado probando con algunos editores), es posible que lo abran a todo el mundo durante el día de hoy, durante la conferencia F8.

Para poder usar Instant Article será necesario pasar por un proceso de aprobación por parte de Facebook. Una vez autorizado, deberás crear un canal de RSS con las entradas que quieres que estén disponibles como Instant Articles, las cuales se visualizarán en Facebook usando alguna de las plantillas que la propia empresa te facilitará.

Ventajas e inconvenientes

La configuración de los Instant Articles es también muy sencilla. De la misma forma que con el proyecto AMP, los chicos de Automattic nos han preparado un plugin que añade este canal RSS de Instant Articles. El contenido que sirvas a través de Instant Articles puede incluir los anuncios que uses (y, por lo tanto, quedarte con los ingresos que hubieras tenido si el visitante hubiera accedido a tu web directamente), o incluso configurar la plataforma de anuncios del propio Facebook.

Como principales inconvenientes, cabe destacar que las plantillas disponibles para mostrar tu contenido son (en principio y a falta de ver cómo progresa la plataforma) las que te ofrece Facebook. Además, los Instant Articles están pensados para ser consumidos única y exclusivamente desde Facebook, luego no sirven «para nada» desde otros contextos.

Añadir soporte para Instant Articles en WordPress

Como te comentaba en el apartado anterior, bastará con instalar este plugin de Automattic. No tiene mayor complicación 😉

En resumen

Si quieres maximizar el número de visitantes a los que llegas, merece la pena instalar ambos plugins en tu instalación de WordPress. Con ellos, serás capaz de ofrecer contenido instantáneo a los usuarios de Facebook y a las plataformas compatibles con AMP (como, por ejemplo, la propia Google o Twitter).

Imagen destacada de Rodrigo Tiepolo.

4 respuestas a «Pequeña introducción a AMP e Instant Articles»

  1. Avatar de Diego

    Muy buen artículo!
    Te dejo un enlace que escribí hace poco en mi blog sobre cómo personalizar AMP.
    http://www.diegofresno.com/personalizar-amp-wordpress/

    Un saludo!

    1. Avatar de David Aguilera

      Muchas gracias, Diego 🙂 Y gracias por compartir tu entrada; ¡nos encanta que participéis! 😀

  2. Avatar de Luis
    Luis

    Osea que cuando escribo un post en Wp, debo editar el link y agregar /amp/ ?

    1. Avatar de David Aguilera

      Hola Luis,

      No, no debes editar el link. La idea es que, una vez instalado el plugin AMP de Automattic, tendrás URLs para tus entradas. Por ejemplo, esta entrada tiene el link https://neliosoftware.com/es/blog/introduccion-amp-instant-articles/. Si tuviéramos instalado el plugin (que no es el caso), podrías acceder, también, a https://neliosoftware.com/es/blog/introduccion-amp-instant-articles/amp/ y entonces verías la versión «acelerada».

      Un saludo,
      David

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.