Mejorar Resultados de Core Web Vitals

Google anunció que estará evaluando el desempeño y la experiencia del usuario en los sitios web usando una serie de criterios conocidos como Core Web Vitals

Core Web Vitals es un análisis de tu sitio que ya puedes ver desde tu cuenta de Google Search Console si cuentas con una buena cantidad de tráfico que permita medir el rendimiento de las páginas de tu sitio.

Si aún no tienes una buena cantidad de tráfico para poder ver el reporte de Core Web Vitals, puedes ver hacer un test de seguridad en la página oficial de Core Web Vitals

Las Métricas de Core Web Vitals

Estas son las métricas de Core Web Vitals

  • Largest Contentful Paint (LCP): El intervalo de tiempo entre el inicio de la carga de una página y el momento en que se procesa por completo la imagen o el bloque de texto más grande en la ventana gráfica de un usuario. Es posible que vea que la puntuación cambia a medida que se carga la página y cuando el contenido está visible, pero el nodo más grande aún está en la lista de trabajos pendientes y aún no se muestra. Esto se hace más notorio en las velocidades de conexión aceleradas.
  • First Input Delay (FID): La cantidad de tiempo que tarda una página en estar lista para la interactividad del usuario, lo que significa que a medida que las páginas se ensamblan, ¿cuánto tiempo tarda la página en responder a los clics, los desplazamientos o la entrada del teclado procesando sus correspondientes controladores de eventos? La interacción del usuario puede retrasarse significativamente debido a las principales tareas de secuencia de comandos de bloqueo de subprocesos.
  • Cumulative Layout Shift (CLS): La distancia medida y la fracción de la ventana gráfica que se desplaza debido a la manipulación del DOM o la falta de atributos de dimensión para los principales elementos multimedia. Cuando no podemos definir las dimensiones de nuestras imágenes de héroe, por ejemplo, el texto de nuestras páginas primero parece que solo se desplaza, lo que provoca un “cambio” de diseño de contenido disruptivo para los usuarios.

Si usas herramientas como Google Page Insights y GTMetrix puedes entender cuales son los problemas de tu sitio.

El reporte de Page Experience de Google Search Console te puede ayudar a resolver los problemas en cada uno de las métricas.

Core Web Vitals: Datos de Laboratorio

Para entender Core Web Vitals, debes entender una cosa son los datos de laboratorio y otra cosa son los datos de campo.

La diferencia entre los datos de laboratorio y los datos de campo (field data) es que estos pueden ser manipulados.

Por ejemplo, yo puedo retrasar por 2 segundos la ejecución de varios scripts usando Flying Scripts lo que me permite tener buenos resultados en el reporte de Core Web Vitals en Google Page Insights y otros test de velocidad.

Ese truco puede engañar los tests de velocidad pero no los datos de campo (field data) que puedes visualizar en Google Search Console.

Core Web Vitals: Datos de Campo

Los datos de campo se obtiene por medio de la experiencia que los visitantes tienen en tu sitio.

Los datos de campo impiden que Core Web Vitals puede ser burlado por lo que no te extrañes si tienes un buen resultado en Google Page Insight y resultados horribles en Google Search Console.

Reporte de Core Web Vitals

Al parecer no basta con solucionar o maquillar parte de los problemas en los tests de velocidad.

Lo otro que debes saber es que cualquier mejora que hagas requiere de un análisis de 28 días.

En 28 dias, se pueden validar las mejoras o puede ver como tus resultados empeoran.

¿Core Web Vitals y el posicionamiento Web?

Gary Illyes de Google dijo en Reddit que cree que es poco probable que los elementos básicos de la red “se conviertan alguna vez en el factor principal del tráfico orgánico”. Dijo que no deben ignorarlo, pero Google y otros motores de búsqueda se clasifican principalmente en función de “los resultados más relevantes y de la más alta calidad para las consultas de los usuarios”, no necesariamente lo que se encuentra en core web vitals.

Mejorar los Resultados de Core Web Vitals

Todos los sitios tienen diferentes propósitos por lo que algunos sitios están más cerca de lograr el puntaje perfecto perfecto que otros.

Estos son algunos consejos para mejorar los resultados de tu sitios en los reportes proporcionados por Core Web Vitals.

Optimizar las Imágenes

La optimización de imágenes implica muchas cosas entre las cuales puedo mencionar:

  • La carga diferida de imágenes es algo que WordPress ya realiza de forma nativa por lo que no se requiere de un plugin para realizarlo.
  • Trata de no agregar imágenes en la sección que se conoce como Above the Fold, especialmente si monetizas con anuncios de Adsense.
  • Optimiza las imágenes antes de subirlas a la Librería de WordPress, algo que puedes hacer usando sitios como Imagify
  • Agrega imágenes con el tamaño adecuado.

Si las imágenes se agregan below the fold raramente causan un problema, en algunos casos, puede ser que requieras usar un servicio externo como el de un CDN

Mejorar el Tiempo de Carga del Servidor

Esto no lo vas a lograr usando un pésimo proveedor de hospedaje, mi recomendación es que uses Hospedaje web en la nube.

Yo uso Digital Ocean por medio de Cloudways por que es económico, 10 sitios por $11 dólares

Y en términos de velocidad, Digital Ocean es excelente.

Prueba Gratuita de Cloudways

La prueba gratuita de Cloudways dura 3 días y no requiere ingresar los datos de tarjeta de crédito.

Mejorar la Carga de Recursos de Terceros

Esto es algo muy complejo ya que optimizar los recursos de terceros es prácticamente imposible.

Algunas de las cosas que he hecho en mis sitios web es:

  • Usar los tipos de letra del sistema y descartar el uso de Google Fonts, si tienes problema para quitar los Google fonts de tu tema, puedes hacerlo por medio de Flying Fonts de WP Speed Matters
  • Colocar los anuncios de Adsense de forma manual y que las unidades sean fijas y responsivas, solo usa Auto Ads para los Vignette Ads

Ad Inserter para Mejorar Problemas de CLS

Si eres de las personas que usa los anuncios de Adsense, puedes atrasar la ejecución del JS externo usando Flying Scripts o Perfmatters.

Algo que debes considerar es desactivar la opción que permite que Adsense modifique el tamaño de los anuncios existentes ya que esto causa graves o ligeros problemas de Layout Shifts aunque estés usando unidades fijas de Adsense.

Si todas las unidades de Adsense son fijas, asegurate de reservar el espacio de esos anuncios usando la configuración de Ad Inserter.

Los datos que vas a ingresar en esos espacio son los datos de la unidad que hayas creado.

Las unidades de 300 x 250 son de las más recomendadas y que se ven bien en escritorio y que se adaptan bien en el teléfono.

Caching vs Full Page Caching

Uno de los mejores plugin de caché es WP Rocket ya que está en constante desarrollo y es muy fácil de usar.

Hay otros plugins de caché gratuitos y premium que también puedes considerar,

El problema es que los usuarios de WordPress activan todas las funcionalidades del plugin y no tienen la más mínima idea de lo que esas mejoras de velocidad hacen.

Mi receta para manejar el caché de mi sitio es usar Swift Performance Lite solo para precalentar el caché y el resto del trabajo se lo dejo a CloudFlare.

El full page caching de CloudFlare prácticamente elimina la necesidad de tener un plugin de caché

Usar full page caching es algo que solo recomiendo a sitios que prácticamente tiene contenido informativo.

Menos es Más en WordPress

Este es el orden que yo recomiendo para reducir el número de solicitudes y recursos externos que afectan la velocidad de WordPress.

  • Una de las mejores recomendaciones es reducir el número de plugins que tienes el sitio a los plugins que son estrictamente necesarios y a los que no carguen JS y CSS en el front-end de tu sitio.
  • Si ya hiciste eso, ahora debes de considerar cambiar plugins que causan problemas de velocidad por plugins más livianos. Por ejemplo, Elementor por plugins de bloques de Gutenberg, especialmente si tu sitio no es nada del otro mundo en términos de diseño
  • Si ya tienes lo estrictamente necesario y las opciones que tienes son las más livianas, ahora debes usar PerfMatters para descargar (unload) JS y CSS que no necesites.

El sitio que me ayudado con este análisis ha sido la cascada de GTMetrix ya que esta permite ver el número de solicitudes, el tamaño de estas para pensar en que debo trabajar.

Esto lo puedes complementar con los reportes de Google Page Insights.

Pequeñas Optimizaciones con PerfMatters

Yo soy un fan de PerfMatters hasta que llegue el momento de no crear necesitarlo.

PerfMatters permite realizar una serie de pequeñas optimizaciones que reduce el número de solicitudes en el sitio.

Esas optimizaciones se pueden realizar por medio de Code Snippets pero si ya estás usando el plugin, prefiero implementar estos cambios desde el plugin.

Conclusiones

Optimizar tu sitio de WordPress no consiste en pedir consejos sin brindar detalles y aplicar recomendaciones a ciegas.

Debes de aplicar recomendaciones y verificar el impacto que estas tienen en términos de velocidad.

Y cuando hablo de impacto, no me refiero al puntaje si no al número de solicitudes.

Artículos sobre la Velocidad de tu Sitio

Estos son algunos artículos relacionados con el tema de la velocidad en Wordpress

  1. Flying Scripts y Adsense: La Cura
  2. Reseña sobre Flying Scripts de WP Speed Matters
  3. Mejorar la Velocidad de WordPress: 22 Formas
  4. Lazy Loading y Adsense: La Cura
  5. Reseña sobre WP Fastest Cache
  6. Implementar Lazy Loading en WordPress
  7. Limpiar la Tabla wp_Options
  8. 5 Plugins de Cache para WordPress
  9. Reseña sobre Perfmatters