AMP para WordPress: Lo que necesitas saber.

Desde la segunda mitad de 2015, el concepto de Accelerated Mobile Pages para WordPress, así como otras tecnologías de sitios web, ha sido de actualidad . Los desarrolladores web, la gente de WordPress, los expertos en SEO y todos los que están relacionados con la creación y gestión de contenidos o que buscan construir un sitio web han estado hablando del Proyecto AMP.

Pero, ¿qué es exactamente el Proyecto AMP? Sabemos que «Accelerated Mobile Pages» se refiere a algo que puede, acelerar tus páginas en el móvil. Idealmente, un sitio web que utiliza AMP debería cargar más rápido y proporcionar una mejor UX en general en comparación con uno que no utiliza AMP, todas las demás cosas son constantes.

Sin embargo, ¿es eso? ¿Deberías activar AMP nada más de crear tu sitio web en WordPress y olvidarte de todo? Este artículo responde a todas las preguntas relacionadas con Accelerated Mobile Pages que un desarrollador web que trabaja con WordPress debería conocer.
AMP para WordPress: Lo que los desarrolladores deben saber
¿Qué es AMP?
Accelerated Mobile Pages es un proyecto de código abierto que se describe a sí mismo como:

Para muchos, la lectura en la web móvil es una experiencia lenta, torpe y frustrante, pero no tiene por qué ser así. El proyecto Accelerated Mobile Pages (AMP) es una iniciativa de código abierto que encarna la visión de que los editores pueden crear contenidos optimizados para móviles una vez y hacer que se carguen al instante en todas partes.

AMP cuenta con el respaldo de muchos líderes del sector: Google, Pinterest e incluso WordPress.com

No te equivoques, Google se está tomando en serio AMP. Los resultados de búsqueda en los dispositivos móviles ya llevan el signo AMP:

Además, incluso las aplicaciones nativas de Android, como la aplicación de noticias y el tiempo, llevan el signo AMP para las páginas que lo soportan:

Por lo tanto, no es algo que se pueda ignorar directamente.

¿Qué deben saber los desarrolladores sobre AMP?.


Sabemos que las páginas web suelen estar constituidas por HTML, CSS y JavaScript. AMP se centra en cada uno de estos tres. Viene con un conjunto de elementos y reglas personalizadas a las que hay que atenerse.
Esto es lo que hay en Accelerated Mobile Pages para WordPress:

Elementos HTML personalizados para AMP

La mayoría de los elementos HTML centrados en los medios de comunicación son personalizados por AMP. El objetivo es reemplazar y ampliar la funcionalidad de los elementos HTML existentes, de manera que no se necesite mucho JavaScript para realizar las tareas.

Sin embargo, eso no es todo. AMP también tiene sus propios elementos HTML especiales, como: amp-pinterest, amp-twitter, amp-youtube, amp-analytics, amp-anim, amp-lightbox, amp-carousel y amp-ad.

Como habrás adivinado por los nombres anteriores, algunos de los elementos están pensados para incrustar contenidos de terceros. ¿Por qué? Porque cuando se trabaja con contenido externo, como anuncios o tweets incrustados, AMP necesita tener elementos personalizados para poder cargar el contenido requerido más rápidamente. ¿Cuántas veces te has encontrado con anuncios que se cargaban muy lentamente en el móvil y colgaban toda la página? AMP trata de remediarlo.

Además, ten en cuenta que los elementos HTML estándar (img, audio, vídeo e iframe) se sustituyen por amp-img, amp-audio, amp-video y amp-iframe.

Entonces, ¿te estás preguntando si vale la pena utilizar estos elementos especializados? Pues ten en cuenta lo siguiente: la etiqueta amp-img ofrece actualmente soporte de srcset absoluto, incluso para los navegadores más antiguos que no lo soportan en absoluto.

Para obtener una lista completa de los componentes personalizados de AMP y su implementación específica para el servicio, consulta la documentación oficial.

Reglas personalizadas para AMP

Cuando se trata de CSS y JavaScript, AMP tiene reglas personalizadas. Si realmente quieres codificar con soporte para AMP, asegúrate de seguirlas estrictamente.

Para empezar, si eres un fanático del JavaScript personalizado para crear elementos brillantes, olvídate de todo eso. AMP no permite el JavaScript personalizado. Sin embargo, puedes hacer uso de los elementos personalizados mencionados anteriormente para conseguir el mismo efecto: amp-carousel y amp-lightbox. En otras palabras, AMP tiene su propia biblioteca de JS, y esa es probablemente la única biblioteca a la que puedes recurrir.

Las fuentes externas, por otro lado, son compatibles, pero sólo con las fuentes populares como Google Fonts.

Sin embargo, las mayores reglas personalizadas son para el CSS. Tu CSS debe estar casi siempre en línea. Esto hace que trabajar con hojas de estilo externas sea un poco más complicado de lo habitual. Por supuesto, muchos desarrolladores de WordPress están acostumbrados a enlazar hojas de estilo externas. Si ese es el caso, puede utilizar funciones de PHP para mostrar el contenido de su hoja de estilos en línea cuando se trate de Accelerated Mobile Pages para WordPress.

Además, y lo más importante, el código CSS debe ser inferior a 50 KB. Muchos frameworks populares, cuando se minifican, tienden a superar los 80-90 KB de tamaño. Por lo tanto, esta regla en particular es algo que debe tener en cuenta.

Para ver ejemplos de implementación, asegúrate de consultar la documentación de AMP.

Por último, AMP también cuenta con una CDN especial, Google AMP Cache, que puede utilizarse para obtener, almacenar en caché y entregar todas las páginas AMP válidas. Si tu sitio web aún no tiene una CDN, puede serte útil. Sin embargo, si ya utilizas una CDN, Google AMP Cache no es necesario.

¿Puede AMP hacer que todo sea súper rápido?

La respuesta a la pregunta anterior es ligeramente abierta. Si su sitio web está mal optimizado, o si ha realizado casi ninguna inversión en UX para los visitantes móviles, AMP puede ofrecerle un aumento significativo en la velocidad.

Sin embargo, debe saber que AMP no es un bálsamo mágico. Al fin y al cabo, las técnicas para mejorar los tiempos de carga de las páginas existen desde hace mucho tiempo: prefetching, prerendering, lazy loading, etc. AMP es un intento de combinar todo eso, junto con ajustes de optimización del rendimiento, y ofrecer una experiencia de navegación móvil más fluida.

Las Páginas Móviles Aceleradas para WordPress funcionan cargando primero los elementos cruciales, de manera que el visitante pueda empezar a navegar por la página de inmediato. A continuación, carga el resto de los elementos multimedia.

Naturalmente, el enfoque anterior, así como las reglas de codificación en vigor, muestran que AMP se centra más en la optimización y la eficiencia. No es la solución «¡mejora la velocidad de tu página un millón de veces!» que muchos pretenden que sea.

Ahora bien, ¿debería utilizar realmente Accelerated Mobile Pages para los sitios web de WordPress?

AMP es seguramente rápido, pero no es el único método para hacer sus páginas más rápidas. Sin embargo, la velocidad no es la única consideración aquí. También hay un aspecto práctico. Con el ritmo de crecimiento de AMP, es mejor que lo utilices que que lo ignores. Con «AMP» apareciendo en los resultados de búsqueda, y todo el mundo hablando de su importancia, dejar de lado AMP puede no ser la opción más sabia.

Además, si todavía estás confundido, sigue la regla de oro: Google recomienda AMP principalmente para los sitios de noticias y las publicaciones de los blogs. Para todo lo demás, como tu página de aterrizaje, o sitio de portafolio, puedes descartar AMP.

Por suerte para los usuarios de WordPress, existe el mejor plugin amp para wordpress gratuito que se encarga de todo por ti:

Puedes instalarlo en tu sitio y estarás listo para AMP de inmediato.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad