Clicky

Joomla y Accelerated Mobile Pages (AMP) de Google

Joomla y Accelerated Mobile Pages (AMP) de Google

El plugin wbAMP soporta la tecnología de aceleración de páginas móviles en Joomla

Hace un tiempo Google comenzó el proyecto AMP (Accelerated Mobile Pages - Páginas Móviles Aceleradas), precisamente con el objetivo de acelerar la carga de páginas móviles. El proyecto ha evolucionado bastante en el tiempo y Google anunció efectivamente que las páginas AMP aparecerán en sus resultados de búsqueda a partir del 24 de febrero. Hasta ahora, no había manera fácil de cumplir con las reglas de AMP en Joomla, pero ahora existe. Weeblr (bien conocido por producir extensiones de calidad como SH404SEF y Josetta) publicó el plugin wbAMP, con soporte para AMP!

Google AMP backgrounds

Es un problema conocido que en los dispositivos móviles los sitios web se cargan más lento debido a problemas con la conectividad, ya sea mala (WiFi, 3G, 4G) o las limitaciones del propio dispositivo. Además, la mayoría de las veces muchos recursos y contenido/artículos que se cargan ni siquiera realmente se leen, como una barra lateral que se derrumba todo el camino hasta el fondo cuando se lee en el móvil. Para resolver este problema, el proyecto AMP tiene como objetivo ofrecer páginas optimizadas específicamente para el uso móvil despojando parte de contenido y de recursos, para que se carguen mucho más rápido.

Aparte de la respuesta rápida, la apariencia de las páginas AMP es bastante básica, que también ha dado lugar a discusiones de si este paso de Google no es en realidad un paso atrás en el diseño web, debido a que el UX de estas páginas no es al que estamos acostumbrados. Pero bueno, si Google dicta, sólo hay que seguirle con el fin de no quedarse atrás...

La versión optimizada debe ser creada como una versión básica de la página completa con sólo el mínimo de contenido y técnicamente optimizado. Estos son los requisitos que se indican en la página web de AMP:

•  Permitir sólo los scripts asíncronos
•  Tamaño de todos los recursos estáticamente
•  No dejar que se reprsente el bloque mecanismos de extensión
•  Guardar todos los JavaScript de terceros fuera de la ruta crítica
•  Todo CSS debe ser en línea y tamaño-bound
•  El disparo de fuentes debe ser eficiente
•  Reducir al mínimo los nuevos cálculos de estilo
•  Sólo ejecutar animaciones acelerados por GPU
•  Dar prioridad a la carga de recursos

Además, el propio Google ayudará a la optimización con el almacenamiento en caché y carga de los recursos en su propio CDN.

En realidad, cada página AMP optimizada tendrá una versión completa para el uso no móvil y una versión de AMP para el uso móvil. Dos páginas con contenido similar podrían dar lugar a problemas de contenido duplicado y, por esta razón, la versión AMP necesita un señalador canónico a la versión completa. Para informar a Google que existe la-versión AMP, la versión completa necesita una etiqueta para apuntar a la versión AMP con una etiqueta rel="amphtml". Así pues, en efecto:

Digamos que tenemos una versión de escritorio llamada http://ejemplo.com/version-completa y una versión de AMP llamada http://ejemplo.com/version-completa/amp . La versión completa tiene que apuntar a la versión AMP como se muestra a continuación:

<link href="http://example.com/version-completa/amp" rel="amphtml" />

Como alternativa, la versión AMP necesita una URL canónica que la señale de nuevo:

<link rel="canonical" href="/http://example.com/version-completa" />

No todas las páginas son adecuadas para la optimización com AMP. Las páginas dinámicas como formularios, carritos de compras, etcétera, pueden no funcionar bien. Las páginas estáticas son las más beneficiadas de la optimización.

Por cierto, puede hacerse que las páginas de AMP sean permanentes, pero luego también los usuarios de escritorio verán la versión simplificada, por lo que no es tan práctico. Algunas de los más importantes médios de comunicación ya han adoptado la tecnología. Aquí se puede ver una página en acción del periódico The Guardian (pero si pruebas a navegar un poco verás que los enlaces te dirigen a la página web de escritorio).

AMP soportado en Joomla

Recientemente fue lanzado el plugin wbAMP de Weeblr. Esto crea soporte AMP en Joomla. Puedes verlo en acción en el sitio web de Weeblr. La entrada del blog dedicada al lanzamiento del plugin tiene una versión completa y una versión AMP:

https://weeblr.com/blog/accelerated-mobile-page-for-joomla -> Versión completa
https://weeblr.com/blog/accelerated-mobile-page-for-joomla/amp -> Versión AMP

Como se puede ver claramente, la versión AMP tiene un aspecto mínimo sin apenas módulos y ni siquiera un menú, porque javascript y formularios están simplemente prohibidos! Aunque el contenido real es el mismo. Esto es más o menos cómo funciona el plugin, aunque se pueden añadir algunas cosas en torno al contenido, como un menú, un módulo adicional y un bloque para la publicidad (Adsense y algunas redes más). Si ejecuta la URL a través de una prueba de velocidad muestra claramente que la versión optimizada es mucho más rápida, con menos recursos y menos kB:

La versión completa en GT-Metrix:

GT-Metrix antes de AMP

La versión APM en GT-Metrix:

GT-Metrix depués de AMP

Instalación y configuración del plugin wbAMP para Joomla

plugin wbAMP joomla instalado

El plugin está disponible en una versión de la comunidad y una versión completa. La versión completa permite algunas opciones más y tiene soporte para K2. Después de la instalación tendremos 2 o 3 plugins. Los plugins de soporte a K2 (solo en la completa), wbAMP y com_content wbAMP support que no tiene opciones, simplemente debe ser publicado. El plugin llamado simplemente wbAMP es el que controla todo. De forma predeterminada, los complementos se habilitan después de la instalación, pero no ha pasado nada todavía. Se tiene que especificar concretamente qué contenido debe ser optimizado.

plugins wbAMP

Para seleccionar las páginas que deseas que sean optimizada, ve a la pestaña "Páginas seleccionadas". Utilizando el texto de ayuda con vuelo estacionario sobre las opciones serás fácilmente capaz de indicar las páginas que deseas seleccionar.

plugin wbAMP vista general

Para seleccionar sólo los puntos de vista del artículo de los contenidos estáticos de Joomla (com_content), aplica las siguientes opciones:

plugin wbAMP seleccionar categorías

Además, puedes configurar algunos ajustes más desde las otras pestañas:

•  Metadatos: fija un módulo de cabecera y también permite configurar la información del publicador
•  Análisis: Establecer la propiedad web de Google Analytics
•  Elementos personalizados : Definición de un menú, un módulo de pie de página, botones de redes sociales (estáticos!)
•  Redes de anuncios: Muestra los bloques publicitario (sólo en la versión completa)
•  Avanzado : Escribir las credenciales para la actualización automática del plugin a través del mecanismo de actualización de Joomla.

Aplicando todo esto resultará en una versión simplificada de las páginas seleccionadas, como en este ejemplo, configuradas con una imagen de cabecera, nombre del sitio y un menú, seguido por el propio artículo, que incluye una imagen. Todos los otros módulos se han eliminado:

wbAMP template básico

Como se ve es bastante básico, pero se carga muy rápido, y este es todo el objetivo de la operación. Y también, si lo deseas, puedes personalizar esta apariencia mediante reescrituras (overrides). Todos los diseños se hacen a través JLayout, por lo que el aspecto visual simple puede ser totalmente personalizado y ser mucho más sofisticado.

NOTA: Lo he instalado en un servidor con PH 7.0.3, Apache/2.4.6 y MariaDB 5.5.44 y da un error como el que sigue:

An error has occurred. 0 Class 'ShlHtml_Manager' not found

error acceso al plugin wbAMP con PHP 7

No dejando editar el plugin

Me pondré en contacto con los creadores del plugin para avisarles de este posible bugg y ver si pueden ofrecer una solución.
Con el sistema antiguo PHP 5.4.45, Apache 2.2.15, MariaDB 5.5.5-10.0.11 si que funciona y son las capturas de pantalla de más arriba.

Jesus_Caceres