AMP es el acrónimo de Accelerated Mobile Pages (Páginas Móviles Aceleradas), una solución planteada por Google para mejorar la velocidad de carga de las páginas web en dispositivos móviles.
Como ya sabes, desde hace varios años la navegación mediante dispositivos móviles supera a la de los equipos de escritorio, sin embargo todavía presenta varios problemas para los usuarios, pues muchas veces cargan muy lento, o muestran los contenidos de forma desordenada, lo cual evidentemente afecta la experiencia de los usuarios.
Consciente de esto, en 2015 Google lanzó AMP, una biblioteca de código abierto con el fin de optimizar el rendimiento de las páginas web en dispositivos móviles, sobre todo en lo que respecta a la velocidad de carga, con lo cual se mejora la experiencia de los usuarios, aumenta el número de visitas y la permanencia en las páginas, los contenidos se visualizan con mayor facilidad.
Pero también, AMP reduce en un 50% el uso de ancho de banda para las imágenes, sin afectar la calidad de las mismas y aumentando el rendimiento del lado del servidor. Asimismo, mejora el posicionamiento orgánico o SEO, debido a que la velocidad de carga es uno de los factores que toma en cuenta el algoritmo de Google para determinar las posiciones.
Las páginas web optimizadas con AMP se identifican muy facilmente porque al buscar en Google mediante un dispositivo móvil, en los resultados aparece el símbolo de un relámpago. Pero además, en la URL de estas páginas aparecen las siglas AMP.
Cómo funciona
Google AMP crea un duplicado de la versión para dispositivos móviles de nuestro sitio web utilizando AMP HTML, unas especificaciones del propio lenguaje HTML, pero limitadas para hacer posible la carga de contenido.
AMP elimina elementos como scripts de terceros, gráficos de alta definición, animaciones elaboradas y otros elementos que utilizan CSS y JavaScript, que hacen que un sitio web se cargue lento.
Debes tener en cuenta que AMP no elimina la versión responsive de tu sitio, sino que la complementa.
Configurar AMP en WordPress
AMP es totalmente compatible con WordPress, por tanto en el directorio de plugin podemos encontrar varios plugins que podrían utilizarse para optimizar el contenido de la versión para móviles de nuestro sitio web de WordPress. Uno de los más populares se denomina como AMP for WordPress, el cual ofrece varias opciones de configuración. Tiene una versión de pago y otra gratuita, que es la vamos a conocer en este artículo.
El primer paso es instalarlo, así que en el panel de administración de nuestro sitio web ingresamos al directorio de plugins de WordPress y en la caja de búsqueda escribimos AMP for WordPress. Lo instalamos y actívamos.
A continuación, somos redirigidos al gestor de configuraciones de este plugin, y aquí debemos selecconar si queremos trabajar con las configuraciones básicas o avanzadas. En este ejemplo vamos a seleccionar las configuraciones básicas.
Fíjate que en la barra lateral ahora tenemos un menú denominado como AMP, así que vamos a pulsar sobre el enlace “Ajustes” para definir las configuraciones que deseamos.
También podemos ver un cuadro de diálogo en el cual podemos suscribirnos al newsletter o boletín que contiene actualizaciones sobre este plugin. Si deseamos recibir actualizaciones, entonces presionamos sobre el botón “Suscribe”, en caso contrario, pulsamos sobre el enlace “No, gracias”.
Al cargarse la página de ajustes, lo primero que debemos hacer es agregar un logo para la versión AMP. Si no lo hacemos, en la versión de nuestro sitio web para dispositivos móviles se mostrará el nombre que hayamos definido en los “Ajustes generales” de la barra lateral del panel de administración.
En el bloque “Soporte AMP” vamos a desactivar las opciones “Páginas” y “Página de inicio”, debido a que estamos configurando la versión gratuíta de AMP for WordPress y esta deshabilita cualquier funcionalidad o plugin que insertemos dentro de una página estática. Por ejemplo, si en una página estática tenemos un formulario de contacto, en la versión para móviles este no será funcional o simplemente no será visible para los usuarios. El resto de los campos los podemos dejar tal y como están.
Presionamos sobre el botón “Guardar los cambios” para que se apliquen las configuraciones.
Nota: Si deseamos agregar más opciones de configuración, en la columna del lado izquierdo de esta página seleccionamos la opción “Advance Setup”, y luego presionamos sobre la opción “Ajustes”. Aquí podremos ver las configuraciones avanzadas de esta página.
Lo siguiente será definir la apariencia visual, para esto en la barra lateral pulsamos sobre “Diseño”, y en esta nueva página podemos elegir un tema de AMP al pulsar sobre el desplegable del campo Selector de temas.
Una vez hemos definido la apariencia visual, presionamos sobre el botón “Guardar los cambios”.
También podemos acceder a las configuraciones avanzadas de esta página seleccionando la opción “Advance Setup” de la columna del lado izquierdo, y luego presionamos sobre “Diseño”.
La versión gratuita de AMP for WP una gran variedad de características, sin embargo podemos añadir opciones más avanzadas de configuración por medio de las extensiones premium. Para acceder a las mismas, en el menú AMP de la barra lateral pulsaos sobre “Extensiones”.
Por último, para comprobar como se visualiza la parte frontal de nuestro sitio web en la versión para dispositivos móviles con AMP, en la barra superior del panel de administración debemos pasar el puntero del ratón encima del enlace del nombre de nuestra web, y en el desplegable pulsamos sobre “Visit AMP”. Se abrirá una nueva ventana en el navegador y aquí podremos ver la versión optimizada de nuestro sitio con AMP.
Como hemos visto, Google AMP puede ayudar a que las páginas de nuestro sitio web se carguen más rápido en dispositivos móviles, y en WordPress podemos utilizar plugins como AMP para WordPress, cuya configuración es bastante simple.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
