09 de enero de 2017 Marc Coiduras

Cómo configurar nuestro WordPress con AMP

Buenas amigos, en este artículo vamos a aprender algo sobre las páginas AMP y cómo configurar nuestro WordPress con AMP.

Como bien sabemos todos, los dispositivos móviles se utilizan cada vez más para navegar por sitios web.

AMP compila las páginas web para representar de forma rápida contenido estático.

¿WordPress con AMP?

AMP en acción consta de tres partes diferentes:

  • Primero: AMP HTML HTML con restricciones logrando un alto rendimiento.
  • Segundo: AMP JS Con esta biblioteca, nos garantizamos representar rápidamente nuestras páginas AMP HTML.
  • Tercero: Google AMP Cache (opcional) Nos proporciona las páginas AMP HTML con cache.

AMP HTML

Básicamente es contenido HTML con propiedades AMP personalizadas.

Ejemplo de AMP HTML sencillo:

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hola-mundo.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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:[email protected] -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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hola Mundo!</body>
</html>

Como podrás observar, la mayoría de etiquetas AMP HTML son como las etiquetas HTML comunes.

Otras se reemplazan por etiquetas específicas de AMP personalizadas.

Estos elementos personalizados, llamados componentes AMP HTML, crean patrones para implementarse en forma sencilla.

Por ejemplo, la etiqueta amp-img proporciona soporte completo de srcset, incluso en navegadores que todavía no lo admiten.

AMP JS

La biblioteca AMP JS implementa las prácticas de rendimiento AMP, carga de recursos administrada.

Y para garantizar la carga rápida de tu página, te proporciona las etiquetas personalizadas que se mencionan en AMP HTML.

Una de las más importantes optimizaciones, es que transforma en asincrónico todo lo que proviene de recursos externos.

De modo que ningún elemento de la página pueda bloquear la representación.

Google AMP Caché

Google AMP Caché es una red de distribución de contenido basada en proxy para la entrega de todos los documentos de AMP válidos.

Lo que hace es capturar todas las páginas AMP HTML y almacenarlas en caché para mejorar su rendimiento automáticamente.

Usando Google AMP Caché, los archivos JS e imágenes se cargan desde el mismo origen que usa HTTP 2.0.

Así se logra la máxima eficiencia, cada página AMP viene con otra versión del validador integrada.

Plugin WordPress AMP Supremacy

Para que nuestro WordPress funcione con AMP, tan solo tendremos que descargarnos el plugin AMP Supremacy.

AMP Supremacy es un plugin de instalación de un solo clic, y tendrás tu wordpress con AMP.

AMP Supremacy

¿Qué significa AMP y por qué debo usarlo?

  • AMP es páginas móviles aceleradas.
  • AMP convertirá tus publicaciones y páginas actuales en un estilo de texto e imagen sólo en el que los tiempos de carga de páginas disminuyan drásticamente.
  • Google muestra páginas relacionadas con AMP en un carrusel de AMP en la parte superior de sus páginas, aumentando el tráfico de sitios.

¿Cómo podré ver la versión AMP de mi página?

  • Después de instalar y configurar el plugin, pulse Guardar.
  • A continuación, sólo tiene que añadir /amp/ al final de cualquier URL de página en su sitio.
  • Y verá una bonita versión de AMPd de su página.

Tengo cloudflare trabajando detrás de mis páginas, ¿está bien con AMP?

  • No, AMP no soporta cloudflare.
  • Así que necesitarás detener Rocket Loader en tu nube para inyectar scripts en páginas AMP.
  • De modo que cloudflare está restringido para páginas AMP sólo con URL que termina en /amp/.

Espero que este artículo te haya servido de ayuda para configurar tu WordPress con AMP, eres libre de comentar.

Tagged: , , , , descripción de la firma
Si te ha gustado el artículo puedes compartirlo usando los siguientes botones:
Zona Web
Google+
Reddit
Si te ha gustado el artículo puedes compartirlo usando los siguientes botones:
Zona movil

About the Author

Marc Coiduras Hola, mi nombre es Marc Coiduras y soy diseñador web, localizado en Valencia, España.

Deja un comentario

CONTACTA CONMIGO PARA CUALQUIER COSA

Te doy la bienvenida a ponerte en contacto conmigo para obtener más información
sobre cualquiera de mis productos o servicios.