AMP HTML, WordPress y el futuro de la Web ¿estás preparado? ¡Corre!

Si pensabas que ya tenías tu web optimizada, que con algo de cache y una CDN lo tenías todo hecho para obtener un buen ranking en los buscadores y ofrecer una rápida y buena experiencia a tus visitantes te equivocas. Te falta AMP HTML, la tecnología de la que todos vamos a hablar en 2016.

¿Qué es AMP HTML?

Mejor empezaría por decir qué no es AMP …

AMP no es, ni define, la nueva Web móvil, es una nueva tecnología de publicación, especialmente para editores de noticias. No reemplaza a las actuales, es un añadido más a nuestros formatos de publicación.

Lo que sí es AMP …

AMP son las iniciales de Accelerated Mobile Pages, o Páginas Móviles Aceleradas, así que solo con esto ya te puedes ir haciendo una idea del asunto.

Estamos hablando de publicación para móviles (navegadores y WebViews). Es una tecnología muy nueva pero, con apenas dos meses de vida, ya ha captado la atención de los grandes editores de contenido y de las principales plataformas tecnológicas, incluyendo WordPress, por supuesto.

Está concebida para una publicación de página rápida y 100% funcional en todos los dispositivos, móviles y de escritorio, pero especialmente optimizada para todo lo que sea móvil, lo que requiera un máximo de velocidad y un mínimo de consumo de recursos.

Es una tecnología Open Source, con muchos técnicos y plataformas involucrados, así que el desarrollo será rápido. Google, WordPress, Twitter, Pinterest o LinkedIn y la comunidad Open Source no pueden estar equivocados ¿no crees?

Lo que tengo claro, y tu también espero, es que habrá que estar muy atentos al GitHub donde se está desarrollando o a la web del proyecto AMP. Es una tecnología Open Source, con muchos técnicos y plataformas involucrados.

Viene a ser la competencia directa de código abierto a Apple News y Facebook’s Instant Articles.

Los usuarios tendrán en poco tiempo la opción en sus navegadores de visitar las versiones ligeras (AMP) de las páginas o las completas, más lentas, aunque quizás más bonitas visualmente, si es que eso importa estos días.

Debemos estar preparados para los primeros meses de 2016, cuando Google empiece a redirigir tráfico de búsqueda a las páginas AMP, tanto previsualizando el contenido de búsquedas como mejorando nuestro ranking al ser AMP-friendly.

¿No es lo mismo AMP que responsive?

No, en absoluto. Una web responsive mantiene todos los estilos y scripts, pero con la particularidad de que se adapta, en tamaño y estructura, a los distintos dispositivos de visualización.

AMP es mucho más especializado, exigente y restrictivo a la hora de ofrecer una experiencia veloz y móvil. De  hecho, la guía de desarrollo de AMP incluyen estos requisitos:

• Sin campos de formularios
• Sin JavaScripts externos
• Sin hojas de estilos externas
• Sin estilos internos
• Todo debe ajustarse a los límites de tamaño de archivos definidos

Ah vaya, ¿pensabas que sería fácil?

En realidad sí, pero con algunas reglas…

Qué admite AMP y qué no – AMP para desarrolladores

AMP HTML tiene importantes limitaciones al JavaScript pero ¿y para el CSS?

A AMP le encanta el CSS, y de hecho contempla que podamos personalizar nuestras webs a nuestro estilo, simplemente siguiendo algunas normas básicas de formato, pero sí, podremos aplicar estilos a nuestra web.

Ahora bien, los anuncios, las analíticas, aunque fundamentales para los editores y administradores, son parte del problema actual de rendimiento de las webs, por lo que también deberán ser parte de la solución a este problema.

Todos sabemos que usamos a menudo varios proveedores de anuncios y analíticas, y esto llena nuestras webs de códigos JavaScript que ralentizan su carga y comprometen su rendimiento. Pues bien, AMP no permite nada de esto.

Lo que se busca es que se trabajen las analíticas – especialmente – mediante pixels de seguimiento, que se podrán incrustar fácilmente en cualquier página AMP. De  hecho suelen incorporar versiones no script que facilitan esta integración.

No se contempla, de momento, otros sistemas de analítica más avanzados. La idea es ofrecer una biblioteca de analítica de código abierto, sencilla, unificada, auditable y de gran rendimiento, que pueda generar informes para los diversos sistemas y proveedores de analítica, y como Google está en este meollo de AMP hazte a la idea de que estará pronto implantado y será compatible con Google Analytics.

Otro efecto colateral de que no admita JavaScript es que no permitirá incrustar contenido directamente mediante iframes, por ejemplo, ya sean vídeos o incluso anuncios.

Vamos, que se le buscarán alternativas a todo esto pero de momento hay que sacrificar ingresos por rendimiento, y ten claro que de cara al SEO va a ser muy importante ofrecer al menos una versión AMP de tu web, y si quieres monetizar estas versiones deberás buscar alternativas, como banners de imagen o texto, por ejemplo.

También es importante recalcar que cada recurso debe declarar su tamaño en el documento. No es que esos recursos no puedan ser responsive, que pueden, sino que tanto el ratio de aspecto y las dimensiones tiene que estar especificados explícitamente en el HTML.

Esto significa que un documento AMP no cambia hasta que el usuario hace algo,no realiza una acción. Esto reduce enormemente toda la basura que sobra y procesos improductivos, especialmente los visuales.

Para resumir, AMP es un subconjunto de HTML con elementos personalizados que ofrecen un rendimiento superior y una carga instantánea de contenido estático.

En este vídeo tienes un vistazo a la estructura de una página AMP y su código…

¿Para quien es AMP?

AMP es una tecnología para todos, y de hecho supondrá un nuevo impulso a la navegación móvil, pero está especialmente pensado para editores, blogueros, para todo aquel que ofrezca noticias e información.

Si solo tienes una web corporativa, aunque siempre será positivo ofrecer la versión AMP optimizada y adaptada a tu diseño en lo posible, está claro que a priori deberás ofrecer una página principal optimizada, atractiva y que atraiga a tus clientes o compradores.

Si no publicas noticias o tu contenido es estático porque se trata de una web corporativa o utilizas WordPress como plataforma de comercio electrónico, con WooCommerce por ejemplo, es posible que aún AMP no sea para ti, pero estate atento, y sigue su evolución.

Las principales empresas editoriales ya están incorporando AMP. En la web del proyecto AMP tienes una amplia relación de ellas, y también te adelanto que webs como SportYou ya tienen versiones AMP; un ejemplo:

• Versión normal: http://www.sportyou.es/noticias/sergio-ramos-respeto-gerard-pique-591366
• Versión AMP: http://www.sportyou.es/noticias/sergio-ramos-respeto-gerard-pique-591366/amp

También Automattic está metido de lleno en la adaptación a AMP, y de hecho ya lo ha anunciado para sus clientes de VIP WordPress.com.

Y, por supuesto, tu blog favorito, Ayuda WordPress, también ofrece versión AMP, que puedes comprobar en los siguientes enlaces o en cualquier otra publicación simplemente añadiendo al final de la URL ?amp=1 :

• Versión normal: https://ayudawp.com/poner-un-aviso-en-las-publicaciones-antiguas/
• Versión AMP: https://ayudawp.com/poner-un-aviso-en-las-publicaciones-antiguas/?amp=1

Como podrás ver su aspecto, y velocidad de carga es tremendamente diferente.

¿Cuánto más rápida es la versión AMP de una página?

Mucho, pero mucho, mucho, mucho.

Un ejemplo real…

Página sin AMP:

Versión AMP de la misma página:

Como puedes ver, dejando aparte los rankings, la misma página carga de manera absolutamente inmediata, reduciendo su tamaño enormemente y minimizando de manera bestial la cantidad de peticiones que realiza.

AMP y WordPress

Lo sé, estabas esperando esto. ¿Cómo añado AMP a mi WordPress?

Fácil, de hecho ya hay un plugin oficial, AMP, que, aunque en versión inicial (0.1 a la fecha de este artículo) funciona perfectamente. Solo  tienes que instalarlo, activarlo y ya tendrás la versión AMP de tu WordPress.

Para acceder a la versión AMP de cualquier entrada o página solo tienes que añadir al final de la URL /amp/ o ?amp=1, depende de la configuración de tus enlaces permanentes.

No hay nada que configurar, de momento, pero funcionar funciona, y te sorprenderá lo rápido que cargan las versiones AMP de tus páginas y entradas.

De hecho, si revisas el código fuente de las páginas generadas comprobarás cómo funciona AMP, definiendo el tipo de documento como AMP, como gestiona los scripts que carga (desde la CDN del proyecto AMP) o cómo aplica los estilos y tamaños, de lo que hemos hablado antes.

<!doctype html>
<html amp>
<head>
	<title>Poner un aviso en las publicaciones antiguas | Ayuda WordPress</title>
	<meta charset="utf-8">
	<link rel="canonical" href="https://ayudawp.com/poner-un-aviso-en-las-publicaciones-antiguas/" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
	<link href='https://fonts.googleapis.com/css?family=Merriweather|Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
			<script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" async></script>
		<script src="https://cdn.ampproject.org/v0.js" async ></script>
<style>body {opacity: 0}</style>
<noscript>
<style>body {opacity: 1}</style>
</noscript>
<style amp-custom>
	/* Generic WP styling */
	amp-img.alignright { float: right; margin: 0 0 1em 1em; }
	amp-img.alignleft { float: left; margin: 0 1em 1em 0; }
	amp-img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
	.alignright { float: right; }
	.alignleft { float: left; }
	.aligncenter { display: block; margin-left: auto; margin-right: auto; }

¿Se puede personalizar el aspecto de las páginas AMP en WordPress?

La personalización de la plantilla es algo que todos buscamos para que se ajuste a nuestra imagen de marca, y AMP contempla esta posibilidad, también en WordPress.

El plugin AMP contiene en su carpeta un archivo denominado template.php que podemos personalizar para que se ajuste en lo posible al diseño y estilos de nuestra marca.

De hecho, en el código fuente anterior tienes los estilos generados por esta plantilla, que puedes personalizar a tu gusto, recordando siempre hacer una copia antes de actualizar el plugin, como siempre, para no perder tus cambios, acuérdate.

Las plantillas personalizadas, los temas con plantilla AMP y demás opciones vendrán más adelante, no lo dudes.

Supongo que ya te habrás hecho una idea de qué es AMP y lo que supone para el presente y futuro de la Web, y lógicamente también de WordPress.

Todos debemos ofrecer webs más rápidas y optimizadas,  y AMP, con el apoyo unánime de los grandes de Internet, es la herramienta que, en muy poco tiempo, todos vamos a utilizar para conseguirlo.

Si no tenías nada pendiente que hacer en tu web próximamente ya tienes tarea, preparar tu sitio para AMP.

Gracias a Fernando Puente por ponerme al día y ayudarme con sus sabios consejos.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)