Bienvenido a nuestro Blog

Tu opinión cuenta, déjanos un comentario después de leer nuestras entradas
AMP para WordPress, acelerando la carga de noticias

AMP para WordPress, acelerando la carga de noticias

AMP para WordPress

¿Qué es AMP para WordPress y que ventajas trae?

Vamos a hacer un breve resumen de lo que es AMP, ya que existen múltiples sitios hablando de ello. Al final de esta entrada os dejaré algunos enlaces en referencia a AMP.

¿Qué es AMP (Accelerated Mobile Pages)?

Google anuncia el nacimiento de AMP el 7 de Octubre del 2015.

AMP (Accelerated Mobile Pages) llega para mejorar la velocidad de carga de noticias, artículos, entradas desde cualquier dispositivo, sobretodo para los móviles y tablets y, la verdad es que lo consigue, eliminando todo aquello que molesta y retarda la carga individual de dichas noticias, como pueden ser los javascript externos, los estilos externos o embebidos, formularios, etc… Vamos que se acaba la publicidad y analítica tediosa que afecta tanto a la carga de las páginas, como los molestos pop-up de formularios emergentes para que te suscribas sin apenas haber empezado a leer la entrada, de este último tendré que hablar, que ya es tedioso, que te pidan o te den algo sin saber si es de interés para el lector recién llegado a dicho sitio.

Bueno esto es un decir, ya que se esta trabajando para que la publicidad y la analítica como aquellos datos que retrasan la carga sean más eficientes y mucho menos molestos, eh, que esta Google de por medio señores, que no iba ha tener en cuenta la analítica y la publicidad, jeje, además de Twitter, Linkedin, WordPress, Pinterest, como desarrolladores entre otros y, los medios de comunicación como El País, The Guardian, Financial Times, New York Times, Mashable, etc… Algunos de los más interesados dado el tiempo de carga de las páginas.

Aquí puedes ver la diferencia de la velocidad de carga de una entrada sin AMP

carga de página sin amp

Y la velocidad de carga de la misma entrada con AMP

carga de página con amp

La diferencia es abismal. Como puedes observar las peticiones se reducen de 85 a 10. El tiempo de carga se reduce de 5.81s a 2.56s, el peso se reduce de 1.6MB a 163.1kB y el grado de rendimiento mejora de 74/100 a 87/100.
¿a qué tú cómo blogger también estás interesado en ello?

Aquí tienes 2 versiones de una de mis entradas:

Versión básica sin AMP

WordPress 4.4 ya esta aquí

Versión AMP

WordPress 4.4 ya esta aquí

Aquí en el blog de empresa, os he añadido 2 tipos de enlace por cada resumen de entrada, donde puedes elegir entre una carga normal como estamos habituados, o bien, elegir la versión AMP, ya me dirás que prefieres.

El plugin Plugin AMP para WP incluye un link para enlaces permanentes (permalinks), que según los tengas configurados en tu WordPress, será de esta forma /amp/, o bien, /?amp=1/, en mi sitio en cada entrada me añade un link con terminación /amp/, aunque este no funciona y sí /?amp=1/, pero se debe añadir a mano en cada URL de cada noticia por cada usuario, algo muy tedioso, no te parece y, es por ello que decidí duplicar y añadir los enlaces con la terminación correspondiente, de esa forma puedes elegir cual te conviene ver.

Recuerda, según tengas configurado tus enlaces permanentes y terminen con un slash (barra vertical) o no, deberás añadir /amp/ o amp/, o bien, /?amp=1/ o ?amp=1/

Truco

En este caso, es bien sencillo hacerlo, vamos a nuestro content.php de nuestro tema activo, duplicamos el enlace y añadimos el añadido que corresponda y voilà.

AMP ama los estilos y por ello, se seguirán utilizando las etiquetas style, me recuerda el pasado lejano, los inicios de Internet, por supuesto sin usar los estilos embebidos como era añadir un estilo dentro de una etiqueta HTML.

¿Ventajas de ofrecer una versión AMP?

Bueno después de haber visto lo anterior y si has pinchado en ambos enlaces, no hace falta que te diga más.

  • -Velocidad de carga inmediata, si vas ver código fuente, al final verás el tiempo de velocidad carga, te sorprenderá
  • -Podrás leer la entrada sin distracciones, de momento
  • -Puedes compartir en redes sociales, por defecto no lo trae
  • -Puedes utilizar todo el CSS que desees dentro de la etiqueta style
  • -Uso de datos estructurados, por defecto los que trae son muy básicos, pero se pueden adaptar a tu gusto
  • -Uso SVG path para imágenes, logotipo, redes sociales… lo que aligera la velocidad de carga

¿Fallos de AMP?

El plugin AMP para WordPress esta en fase beta, desarrollado por Automattic, debería incluir directamente un enlace en content.php, como decía es muy tedioso y molesto que nuestros lectores tengan que añadir en cada noticia, artículo, al final de la URL /amp/ o /?amp=1/, sin saber además cual de las 2 es la correcta, , pero todo se andará, para una web sin CMS va mejor encaminada, pero aún así, van lentas las mejoras.

Bueno lo dicho, de momento en la versión AMP:

  • -El usuario no puede comentar
  • -No se tiene en cuenta el número de veces que se ha compartida una entrada a través de redes sociales
  • -Los usuarios no pueden suscribirse

¿AMP para WordPress, Investigación y mejoras?

Investigando empece a realizar mejoras en la vista AMP de mis entradas:

  • sustituí el logotipo que por defecto trae, que es el de WordPress, por el del sitio. Consejo, utiliza SVG path, para todas las imágenes.
  • -Añadí enlaces de redes sociales para compartir las entradas.
  • -Como es lógico, añadí la URL AMP a los botones de compartir.
  • -Añadí la imagen destacada correspondiente, que no la incluía.
  • -Modifique el diseño de los related post, ya que me mostraba las imágenes tamaño Grande
  • -Inserte en el código los datos estructurados relacionados con AMP con respecto a cada nivel blogPosting, mejore los niveles Person, y Organization, introduciendo los enlaces correspondientes a redes sociales de autor y organización, URL de la página de autor y de empresa, el logo, la imagen destacada correspondiente y la miniatura de cada entrada, la fecha de modificación de la entrada, etc…
  • -Al final de la entrada he añadido un botón para volver al blog de la empresa. Para no perder el hilo, por si has llegado desde el enlace de una red social, o de una búsqueda.

En el archivo template.php se modifica lo relacionado con las entradas y, en el archivo class-amp-post.php se modifican los datos estructurados correspondientes al artículo en cuestión, lo que viene a ser los fragmentos enriquecidos pero en este caso para AMP.

En mi blog personal, Cosas de Sam que en verdad tengo muy abandonado por temas laborales entre otros, os iré indicando como realizar los cambios en relación a este plugin para WordPress, así como datos para analítica, publicidad

Aquí puedes ver una imagen de verificación de datos estructurados para AMP por Google

rich snippets AMP WordPress

Como decía en mi entrada relacionada con All in one schema.org el plugin para los rich snippets ( fragmentos enriquecidos), me lleve un buen susto al querer verificar en el analizador de Google para los datos estructurados y ver que aparecían errores por doquier, una vez calmado, tomando aire, identifique que ya estaba teniendo en cuenta los resultados AMP para los resultados estructurados, por lo que cuando quieras analizar dichos datos y ver que todo va bien ten en cuenta lo siguiente:

Una vez en el analizador de datos estructurados de Google, y consultada la página que quieras analizar,

¡¡¡OJO recuerda que en este caso hay 2 URL’s, normal y AMP, con y sin /?amp=1/ o /amp/!!!

Por tanto, al añadir la URL, llamémosle normal, debes seleccionar en el lado derecho, en Resultados, filtrar por caso de uso, que analizar, si datos AMP o fragmentos enriquecidos, en este caso esta claro, fragmentos enriquecidos.

Si usas la URL con AMP, no es necesario seleccionar que tipo de dato analizar, ya que, por defecto, es el que elige.

Datos Estructurados AMP

Recuerda que, a día de hoy, AMP se ha desarrollado para noticias, artículos, entradas, briefing de reportajes de actualidad solamente, por lo que de momento no es válido para tiendas, productos, software, páginas corporativas, etc… Todo llegará, tengo claro que será tendencia SEO para 2016.

Te ha interesado este artículo AMP para WordPress, déjanos tu opinión, comentarios.

Lamentablemente, si estas usando la versión AMP no podrás dejar ningún comentario de momento, pero si eres tan amable puedes compartir esta entrada en las redes sociales, al principio de esta entrada están los botones para ello.

Enlaces de interés:

Proyecto AMP Inglés: Accelerated Mobile Pages
Blog Google Español: Accelerated Mobile Pages
Proyecto Open Source GitHub: Open Source AMP
Proyecto Open Source GitHub WordPress: Open Source AMP WP
Blog de Carlos Azaustre: Carlos Azaustre
Ayuda WordPress: Ayuda WordPress
Google Testing Tool: Comprobar AMP

Fragmento Enriquecido:
AMP para WordPress, acelerando la carga de noticias
Titular:
AMP para WordPress, acelerando la carga de noticias
Descripción:
AMP para WordPress, AMP (Accelerated Mobile Pages) llega para mejorar la velocidad de carga de noticias, artículos, entradas desde cualquier dispositivo, sobretodo para los móviles y tablets
Autor:
Empresa:
Aplicaciones y marketing: estrategia e innovación | mndesign.es
Logo:
Author:

Mi nombre es Samuel Ezerzer, apasionado de las nuevas tecnologías y vivo en Madrid. Siempre aprendo algo nuevo de todos vosotros, por ello, sería bueno que me dejarás tus comentarios aquí.

Cristian Rodriguez Gutierrez on abril 2, 2016 AT 02 pm

Hola Samuel, muy buen post y gracias por compartir, pero lo que veo es que tu dices todo lo que haces en base a modificaciones y demás pero no como lo haces que para me parecer es lo más importante para personas como yo que no tenemos nada de conocimiento pero que a su vez nos encantan las nuevas tecnologías y ser Blogger sobre todo.
Yo tengo un problema que me informo Google por correo electrónico de que había Error de sintaxis desconocido, el cual no se como solucionarlo.
Decir que estoy utilizando el plug-ins de AMP para WordPress.
Que solución me puedes brindar.
Gracias ante todo.

Pin It on Pinterest

Shares