Configurar Google Rapin en su sitio web de WordPress

¿Deberían sus sitios de WordPress usar páginas móviles aceleradas (AMP) de Google? Es una pregunta simple con una respuesta complicada. Cuando se anunció en 2015, Google facturó el proyecto ASCE como una forma de mejorar el rendimiento de las páginas móviles y la experiencia para los usuarios en dispositivos móviles. Automatic ha anunciado que apoyará el AMP en octubre el mismo año. Pronto ha estado disponible un amplificador de complementos en el almacén de complementos de WordPress, que le permitió agregar soporte de AMP a su sitio web de WordPress. El complemento original era un negocio bastante espartano, pero se produjo un desarrollo sustancial en los años que han pasado.
En este artículo, abordaremos cómo funciona AMP, cómo usar tanto el complemento oficial como una alternativa y, finalmente, un método para aumentar la velocidad de su sitio para todos los usuarios con medios de descarga de WP y spinUpwp sin un AMP no en absoluto.
¿Qué es el amplificador?
Amp y WordPress
Instalación y uso de AMP de complemento
¿Es más rápido?
Temas amp y wordpress
Una alternativa al amplificador de complemento oficial
Aumento de la velocidad con medios de descarga de WP y spinUpWP
conclusión
¿Qué es el amplificador? Una página de AMP es una versión especial de una página de sitio normal, que debe crearse utilizando HTML AMP, un subconjunto HTML estándar con algunas etiquetas reemplazadas por contrapartes de AMP específicas. Google también solicita que las páginas de AMP incluyan la biblioteca IMP JS que realiza optimizaciones en su página.
Una razón para usar las páginas de AMP era la idea de que cargarían más rápido para los usuarios móviles. Aunque esto puede seguir siendo válido, la otra razón principal fue que Google dio páginas basadas en AMP un tratamiento preferencial en el carrusel de noticias principales. Google anunció que interrumpe esta práctica en junio de 2021, en función de los principales elementos vitales del sitio de rendimiento, la capacidad de respuesta y la estabilidad visual, como un signo de que la página se cargará rápidamente y proporcionará una buena experiencia para el usuario. AMP ha sido seguido por controversia desde el principio. Las críticas al estándar desarrollado por Google incluyen que “es malo para la forma en que se construye”, que “mantiene a los usuarios en el tráfico de Google y secuestra en otros sitios web” y que “Google ha forzado sitios web … para crear versiones de AMP. de sus artículos ”. Ni siquiera el pasaje de Google a un modelo de gobierno abierto ha podido silenciar a los críticos.
Más recientemente, Google ha sido acusado de aumentar la carga de páginas que no son de amperios para proporcionar a las páginas de AMP un “hermoso impulso comparativo”. Las acusaciones provienen de un proceso antimonopolio presentado Google por 16 estados de EE. UU. Y Puerto Rico. Dejando a un lado la controversia, las páginas de AMP tienden a cargarse rápidamente. Como Daniel Sullen de Mediahuis Ill le dijo a Searchengineland, “si Google infló artificialmente la comparación entre el AMP y el no amplio, el impacto del aumento de la velocidad del caché no es una farsa”. AMP y WordPress Automatic, el bien conocido WordPress XWP y Google Agency participaron en el desarrollo de complementos AMP 2017. La versión del complemento se lanzó oficialmente en WordCamp US en 2018. Una de las características más destacadas de esa versión fue la integración con … la nueva Bloqueo editor desde entonces (Gutenberg) para garantizar la compatibilidad de todos los bloques básicos. Según los desarrolladores, un enfoque central del desarrollo de la versión 2.0 era mejorar la interfaz de uso. La versión actual, 2.2.0, se lanzó en diciembre de 2021 e incluye cambios en la pantalla de configuración y el asistente de incorporación. Muchos de los colaboradores actuales en el complemento AMP WordPress están trabajando en Google o están patrocinados para trabajar en él:
Alberto Medina – Abogado de desarrolladores en el equipo web de contenido Ecosistemas en Google.
Weston Ruto – ha liderado el desarrollo del AMP en XWP, ahora en Google.
Pascal Birchler, un conocido colaborador y traductor de WordPress, ahora en Google.
Alain Schlesser, un conocido colaborador de WordPress, el desarrollador principal en el WP-CLI, funciona en XWP y con el equipo de Google en el complemento AMP de WordPress.
Instalación y uso de AMP del complemento Cuando se inició el complemento por primera vez, una página de amplificador de WordPress a menudo se veía muy diferente de la versión que no es APP de la misma página. Ha habido una serie de razones para esto, incluido el hecho de que el CSS personalizado no está incluido en las páginas de AMP. Puede ver la diferencia en la imagen a continuación, ya que observamos por primera vez AMP en 2016. La publicación original está a la izquierda y la versión correcta: ¡la versión de AMP no se parece a la publicación original! Sin embargo, se ve exactamente como todas las demás páginas de AMP de esa época. El complemento en ese momento no tenía opciones construidas para personalizar cómo se veía el resultado. La alineación de la página AMP con la apariencia del sitio requería el hundimiento en el código. Esto no parece ser un problema, siempre que use un tema compatible con AMP. Abrí un sitio de WordPress que uso para probar, cargué el tema predeterminado de veintiún veintiún años y activé el complemento oficial. Utilizo la versión 2.2.0, la última versión al momento de escribir. Nuevamente, la publicación original está a la izquierda, y la versión de AMP está a la derecha:
¡El milagro de las maravillas, se ve exactamente igual! AMP acepta muy bien el tema de veintiún veintiún años. Veremos qué tan bien acepta otros temas populares en una sección posterior. Puede instalar el complemento AMP de la misma manera que instalaría cualquier otro complemento disponible en WordPress.org Warehouse. Ingrese “AMP” en la barra de búsqueda y debería ser lo primero que ves:

También puede ver una alternativa al complemento oficial, AMP para WP. Lo discutiremos en su propia sección a continuación. Instale y active el complemento AMP como cualquier otro complemento. Sin embargo, Plugin ASCA agregó un experto en incorporación en la versión 2.0 y quería verificarlo. Hice clic en el siguiente y fui a la siguiente sección. El asistente de integración le ofrece opciones para “desarrollador o técnicamente conocedor” y una configuración más simple para “sin conocimiento técnico”. La única diferencia está en las formas recomendadas del complemento. Seguí adelante y seleccioné al desarrollador o técnicamente conocedor.

Después de hacer clic nuevamente, el experto comenzó a escanear mi sitio de WordPress para verificar si hay temas y arados incompatibles. No encontró ningún problema. De hecho, el proceso fue tan rápido que si parpadeaba, me lo habría perdido. El sitio de prueba que uso es bastante débil, por lo que podría llevar más tiempo si tiene muchos complementos. También debe tener en cuenta que el complemento AMP oficial escanea solo el tema y los complementos activos. Deberá ejecutarlo nuevamente si cambia los temas o agrega nuevos complementos a su sitio.

Ahora, el experto en incorporación nos ofrece tres opciones básicas: Estándar: esta configuración significa que cada publicación y página se representarán como AMP. Puede continuar renunciando al amplificador para ciertas partes del sitio, pero de lo contrario no habrá versiones que no sean amp de su contenido. Asegúrese de que su sitio use el complemento compatible con AMP antes de seleccionar esta opción. El complemento generalmente recomendará esta opción si tiene un tema compatible con AMP y ninguno de sus complementos activos causa problemas. Transición: esto le da a su sitio ambas versiones de AMP y no amp, ambas utilizando el mismo tema. Puede usar este modo si su sitio de WordPress usa un tema que no es completamente compatible con AMP, pero usted acepta las diferencias entre las dos versiones. Los usuarios en dispositivos móviles reciben la versión de AMP, mientras que aquellos que acceden a su sitio en las computadoras ven el No Amp. Reader: todavía tiene versiones AMP y no amplificadores de su sitio, con esta opción, pero cada versión usa su propio tema. Esta configuración es para cuando se usa un tema que tiene incompatibilidades significativas con AMP. La documentación recomienda esta configuración para aquellos que no son “técnicamente conocidos o simplemente no quieren lidiar con las incompatibilidades”. El sitio de prueba tiene un tema y complementos compatibles, pero quería probar cómo se verían las páginas cuando se transmiten tanto como AMP como no amplificadores. Seleccioné Transitional y hice clic en el siguiente. Esto nos lleva a una página donde podemos revisar nuestras opciones.
Todo se veía bien, así que continué y hice clic en la terminación, llevándonos a la página de configuración.En este momento, puede hacer clic en el sitio y ver cómo se ve su sitio.La planta baja revelará la configuración más avanzada del AMP del complemento, que puede ver a continuación.Los discutiremos a continuación.

Plantillas aceptadas: esto le permite elegir qué tipos de contenido se activan para AMP, incluidas publicaciones, páginas y medios. También hay un interruptor de conmutación que le permite transmitir todas las plantillas como AMP. Se selecciona de forma predeterminada. Supresión de complementos: con esta configuración, puede ver qué complementos causa errores de validación de AMP y puede cambiarlos de activo a suprimido. La supresión de los complementos evita que se ejecuten en sus páginas de AMP, dejándolas al mismo tiempo en el resto de su análisis de sitio: esta configuración controla las configuraciones de análisis, lo que le permite capturar análisis para sus páginas. Cada configuración toma la forma de un objeto JSON y debe tener Google Analytics configurado en el sitio para que cualquier configuración funcione. Le recomendamos que lea la documentación de AMP-Analytics y la documentación de análisis antes de realizar cualquier cambio en esta configuración. Estructura de URL asociada: esta configuración se aplica solo a los modos de transición y al lector. El modo estándar transmite solo las páginas de AMP, por lo que las URL asociadas no son necesarias. En formas de transición y lector, las URL canónicas siguen siendo no amp, mientras que las versiones de ASCE tienen direcciones de URL específicas. Cambiar las estructuras de URL asociadas puede conducir a 404 hasta que el sitio sea reínculos. AMP recomienda que deje esta configuración solo, a menos que migre de otro complemento AMP con una estructura diferente. Hay cuatro estructuras diferentes para direcciones de URL de pares, con ejemplos que se muestran en el enlace anterior. Otros:

Esta configuración consta de tres interruptores de conmutación, todos activados por defecto. El primero le permite deshabilitar la redirección móvil. Dejándolo activado, se asegurará de que los visitantes de los dispositivos móviles ven la versión AMP de sus páginas. El segundo conmutador permite que los instrumentos para los desarrolladores de AMP resalten los errores de validación al editar las publicaciones y visualizar el sitio. El tercer y último interruptor de conmutación determina si los datos del complemento se eliminarán si desinstala el complemento a la vez. ¿Es más rápido? Como mencioné anteriormente, el AMP del complemento produce páginas que parecen idénticas a sus homólogos que no son de amplio amplio, siempre que use un tema de AMP para WordPress, como veintiún veintiún años. Echaremos un vistazo a otros temas un poco más tarde. Por ahora, quiero ejecutar algunas pruebas de velocidad y ver si ASCE respeta su promesa. Desde un punto de vista visual, son idénticos, pero la prueba real es si la versión de AMP está cargada o no más rápida. Mi muestra de publicación es bastante fácil de comenzar, solo un pequeño archivo de imagen y un pequeño texto. Probablemente se cargará bastante rápido, independientemente de la situación. Para proporcionar más desafío, creamos una nueva publicación con un solo bloque de imágenes y un bloque de galería y tomamos algunas fotos para completarla. Es la mejor práctica para optimizar sus imágenes de carga rápida, pero no me he molestado. No he visto ninguna ventaja de hacer las cosas demasiado fáciles para la página de AMP.
Ya había instalado un amplificador de complementos, así que lo primero que hice fue deshabilitar la velocidad de carga básica para mi publicación en la galería. Luego abrí las herramientas de desarrollo en Firefox y miré la pestaña de red mientras actualizo la página varias veces. Versión sin campaña Dimensión en blanco: 908.54 KB Transferido: 637.80 KB Finishing: 1.78 S DOMCCONTELOADED: 549 MS Embarazo: 668 MSVersion Amp Dimensión: 1.45 MB Transferido: 1.05 MB Finish Cargado bastante rápido que la página que no es de amp, a pesar del hecho de que es algo más grande. Los temas y WordPress ya han establecido que el IMP de complemento oficial ahora proporciona páginas idénticas con páginas que no son de amperios, siempre que permanezca con el tema predeterminado de WordPress Veintiún u otro tema activado para AMP. Quería saber si lo mismo sería válido para otros temas. Decidí probarlo con Astra y OceanWP, temas populares que se enumeran tanto como compatibles con el complemento oficial. También quería probar el complemento con Storefront, un tema popular que no figura como parte del ecosistema de WordPress. Puede ver los resultados a continuación. En todos los casos, la versión original está a la izquierda, con la versión AMP de la página a la derecha. Astra:

En OceanWP:

Cargué el tema de la tienda y actualicé la página. A diferencia de Astra y OceanWP, la tienda no figura como parte del ecosistema de temas compatibles. Sin embargo, las publicaciones se ven casi idénticas.

Sin embargo, a diferencia de nuestras pruebas anteriores, el complemento ASA me informó sobre un conflicto.
Hago clic en “Ver detalles técnicos” y me mostré el problema.El tema de la tienda se ha cargado en JavaScript personalizado.AMP permite las etiquetas solo si se usa para cargar los componentes de AMP, que el complemento agregan automáticamente.El complemento le brinda la oportunidad de eliminar las etiquetas cargadas con el tema y servir la página como un amplificador o eliminarlas y servirla como una página sin amp.Su eliminación requiere un análisis cuidadoso y una conciencia de exactamente lo que hace JavaScript.Por ejemplo, si su tema cobra a JavaScript personalizado para alimentar sus menús de navegación, eliminarlos puede conducir a la interrupción de su navegación front-end.Este aspecto de amplificador no se limita a los temas.También puede interferir con otros componentes que se basan en JavaScript, como los formularios.

El complemento me aconsejó usar en su lugar … componentes y funcionalidad, como acciones y eventos de unión a AMP (a diferencia de los atributos de gestión de eventos JS, como OnClick). Se pueden agregar algunos JS personalizados si están encapsulados en la AMPSCRIT. Estos componentes le permiten agregar etiquetas personalizadas en sus páginas activadas para AMP. El componente de unión a AMP entra en juego en respuesta a los cambios de datos o acciones realizadas en su sitio web de WordPress. El componente AMP-script se utiliza para ejecutar JavaScript personalizado en un trabajador web. Tenga en cuenta que se pueden aplicar algunas restricciones para qué scripts puede ejecutar de esta manera. Esto asegura que el amplificador mantenga su velocidad. Alternativa al complemento AMP oficial, como mencionamos anteriormente, WordPress.org Deposit enumera una alternativa al complemento oficial, AMP para WP. Una de las funciones más recientes es la optimización de CSS (alias Shaking), que elimina automáticamente todos los CSS no utilizados de sus páginas de AMP. También proporciona soporte para tipos de publicaciones personalizadas. Hay muchas extensiones disponibles para AMP para WP, incluidas las que admiten Google Adsense, Formularios de contacto y WoCommerce y otros complementos de comercio electrónico. Quería ver cómo funciona en comparación con el complemento oficial, por lo que el primer paso fue apagar el complemento que tengo en mi sitio. El siguiente paso fue la instalación y activación del complemento. Después de la activación, el AMP para WP le brinda dos opciones para continuar la configuración: BASIC y AVEDY.

Después de un avance seleccionado, me llevaron a la pantalla de configuración. Desde aquí, puede acceder a las opciones de AMP para el WP, incluida la transición a la configuración básica. La principal diferencia entre los dos parece ser que Advance ofrece más opciones. Advance le brinda acceso a la configuración, la configuración, el diseño y las extensiones. Básico, esto se reduce a la configuración y las extensiones. Puede cambiar entre los dos en cualquier momento. La pestaña de configuración le permite cambiar el tipo de sitio, seleccione qué partes de su sitio. Esta pestaña también incluye la configuración publicitaria y una lista cuyos complementos de terceros son compatibles con AMP para WP. La pestaña Configuración ofrece muchas opciones sobre cómo su sitio sirve a las páginas de AMP. Hay demasiados para entrar en detalles aquí, pero parece cubrir la mayoría de las situaciones a un nivel bastante granular, incluido el comercio electrónico, las traducciones, los análisis y los datos estructurados. La pestaña de diseño es relativamente simple en comparación. Muestra temas compatibles con AMP, y le brinda acceso a la apariencia precisa de sus páginas creadas por este complemento. Finalmente, la pestaña Extensiones le muestra la lista de extensiones premium disponibles para el WP.

Basado solo en la pestaña Configuración y diseño, el AMP para WP le brinda un mejor control en sus páginas. Siempre puede personalizar las páginas de su sitio y AMP, pero estas personalizaciones pueden necesitar ingresar el código si usa el complemento oficial. El AMP para WP parece proporcionar características similares a través del backend habitual de WordPress. También hay una versión profesional del AMP para WP, que ofrece descuentos en temas y extensiones, así como funciones que no están disponibles en la versión gratuita. Decidí volver a BASIC, en lugar de experimentar con todas las configuraciones. ¿Luego hago clic en dónde necesitas el amplificador? y publicaciones seleccionadas. Quería asegurarme de que las publicaciones de ejemplo se transmitan como páginas de AMP, así que ejecuté una prueba de AMP. Todo parecía funcionar correctamente, así que entré en la pantalla de publicación para ver si el complemento había cambiado algo. El contenido se veía exactamente igual, pero el desplazamiento hacia abajo ha revelado algunos cambios. El campamento para WP le ofrece tanto un generador de páginas AMP como un editor de AMP personalizado. El generador de página AMP le permite crear páginas de AMP desde cero o usar aspectos predefinidos. El editor de AMP personalizado le permite usar HTML en lugar de etiquetas especiales compatibles con AMP que generalmente debe usar con una página de AMP. Quería ver cómo funciona, así que tiré una línea de texto, la incluí en algunas etiquetas y verifiqué la casilla de verificación para usar este contenido como contenido de AMP.

¡Éxito! El texto que agregué se incluyó en la página y las etiquetas HTML que utilicé se aplicaron al texto.

Luego hice una prueba de velocidad rápida. Con respecto a la velocidad de carga, los resultados fueron similares a los encontrados con el complemento oficial. Dimensión de descompresión de versión sin campaña: 908.54 KB Transferido: 637.80 KB Finishing: 1.78 S DOMCCONTELOADED: 549 MS Embarazo: 668 MS ASE Versión WP Dimensión: 1.29 MB Transferido: 722.90 KB Finabón transferido: 1.21 S Dominentented Cargada: 231 Ms Pregnía de embarazo Ms Aumento de la velocidad con los medios de descarga de WP y SPINUPWP no hace mucho tiempo, podría responder esta pregunta haciendo otra pregunta: “¿Quiere aparecer en las historias principales de carrusel o no, Google?” Hoy es mucho más difícil de responder. Ambos complementos de AMP que probamos tienen velocidades de carga mejoradas. Sin embargo, hay otras formas de mejorar su tiempo de carga. Estos incluyen descargar contenido de medios a través de un complemento como WP Descargar Media y el uso de una red de entrega de contenido (CDN). WP Offload Media ayuda a mejorar los tiempos de carga de cada página, móvil o no. Cubrimos cómo configurar los medios de descarga de WP en nuestra documentación, por lo que no repetiremos esta información aquí. También tenemos guías sobre la configuración de espacios de almacenamiento para administrar entornos descargados, incluidas las guías de Amazon S3, los espacios digitales y el almacenamiento en la nube de Google. Mi sitio de prueba ya ha instalado y configurado los medios de descarga WP, pero lo he desactivado antes de ejecutar las pruebas de AMP para asegurar que las imágenes se carguen desde el sitio local y no un CDN. Lo reactivé y me aseguré de que ambos complementos de amplificador estén deshabilitados, luego ejecuté una prueba de velocidad básica en la galería.

Velocidad de carga del descargador WP Pintent Dimensión famosa: 1.10 MB Transferido: 907.77 KB Finalización: 804 MS DOMCCONTeloaded: 490 ms Embarazo: 659 ms Page Cargas más rápido que la versión sin amp en nuestras pruebas anteriores, pero no tan rápido como las publicaciones amadas. Por otro lado, el uso de medios de descarga de WP significa que nunca debe preocuparse por los conflictos con el tema o los elementos de JavaScript que tenga en su sitio de WordPress. Hay otros pasos que puede tomar para aumentar la velocidad de la página, además de transmitir los medios con un CDN, como -to-sabir) /#Page-Caching). Decidí ver si podemos aumentar la velocidad de carga usando un solo clic en la memoria de la página SpinUpwp. Me conecté al panel de spinUpWP y activé “caché de página”. SPINUPWP le brinda la oportunidad de establecer la duración del caché y las exclusiones de los caminos. Los dejé con los valores predeterminados y ejecuté otra prueba de velocidad en el sitio de prueba. WP Descargar medios y almacenamiento de almacenamiento spinUpwp Dimensión sin comprimir: 1.10 MB transferido: 907.81 KB Finalización: 605 ms DOMCCONTENT: 376 ms Pregnancy:

494 ms Estas velocidades son comparables a los resultados que hemos obtenido con el amplificador de complementos, pero con la ventaja de que no tiene que preocuparse por la compatibilidad de sus temas y complementos. De los dispositivos móviles un aumento en la velocidad. WP Offload Media le brinda un impulso similar, pero la velocidad aumenta también a los usuarios de su escritorio. El uso de la caché de la página SPINUPWP aumenta aún más. Uno de los principales factores para el uso de AMP fue la introducción de sus páginas en Google Top News. Esta motivación ya no se aplica, porque Google ha cambiado a la evaluación de vital web central. Mientras su sitio ofrezca tiempos de carga rápidas, la no uso del amplificador no debe evitarlo. Mejorar los puntajes de vital web de bajo núcleo es probablemente un mejor uso de su tiempo que implementar AMP. Ya sea que desee romper ese carrusel de noticias principales o no, mejorar Core Web Vitals ofrece una mejor experiencia de usuario. Por otro lado, una de las principales razones para evitar el amplificador fue que transmitiría páginas que a menudo parecían sustancialmente diferentes de las otras páginas de su sitio. Aunque podría profundizar en personalizaciones para cambiar su apariencia, involucraba mucho bacalao. Además, esta razón puede no aplicarse en este momento. El complemento ASE oficial parece producir páginas que parecen idénticas a las páginas que no son de todo, siempre que use un tema compatible con AMP. Específicamente, el complemento en sí le dirá cuándo algo en su tema o complementos