Core Web Vitals en el diseño de sitios web (cómo mejorarlos)

¿Alguna vez su sitio web cayó en las clasificaciones de SEO y se quedó preguntándose qué salió mal? En tales casos, después de examinar los factores principales de SEO, como contenido de calidad, interconexión y vínculos de retroceso naturales, optimización móvil, etc., debe considerar buscar otro informe vital del sitio web: su Core Web Vitals.

Google utiliza señales de clasificación específicas para medir la confiabilidad, la eficiencia y la experiencia central del usuario del sitio web. Core Web Vitals son puntajes de experiencia de página que Google otorga a los sitios web. Estos son factores vitales que miden qué tan bien optimizado está su sitio y qué tan buena es la experiencia del usuario. Al diseñar su sitio web, asegúrese de que esté optimizado para estas métricas. De lo contrario, puede terminar dañando su clasificación en Google y también la experiencia general del usuario.

¿Demasiado técnico? En este artículo, hemos tratado de simplificar lo que significan los principales elementos vitales web de su sitio, cómo se ven afectados por el diseño de su sitio y cómo puede mejorarlos. Mejorar su puntaje de vitales web principal es crucial para la clasificación de su sitio, por lo que también puede buscar la ayuda de diseñadores web profesionales si parece demasiado difícil.

¿Qué son y por qué son importantes?

Google utiliza ciertos indicadores clave de rendimiento para medir la salud y la calidad de su sitio web. Estos se llaman Core Web Vitals. Junto con las señales de clasificación más antiguas, como la optimización de palabras clave, el contenido, los metadatos, etc., Google utiliza estos datos vitales web para determinar el rendimiento de su sitio web.

Core Web Vitals puede ayudarlo a mejorar considerablemente el rendimiento de sus resultados de búsqueda. Analizan la velocidad de carga de su sitio y la experiencia del usuario y le permiten a Google determinar qué tan bien está funcionando su sitio web. También lo ayudan a identificar áreas en las que se puede mejorar el diseño y la codificación de su sitio web. Hay específicamente 3 cosas que Core Web Vitals considera: tiempo de carga, estabilidad visual e interactividad. Estas métricas se denominan como:

• Pintura con contenido más grande (LCP)
• Cambio de diseño acumulativo (CLS)
• Primera demora de entrada (FID)

Estas métricas se pueden medir fácilmente con la ayuda de herramientas como Google Lighthouse, PageSpeed ​​Insights, GTMetrix y Reddico SERP Speed ​​Tool. Si su sitio web logra obtener una puntuación dentro de un umbral específico, puede recibir un impulso en la clasificación. Si no, sabrá dónde se requiere optimización. Repasemos estos términos.

Pintura con contenido más grande (LCP)

El LCP generalmente mide el rendimiento de carga de su sitio web desde el punto de vista de un usuario real. No es lo mismo que las medidas en las que usamos números para dar cuenta de la velocidad de carga de un sitio, como 2-3 segundos. Esta no es una medida precisa, ya que no todos los elementos de una página web se cargan a la misma velocidad. Algunos de los elementos más pesados, como imágenes y videos grandes, tardarán más en cargarse que el logotipo y el contenido.

Si un sitio tarda más de 4-5 segundos en cargarse, los visitantes generalmente se irán y buscarán un sitio más rápido. Si el tiempo de carga de la página es de unos 10 segundos, la tasa de rebote de la página aumenta hasta un 123 % (Google). Esto es lo que hace que LCP sea tan crucial para Core Web Vitals. LCP mide el tiempo necesario para que se cargue el elemento más grande de la página web, o más bien cuánto tarda una página en terminar de cargarse. Si su LCP cae por debajo de los 2,5 segundos, entonces no tiene de qué preocuparse. Si son 4 segundos o más, su página todavía necesita trabajo.

Para mejorar el LCP de tu página web, debes tener en cuenta los siguientes puntos:

• Se deben eliminar los scripts de terceros innecesarios, ya que pueden ralentizar considerablemente la página.
• Actualice a un servidor web que aumentará sus velocidades de carga.
• Si tiene un elemento grande en su página que no es tan importante, considere eliminarlo.
• El CSS voluminoso también puede causar tiempos de carga lentos.

Cambio de diseño acumulativo (CLS)

CLS mide la estabilidad visual, lo que significa qué tan estable es el diseño de su página y cómo se mueven los elementos. En otras palabras, CLS trata de analizar la estabilidad de los elementos que se cargan en la pantalla. A menudo puede suceder que los elementos de una página, como los botones y las imágenes, se desplacen a medida que se carga la página. Esto sucede cuando todavía se está cargando un fondo de gran tamaño. También puede ocurrir debido a los anuncios. Aunque los anuncios son el sustento de numerosos sitios web, a menudo pueden tardar bastante en cargarse. Algunas razones más comunes para una métrica CLS deficiente son iframes, imágenes y videos incrustados, contenido con script pesado, etc. Como resultado de esto, elementos como fuentes, texto, botones e imágenes se mueven por la página de forma aleatoria e inesperada, y Google lo marca como una experiencia de usuario deficiente.

La métrica CLS compara los marcos de su página web para medir el movimiento de los elementos. La severidad de los movimientos se calcula comparando los puntos individuales donde ocurre el cambio. Las puntuaciones de 0,1 e inferiores se consideran "buenas". Si su puntaje es más alto, considere lo siguiente:

• Incluya atributos de tamaño dentro de sus imágenes y videos.
• Puede usar cuadros de relación de aspecto CSS para especificar el espacio que requerirán las imágenes o los videos también. Esto permitirá que el navegador asigne la cantidad correcta de espacio para los elementos de inmediato, y no aparecerán repentinamente y eliminarán otro contenido.
• Evite que aparezca contenido nuevo sobre el contenido existente cuando un usuario interactúa.
• Agregue nuevos elementos a su página web debajo de todo el contenido existente.

Primera demora de entrada (FID)

FID mide la cantidad de tiempo necesario para que un usuario realmente pueda interactuar con su sitio. Hay un pequeño intervalo de tiempo entre el momento en que un usuario interactúa por primera vez con su página y el momento en que el navegador realmente comienza a procesar una respuesta a la interacción. Esta brecha se mide a través de FID. Google afirma que este tiempo debería ser de 100 ms o menos. Si su FID cae en el rango de 100-300 ms, entonces necesita trabajo. Si la puntuación es superior a 300, el rendimiento de su sitio se considera deficiente.

En palabras simples, FID mide la interactividad de su sitio. Esto incluye todo tipo de interacciones, desde seleccionar una opción de menú hasta hacer clic en un enlace o escribir algo en un campo (el desplazamiento y el zoom no se incluyen en esta categoría de métricas).

Cuando un navegador está ocupado, es posible que no pueda procesar rápidamente una solicitud o interacción del usuario, lo que genera latencia. Esto suele ocurrir cuando la página contiene una gran cantidad de código JavaScript que requiere ejecución. Para mejorar su FID, considere los siguientes puntos:

• Las tareas largas tienden a bloquear el subproceso principal, inhabilitándolo temporalmente para que no pueda procesar las entradas del usuario. Por lo tanto, debe dividir las tareas largas en otras más pequeñas y asincrónicas. Esto permitirá que el navegador procese las acciones del usuario entre estas tareas. Además, asegúrese de que el tiempo que toman estas tareas no supere los 50 ms.
• Minimice la cantidad de procesamiento posterior requerido en el lado del cliente. Esto reducirá considerablemente la carga en su navegador.
• Considere usar trabajadores web para reducir la carga en el subproceso principal.
• Elimine todos los scripts de terceros no críticos.

Herramientas y técnicas que puede utilizar

Aquí hay algunas herramientas y técnicas que lo ayudarán a resolver la mayoría de los problemas relacionados con los datos vitales básicos de la web.

• Consulta tu alojamiento. Con la ayuda de servidores web rápidos con mayor potencia de procesamiento, la mayoría de los problemas con LCP y FID deberían resolverse. Identifique qué tipo de alojamiento requiere su sitio y luego tome la mejor decisión.
• Configure el almacenamiento en caché para su sitio. WP Rocket es una gran herramienta que puede configurar esto para sitios web de WordPress con una molestia insignificante.
• Implementar la carga diferida. Esto garantiza que solo se cargue la parte visible de la página web en lugar de su totalidad. Esto mantendrá las velocidades de carga en su sitio web rápidas. WP Rocket y Autoptimize son buenas herramientas para configurar esto.
• Configure una CDN o red de entrega en la nube. Esto configura servidores virtuales en todo el mundo para su sitio web, lo que significa que personas de todo el mundo pueden visitarlo sin problemas de velocidad.
• Comprime tus imágenes. Si solo publica imágenes de muy alta calidad, su sitio tardará innecesariamente en cargarse. Use herramientas como ShortPixel e io para reducir el tamaño de las imágenes sin comprometer la calidad. Trate de usar imágenes en formato .webp, ya que son las más compatibles con la web.
• Limpie sus scripts y elimine los que no necesite. Si su sitio web es un poco más antiguo, es probable que tenga algunos complementos que ya no usa. Desinstalarlos y eliminarlos.
• Actualice a HTTPS si aún no lo ha hecho. Es mas rapido.

Conclusión

Si sigue todas las mejores prácticas de diseño de sitios web, teniendo en cuenta todos los puntos anteriores, sus puntajes se beneficiarán enormemente. Se trata de sus visitantes y su experiencia web. Mientras pueda seguir mejorando la experiencia de sus usuarios en nuestro sitio, no debería tener problemas para mantener un sitio web efectivo y exitoso.