Es necesario darle importancia a la experiencia de nuestros usuarios que navegan desde su dispositivo móvil. Cada vez son más aquellos que dejan de lado sus computadoras, para hacer de su dispositivo móvil su principal herramienta.
Para el 2015, se puso sobre el tapete el concepto de las Páginas móviles aceleradas para WordPress (AMP). Un proyecto que junta dos elementos importantes, eficiencia y rapidez, todo en de acelerar la carga en versiones móviles de sitios web.
Este artículo responde tus dudas sobre las páginas móviles aceleradas (AMP, por sus siglas en inglés); información que todo desarrollador web que trabaja con WordPress debe tomar en cuenta.
¿Qué son las AMP o Páginas móviles aceleradas?
Las Páginas Móviles Aceleradas (AMP), es un proyecto que se describe como una iniciativa de código abierto que se basa en la visión de que los editores pueden crear contenido móvil optimizado, y que éste que cargue al instante en todas partes.
Este proyecto, tiene el apoyo de muchos líderes de la industria, como Google, Pinterest e incluso WordPress.com. Google se está tomando muy enserio a AMP, por ejemplo, algunos resultados de la de la búsqueda en dispositivos móviles ya llevan el signo AMP:
Incluso aplicaciones nativas de Android, como NEWS o Weather app, llevan el signo AMP para las páginas con las que interactúan.
Por lo tanto, esto es algo que no puedes ignorar.
¿Lo que deben saber los desarrolladores acerca de AMP?
Sabemos que las páginas web son construidas en HTML, CSS y JavaScript. AMP se centra en cada uno de estos tres. Viene con un conjunto de elementos personalizados y reglas para que puedas escoger el que mejor se adapte a sus necesidades.
Esto es lo que los AMP tiene para WordPress:
- Elementos HTML personalizados para AMP
La mayoría de los elementos HTML están personalizados para AMP. El objetivo aquí es reemplazar y ampliar la funcionalidad de los elementos HTML existentes, de tal forma que no necesites una gran cantidad de JavaScript para realizar las tareas.Pero además, AMP también tiene sus propios elementos HTML especiales, por ejemplo: amplificador-Pinterest, amplificador-twitter, youtube-amplificador, amplificador-analytics, amperio-anim, amperio-caja de luz, amperio-carrusel, y el amplificador-anuncio.
Como ya habrán adivinado por los nombres anteriores, algunos de los elementos están pensados para incrustar contenidos de terceros.
¿Por qué? Debido a que cuando se trabaja con contenidos externos, tales como anuncios o mensajes cortos incrustados, AMP debe tener elementos personalizados de forma que pueda cargar el contenido requerido más rápido.
¿Cuántas veces ha llegado a un anuncio que carga demasiado lento en el móvil, y colgó la página entera? AMP trata de evitar esta situación.
Además, tenga en cuenta que los elementos HTML estándar (img, audio, vídeo e iframe) se sustituyen por amp-img, amplificador de audio, vídeo y amp-amp-iframe.
Seguro, ahora te preguntas, si estos elementos valen la pena o no. Te lo planteamos así: la etiqueta img-amp actualmente ofrece soporte srcset absoluta, incluso para los navegadores antiguos que no son compatibles en absoluto.
Para obtener una lista completa de los componentes personalizados de AMP y su aplicación específica del servicio, echa un vistazo a esta documentación oficial. (official documentation.)
Las reglas personalizadas para AMP
Cuando se trata de CSS y JavaScript; AMP tiene reglas personalizadas para cada uno. Si realmente quieres comprometerte con la codificación de soporte para AMP, asegúrate de seguirlas estrictamente.
Para empezar, si usted es un fan de JavaScript personalizado para crear elementos brillantes, olvidarte de esto. AMP no permite este JavaScript personalizado. Sin embargo, se puede hacer uso de los elementos que hemos mencionado anteriormente: AMP-carrusel y amp-caja de luz.
En otras palabras, el AMP tiene su propia biblioteca de JS, y eso es probablemente la única biblioteca a la que se puede recurrir.
Las fuentes externas, por el contrario, son compatibles, pero sólo desde las fuentes populares, como Google Fuentes.
Sin embargo, las reglas a las que tienes que tomar atención son para CSS.
Tu CSS debe estar siempre en línea. Esto hace que tu trabajo sea un poquito más complicado de lo habitual.
Por supuesto, muchos desarrolladores de WordPress, están acostumbrados a vincular hojas de estilo externas. Si ese es el caso, puede utilizar las funciones de PHP para dar salida al contenido de su hoja de estilo en línea cuando se este trabajando con AMP para WordPress.
Además, y lo más importante, el código CSS debe ser menor de 50 KB. Muchos marcos populares, tienden a correr más de 80-90 KB de tamaño. Así que esta regla en particular se debe tener siempre en cuenta.
Por último, AMP también tiene un CDN especial, llamado Google AMP caché, se puede utilizar para buscar, caché y brindar las páginas AMP válidas.
Si tu sitio web no tiene un CDN, dale una oportunidad. Pero si usted ya está usando un CDN, Google AMP caché no es necesario.
La gran pregunta: ¿Puede AMP hacer que todo sea súper rápido?
No tenemos una respuesta específica.
Si su sitio web no está bien optimizado, o si ha realizado cerca de cero inversiones UX para los visitantes móviles, AMP puede ofrecerte un impulso significativo.
Ojo, que AMP no es la gran salvación. Las técnicas para mejorar los tiempos de carga de páginas han existido desde hace mucho tiempo. AMP es un intento de combinar los intentos anteriores, con ajustes de optimización del rendimiento, para entregar un móvil con una experiencia de navegación más rápida.
AMP para WordPress trabajar cargando los elementos cruciales primero, para que el visitante puede comenzar su búsqueda de la página de forma inmediata. Luego de esto, se carga el resto del soporte.
Como es evidente, AMP se centra más en la optimización y la eficiencia.
La pregunta es ¿Dedo usar AMP para los sitios web de WordPress?
AMP es sin duda rápido, pero no es el único método para que las páginas más rápidas. Pero, la velocidad no es el único elemento para tomar en cuenta.
AMP, está creciendo a pasos acelerados, por lo que es posible que sea mejor usarlo, y no ignorarlo.
Si todavía estás en duda, sigue la regla de oro: Google está recomendando AMP principalmente para sitios de noticias y blogs. Para todo lo demás, no es necesario AMP.
Finalmente, comentarles que para los usuarios de WordPress, hay un plug-in increíble que lo hace todo por ti: Solo lo tienes que instalar, y estás AMP-listo de inmediato.
Ahora que sabes todo esto ¿Qué opinas de las AMP? ¿Estás listo para darle una oportunidad? Por favor, comparta sus opiniones en los comentarios a continuación.