Uso de Google AMP para hacer que las páginas móviles de su sitio de WordPress se carguen más rápido

Por qué importa la velocidad de la página

Si, como miles de millones de nosotros, ha consumido recientemente contenido web en un dispositivo móvil, notó que la experiencia podría mejorarse. La lectura de artículos de noticias suele ser muy lenta , y las páginas tardan mucho en cargarse. Incluso después de que se cargue el texto en la página, las páginas continúan cargándose durante muchos segundos, a medida que se descargan los anuncios, el javascript de seguimiento y las imágenes.
Las aplicaciones móviles nos han acostumbrado a la carga rápida de contenido , la visualización sin conexión y las interfaces rápidas. Pero los sitios móviles a menudo se quedan atrás, literalmente. Esto es particularmente cierto para los sitios de noticias y blogs, que utilizan muchos widgets para anuncios, análisis, compartir y comentar. Puede probar esto fácilmente instalando un bloqueador de contenido en un dispositivo iOS y notando el aumento de velocidad.
Claro, puede usar un tema receptivo para aliviar algunos de los problemas, pero el diseño receptivo no se ocupa del rendimiento de carga de la página. La mayoría de las veces, la respuesta es la raíz del problema : diseñamos sitios web capaces de adaptarse a pantallas de muchas resoluciones diferentes y fallamos en crear una experiencia optimizada para las pantallas más pequeñas, menor rendimiento de la CPU y las conexiones más lentas. Con un diseño receptivo, todos los activos y la funcionalidad del escritorio se seguirán cargando cuando la página se represente en el dispositivo móvil, lo que a menudo resulta en un rendimiento deficiente. Según Facebook, el tiempo medio de carga de una noticia en el móvil es de 8 segundos.
Si bien algunos de nosotros tenemos la suerte de tener conexiones de red 3G o 4G en nuestros teléfonos inteligentes, solo necesita salir de los centros urbanos para que las velocidades de la red disminuyan drásticamente. Y, por supuesto, están los "próximos mil millones" de personas y dispositivos que se conectan desde países en desarrollo donde las conexiones de red rápidas aún no están disponibles.
Afortunadamente, las cosas se están moviendo en la dirección correcta, con todos los grandes jugadores trabajando en formas de acelerar la carga de contenido en dispositivos móviles. Facebook lanzó Instant Articles, una solución para contenido web de carga rápida, aunque limitada a su jardín amurallado. Apple ha lanzado su propia aplicación de noticias. Google lanzó AMP (Accelerated Mobile Pages), una iniciativa con un propósito similar al de Facebook pero con un enfoque estándar abierto.
WordPress anunció recientemente que agregó soporte para las páginas móviles aceleradas (AMP) de Google a los sitios de WordPress.com y WordPress.org en forma de un complemento gratuito.
Entonces, veamos cómo puede agregar AMP a su blog o sitio de noticias de WordPress.org y beneficiarse de la última tecnología para acelerar su sitio web en dispositivos móviles.

¿Qué es Google AMP?

La promesa de AMP de Google es hacer que sus páginas se carguen instantáneamente en los dispositivos móviles. Soluciona uno de los últimos problemas restantes con Internet móvil. A pesar de que todos lo usan, Internet móvil es sorprendentemente lento. AMP soluciona esto al restringir el número de funciones en una página, eliminando las funciones de diseño para aumentar la velocidad. Google ha afirmado que la velocidad de carga de AMP es un 85 por ciento más rápida que las páginas web normales.
AMP crea una vista móvil especial para su sitio web. Este nuevo sitio móvil mejora su contenido para clientes compatibles, como la búsqueda móvil de Google y Chrome. Esta nueva vista se suma a los sitios web regulares y móviles que ya tiene. Bajo esta vista, sus páginas se ven como páginas web normales pero con todo menos el contenido eliminado. Debido a esto, debe asegurarse de que su sitio de WordPress esté listo para ello.

¿Cómo funciona AMP?

AMP HTML es esencialmente un subconjunto de HTML con solo elementos específicos de JavaScript permitidos. La atención se centra en acelerar la carga de sitios con mucho contenido, como sitios de noticias y blogs. Si bien limita en gran medida Javascript, permite elementos específicos de análisis y publicidad en sus páginas, lo que lo convierte en una buena opción para los editores de noticias.
Para crear su nueva vista móvil, AMP utiliza tres elementos principales:

• AMP HTML : este subconjunto de HTML agrega algunas etiquetas y propiedades personalizadas con muchas restricciones que permiten a los clientes de AMP representar su contenido de la forma que desee sin preocuparse por el rendimiento. El complemento agrega estas nuevas etiquetas a sus páginas automáticamente, pero puede usarlas en sus propias plantillas específicas de AMP si las necesita.
• AMP JS : este marco de JavaScript se creó para páginas móviles que administra el manejo de recursos y la carga asincrónica que hacen que el proceso de AMP funcione. Tenga en cuenta que no puede utilizar JavaScript de terceros en sus páginas AMP.
• AMP CDN : AMP proporciona una red de entrega de contenido opcional que puede almacenar en caché y optimizar aún más sus páginas AMP.

Instalación de AMP

deberá instalar el complemento antes de poder usar AMP en su sitio de WordPress. Si está utilizando WordPress.com, esto ya está disponible para usted.

El complemento oficial

Si bien puede encontrar el complemento oficial de AMP en la tienda de complementos de WordPress, solo encontrará la última versión en el sitio Github del proyecto . Por lo tanto, usted tiene una elección que hacer.
La instalación del complemento a través de WordPress es la más rápida. Solo tiene que buscar amp-wp en la sección "Agregar nuevo" de su panel de administración de complementos de WordPress. Luego, simplemente haga clic en instalar y luego en activar para comenzar a usar AMP en su sitio web.
Si necesita la última versión por cualquier motivo, deberá instalar el complemento manualmente. Después de descargar el paquete Github, solo tiene que hacer clic en "Cargar complemento" mientras se encuentra en el panel "Agregar nuevos complementos". Simplemente busque el archivo zip que contiene el paquete y deje que WordPress tome las cosas desde allí. Una vez que finaliza la carga, puede activar el complemento para comenzar a usarlo.

PageFrog y otros complementos de AMP

El complemento oficial proviene directamente del equipo del proyecto AMP de Google, lo que lo convierte en la versión más actualizada de AMP. Crea una versión /amp/ de cada página y publicación que tengas. Solo tiene que agregar /amp/ al final de las URL para verlas usted mismo.
Sin embargo, no puede editar estas páginas AMP. Si necesita algo más de lo que le ofrece el complemento base, necesitará uno de los otros complementos de AMP que existen, como PageFrog.
PageFrog se basa en el complemento principal de AMP al permitirle editar algunos de los cambios que realiza. Incluso le permitirá agregar algunas funciones de estilo y temas, así como otros protocolos como los artículos instantáneos de Facebook. Puede encontrar PageFrog y algunos otros complementos de AMP en la tienda de complementos de WordPress.

Configuración de su sitio de WordPress para AMP

Una vez que haya activado el complemento, habrá terminado. Para la mayoría de las instalaciones, solo tiene que crear el contenido como lo haría normalmente, y el complemento se encargará del resto. Sin embargo, tenga en cuenta que cosas como su código de Google Analytics no funcionarán en sus páginas de AMP desde el primer momento. Lea para ver cómo agregar funciones de análisis y SEO a sus nuevas páginas AMP. .

Agregar Google Analytics a sus páginas AMP

Si también necesita estas funciones en sus páginas móviles, debe agregarlas manualmente a la plantilla de página single.php del complemento.
Para hacer esto, deberá hacer clic en la opción de edición junto al nombre del complemento AMP en su lista de complementos. Desde allí, simplemente haga clic en el enlace single.php para comenzar a editarlo. Tenga en cuenta que es posible que tenga que volver a hacer esto cada vez que actualice el complemento.

Complementos SEO y AMP

Debido a que sus páginas de AMP no incluirán ninguna de sus funciones de SEO, necesitará un nuevo complemento de SEO compatible con AMP.
Afortunadamente, la mayoría de los desarrolladores de complementos de SEO tienen o tendrán extensiones de AMP que puede usar . Deberá instalarlos por separado, pero los necesitará para asegurarse de que todas sus páginas funcionen para mejorar el SEO de su sitio.
A partir de este artículo, solo tres complementos SEO de WordPress han lanzado extensiones o actualizaciones de AMP.

• Pegamento para Yoast SEO : agrega compatibilidad con AMP al complemento Yoast SEO WordPress
• Datos estructurados de la aplicación Schema : complemento de esquema SEO con AMP de schema.org
• Esquema de datos estructurados WP SEO : complemento de esquema SEO con AMP de Kansas City SEO

Corrección de cualquier error

Al igual que con cualquier adición a su sitio web, desea probar sus páginas AMP en busca de errores e inconsistencias , y corregirlos.
AMP aún está evolucionando y muchas de las funciones aún pueden tener errores. Deberá corregir manualmente estos errores en sus archivos de plantilla antes de hacer públicas sus páginas AMP. Solo recuerde que es posible que tenga que rehacer sus ediciones cada vez que actualice el complemento en caso de que algo cambie.

Publicidad en sus páginas AMP

AMP HTML no permite JavaScript, por lo que los anuncios no se pueden incrustar directamente; en su lugar, se alojan en iframes aislados sin acceso al contenido principal del artículo.
Google diseñó AMP para permitir algunos tipos de publicidad. Solo necesita la versión compatible con AMP de sus complementos publicitarios. Puede encontrar una lista completa de estos complementos compatibles en la página de AMP Github .
Los proveedores de anuncios admitidos actualmente incluyen los siguientes:

• A9
• AdReactor
• AdSense
• tecnología publicitaria
• Haga doble clic

¿AMP o aplicación móvil?

Si bien AMP puede ayudar a acelerar las páginas de artículos de su sitio en algunas condiciones, no funcionará en todas las situaciones y en todos los dispositivos. No solo eso, también viene con grandes limitaciones sobre qué tipo de análisis (¡no js!) y publicidad puede ejecutar en sus páginas.
AMP puede ser una solución eficaz para el tráfico procedente de la búsqueda, pero ¿qué hay de tus lectores más leales?
Para ellos, creo que una aplicación todavía tiene mucho sentido, según el tipo y el tamaño de su audiencia. Una aplicación aún puede brindar muchos beneficios que incluso AMP o Instant Articles no brindan : entrega de contenido y reactivación con notificaciones automáticas, almacenamiento en caché de contenido y uso sin conexión, presencia en las tiendas de aplicaciones y, lo que es más importante, la pantalla de inicio del usuario.
Entonces, si está buscando una plataforma que lo ayude a impulsar el crecimiento a lo largo del tiempo, mientras conserva el control de su contenido y las opciones específicas para dispositivos móviles para publicidad y análisis, entonces considere publicar su propia aplicación. Si está utilizando WordPress en su sitio de noticias o blog, es posible que tengamos la solución adecuada para usted en MobiLoud .