Google Core Web Vitals en WordPress: cómo optimizar su sitio

¿Ya lograste optimizar tu sitio para Google Core Web Vitals?

Puedes decir que no, está bien. No estás solo. De hecho, Searchmetrics encontró que hasta el 96% de los 2 millones de sitios principales^[1] Falló las pruebas de Core Web Vitals. No soy matemático, pero eso suena como mucho.

Google Core Web Vitals es la última herramienta para ayudar a Google a analizar su sitio web. Google seguirá utilizando cosas como la velocidad, la calidad del contenido y la compatibilidad con dispositivos móviles para clasificar los sitios web. Entonces, si ha estado en una buena clasificación, puede relajarse un poco.

Pero solo un poco porque sus competidores están buscando la ventaja que los lleve a la cima. ¿Cómo puedes adelantarte a ellos? Brinda excelentes experiencias de usuario, que es precisamente lo que Google también quiere.

Y obtendrá grandes recompensas si su sitio web ofrece excelentes experiencias. y gran contenido En este artículo, lo ayudaremos a crear un sitio web de este tipo.

Comenzaremos con una inmersión en Google Core Web Vitals, para que sepa exactamente lo que significan y lo que miden. Luego, compartiremos nuestros mejores consejos para crear páginas que siempre superen Core Web Vitals.

Si bien ha habido un cambio en la línea de tiempo y la actualización no se lanzará hasta mediados de junio, todavía tenemos mucho trabajo por hacer. ¡Empecemos!

📚 Tabla de contenidos:

¿Qué son Google Core Web Vitals (y por qué deberían interesarte)?

Si las actualizaciones de Google no son lo tuyo, probablemente te estés preguntando de qué se trata la emoción. Echemos un vistazo rápido a los detalles.

En mayo de 2020, Google anunció una nueva incorporación a sus clasificaciones de búsqueda, Core Web Vitals. Un anuncio como este suele significar mucho trabajo para alguien. Con más de 200 factores únicos utilizados para clasificar sitios web^[2]portada de las clasificaciones de Google todo.

Incluso encontrará que la edad de su dominio juega algún papel en su clasificación. En este caso, Google Core Web Vitals se enfoca en la experiencia del usuario o en cómo es usar su sitio web.

En el futuro, Google Core Web Vitals tendrá una variedad de métricas, pero la actualización de 2021 incluye tres: la pintura con contenido más grande (LCP), el cambio de diseño acumulativo (CLS) y el retraso de la primera entrada (FID).

Pintura con contenido más grande (LCP)

Su LCP es una medida de cuánto tiempo se tarda en descargar la mayor parte del contenido. Puede ser una imagen o simplemente un texto. Sea lo que sea, una vez que se ha cargado, el sitio web siente Listo.

Mejor aún, la pintura con contenido más grande solo mide el contenido en la ventana gráfica del usuario. Cualquier imagen debajo del pliegue no contará contra su puntaje LCP.

Si desea obtener un resultado de aprobación, necesita que su LCP sea inferior a 2,5 s.

Cambio de diseño acumulativo (CLS)

El CLS mide la estabilidad de su página durante el proceso de carga. Mide todos los cambios que pueden ocurrir cuando las imágenes se cargan tarde o las fuentes cambian de estilo. Incluso cosas como los botones pueden crear cambios inesperados en la página.

Si sus elementos se mueven repentinamente (y más de 0.1), tiene un problema de CLS que abordar.

Primera demora de entrada (FID)

El FID mide la rapidez con la que un navegador se vuelve interactivo. Esto significa que los visitantes pueden hacer cosas y obtener una reacción. Incluye cosas como hacer clic en enlaces, presionar botones o completar casillas de verificación.

Puede pasar esta métrica si los usuarios pueden hacer cosas como ingresar datos en formularios y encuestas dentro de los 100 ms.

Cómo probar (y leer) su puntuación de Google Core Web Vitals

Una de las mejores cosas de Core Web Vitals es su enfoque fácil de usar. Esto no es un montón de métricas arcanas que son difíciles de probar (y mucho menos entender). En cambio, todo puede ser bastante fácil con una serie de herramientas oficiales de Google para probar y corregir su sitio web.

Cuando se trata de pruebas, debe conocer las dos categorías principales: herramientas de prueba de laboratorio y herramientas de prueba de campo. Las herramientas de prueba de campo están respaldadas por datos del mundo real tomados de usuarios reales que optan por el Informe de experiencia del usuario de Chrome. Esto los hace más valiosos para Core Web Vitals. Nos vamos a centrar en dos opciones:

• Informe Google Core Web Vitals de Google Search Console.
• La prueba Page Speed ​​Insights que tiene resultados tanto de campo como de laboratorio.

Comencemos con el informe Google Core Web Vitals porque nos dirá qué URL son el problema.

Uso de la consola de búsqueda de Google

Una vez que esté en la consola, desplácese hacia abajo para encontrar Experiencia → Core Web Vitals. Al hacer clic aquí, se abrirá un informe completo del sitio con cada URL categorizada como Buena, Necesita mejorar o Mala.

⚠️ Si no ha configurado Google Search Console, tómese un momento para leer nuestra guía para usar Google Search Console con WordPress.

Haga clic en Abrir informe para obtener información más específica sobre qué métrica Core Web Vitals está causando más problemas.

Si hace clic en el Escribe obtendrá una lista completa de URL que luego se pueden probar en Información sobre la velocidad de la página para más información.

Uso de información sobre la velocidad de la página

Introduzca la URL de su página y haga clic en Analizar para comenzar la prueba. No debería llevar mucho tiempo completar el análisis que mostrará primero los resultados móviles de forma predeterminada. Sin embargo, puede ver los datos de Core Web Vitals desde dispositivos móviles y de escritorio sin ejecutar una nueva prueba. Encontrará los resultados en la parte superior de la página:

Si desea probar toda su página, haga clic en Resumen de origen. Como puede ver, Core Web Vitals se ha marcado de forma útil con porcentajes que indican la frecuencia con la que se aprueban. Esta página es un paso sólido, pero ¿qué podemos hacer para las páginas que fallan?

¿Qué puedo hacer para mejorar mi puntaje de Google Core Web Vitals?

En realidad, podemos hacer bastante para mejorar las puntuaciones de Core Web Vitals (incluso sin conocimientos técnicos). Veamos nuestros mejores consejos para mejorar la experiencia del usuario y Core Web Vitals.

Mejora tu alojamiento

Sí, no hay mejor manera de mejorar la respuesta del servidor que tener uno bueno. En realidad, cambiar de host puede ser difícil (sin mencionar que es costoso), pero no es necesario pasar de un alojamiento compartido a un alojamiento dedicado. Quiero decir, ese salto resolverá muchos problemas de rendimiento, pero incluso un pequeño salto a un servidor más rápido también puede ofrecer mejoras de rendimiento notables.

Habiendo dicho eso, si ya ha decidido hacer el cambio, lea primero nuestra comparación de los hosts de WordPress con mejor rendimiento. Pero, si realmente tiene prisa, consulte la siguiente tabla:

Además de las optimizaciones estándar, cada uno de los hosts anteriores ofrece alguna forma de almacenamiento en caché del lado del servidor. El almacenamiento en caché es el proceso de almacenar una versión HTML de su sitio en su servidor para que sea más fácil de recuperar. El almacenamiento en caché del lado del servidor puede ser complicado de administrar y configurar, por lo que deberá preguntarle a su anfitrión potencial sobre su proceso.

Uso de un complemento de almacenamiento en caché

Sin embargo, no todos los hosts ofrecen almacenamiento en caché del lado del servidor, pero puede disfrutar de algunos de los beneficios con un complemento de almacenamiento en caché de página. Incluso el almacenamiento en caché a nivel de página entrega contenido lo suficientemente rápido como para mejorar su pintura con contenido más grande.

Cuando se trata de usar un complemento, recomendaría WP Super Cache porque es completamente gratuito (sin actualizaciones) con opciones simples y avanzadas (como precarga).

¿Qué tan fácil es usar WP Super Cache? Echale un vistazo:

Una vez que el complemento esté instalado y activado, abra la configuración a través de Ajustes → WP Super Caché. Haga clic en Fácil y turno Almacenamiento en caché activado y entonces Estado de actualización.

En algún momento, te encontrarás con algunos problemas con tu caché. No solo tendrá demasiadas páginas almacenadas en caché, sino que los nuevos cambios no aparecerán en el sitio. Si esto sucede, puede borrar el caché haciendo clic en Eliminar caché.

WP Super Cache también ofrece la opción de precargar sus páginas más populares. Sin embargo, la precarga consumirá recursos valiosos, por lo que deberá elegir sabiamente y monitorear su CPU diariamente.

Configurarlo es fácil. Haga clic en el Precarga opción. Puede establecer la regularidad de la actualización de la memoria caché y si los archivos antiguos deben eliminarse o no.

Una vez que esté satisfecho con la configuración, pulse Precargar caché ahora Para empezar. Una vez finalizado el proceso de almacenamiento en caché, los archivos estarán en su wp-content/cache carpeta en el servidor.

Optimiza tus imágenes

A la gente le encantan las fotos. Y, todos usamos muchos de ellos, ¿verdad? Sin embargo, las imágenes podrían estar perjudicando sus puntajes de Core Web Vital. Hay algunas razones para esto:

• La imagen puede ser demasiado pesada.
• Las dimensiones de la imagen son demasiado grandes.
• Estás cargando todas las imágenes de la página.
• Las imágenes se envían desde su servidor a personas de todo el mundo.

Afortunadamente, hay una manera fácil de arreglar todo lo anterior.

Primero, considere algunas cosas cuando se trata de imágenes:

• ¿Necesitas todas las imágenes?
• Que dimensiones usas? Nuestro objetivo es> 2000px.
• Para fondos, intente usar patrones, degradados o SVG.
• Limite las imágenes de la mitad superior de la página a un logotipo y una imagen destacada.
• No use controles deslizantes o carruseles en la mitad superior de la página.

Una vez que haya ordenado sus imágenes, puede optimizar el resto. La optimización de imágenes puede reducir el tamaño de las imágenes, mejorar sus dimensiones y entregarlas desde una red de entrega de contenido (CDN) utilizando servidores más cercanos a sus usuarios. Por todo esto, recomiendo Optimol.

Optimole ahorra mucho trabajo a sus servidores al hacer todo lo anterior en la nube. Dirigirse a Optimol y regístrese para obtener una clave API (la necesita para acceder a las operaciones en la nube).

Recibirá un correo electrónico para validar su cuenta a través del panel de Optimole. Tome la clave API y diríjase a su sitio de WordPress.

Una vez que instale y active Optimole, acceda a la configuración desde el Medios → Optimol menú. Pegue su clave API y presione conectar.

También debe habilitar Escalar imágenes y carga diferida.

Escalar las imágenes significa que Optimole enviará imágenes del tamaño perfecto para el dispositivo (sin importar cuál sea) para reducir el cambio de diseño.

La carga diferida significa que solo cargará las imágenes que sus usuarios pueden ver en la ventana gráfica. Con esa configuración, deje que Optimole se encargue del resto.

Optimizaciones de código

Lo que pasa con la ejecución de un sitio de WordPress son todas las partes móviles. Entre los temas y complementos, y los lenguajes que los potencian, es difícil para una persona sin conocimientos técnicos optimizar el código.

Obviamente, podemos optar por temas con bases de código optimizadas y evitar complementos con código inflado. Más allá de eso, podemos optimizar el código de dos maneras principales:

Una desventaja es que Autoptimize tiene muchas configuraciones, lo que significa que no existe una solución genuinamente única para todos.

Habiendo dicho eso, puedes elegir con seguridad Optimizar todo de JavaScript, CSS, HTML. Esta configuración minimiza su código al eliminar cosas como espacios y saltos de línea. Más allá de la minificación, Autoptimize tiene excelentes opciones de rendimiento para cualquiera que esté dispuesto a aprender un poco más y probar mucho.

Por ejemplo, puede obtener aumentos de velocidad significativos utilizando tareas avanzadas, como precargando CSS y insertando CSS crítico, pero deberá leer cada opción antes de usarla.

Fuentes e iconos

Puede usar Autoptimize para manejar sus fuentes, particularmente si está comprometido a usar Google Fonts. Incluso puede intentar precargar sus fuentes de Google para evitar el “destello de texto sin estilo” que daña su cambio de diseño acumulativo.

Recomiendo probar algunas opciones diferentes y ver qué funciona mejor para su sitio. Desafortunadamente, si está utilizando Elementor, aún verá el cambio de diseño. Si este es su caso, considere cambiar a las fuentes del sistema.

Prácticas recomendadas para anuncios

Cuando se trata de cambios de diseño, los anuncios son uno de los mayores problemas. Por lo general, los anuncios empujarán el contenido hacia abajo, lo que crea una experiencia de usuario deficiente. Afortunadamente, es posible reducir el turno siguiendo las mejores prácticas.

Lo que es más importante, la ubicación del anuncio debe equilibrarse entre obtener más clics y el impacto en su diseño. Por ejemplo, no coloque anuncios en la parte superior de la ventana gráfica. Si el tamaño del anuncio final es más grande que el contenedor, empujará todo su contenido hacia abajo. Apunta a la mitad de la página donde el anuncio hará menos daño.

Cuando haya decidido cuál es la mejor ubicación, reserve un espacio para el anuncio. Si bien esto puede dejarle un espacio en blanco, podría valer la pena el intercambio.

Conclusión

Con estos consejos, debería ver una mejora inmediata en sus resultados. Mejor aún, cada una de las opciones le brinda un buen punto de partida para futuras optimizaciones.

Cubrimos mucho terreno, así que para recapitular:

• Actualizar su plan de alojamiento podría ayudar a mejorar sus resultados.
• El uso de un complemento de almacenamiento en caché debería acelerar la entrega de contenido.
• La optimización de imágenes y el uso de una CDN deberían mejorar el rendimiento del sitio.
• Con las optimizaciones de código, puede controlar cómo se carga su sitio.
• Con una selección de fuentes y precarga consideradas, puede disfrutar de aumentos de velocidad.
• Si sigue las mejores prácticas publicitarias, puede reducir los cambios de diseño.