s.p. digital icon s.p. Digital slogan

Formas de mejorar Core Web Vitals para sitios web Con Rendimiento Malo

improve core web vitals score

En julio, Google actualizó el algoritmo, incluida la actualización de Core Web Vitals, aunque no está confirmado que una puntuación alta obtenida en las pruebas clasifique mejor en la búsqueda de Google.

Entonces, ¿por qué Core Web Vitals debe ser evaluado a pesar de que no se explica como una de las señales en la clasificación en la búsqueda de sitios?

La publicación de un sitio web no se dirige automáticamente a los motores de búsqueda para obtener una mejor posición, sino más bien, cómo el sitio puede proporcionar una gran experiencia a los visitantes tanto en términos de diseño web, buena presentación de contenidos con imágenes ilustrativas para aumentar la satisfacción con el contenido presentado y tener un acceso rápido a las páginas web.

La pregunta habitual es, ¿qué elementos o métricas deben tenerse en cuenta para que el sitio web desarrollado obtenga una buena puntuación por parte de la auditoría de Core Web Vitals?

Según Core Web Vitals hay 4 métricas principales, a saber:

  • LCP (Large Contentful Paint) que se refiere al tiempo que tarda la página en renderizar el elemento visible más grande.
  • FID (First Input Delay): El tiempo que tarda la página en empezar a responder a las acciones del usuario.
  • CLS (Vumulative Layout Shift): El desplazamiento de la IU de la página durante la carga de la misma.
  • INP (Interaction to Next Paint): El tiempo que tarda la página en responder a la interacción con el usuario.

En esta ocasión nos centraremos en hablar de LCP, es decir, cómo hacer que una página web recién creada cuando se publica y la prueba obtiene una buena puntuación de acuerdo con el rango de valores establecido en la documentación de Google Search Central, a saber:

  • LCP Buena: <=2,5detik
  • LCP Necesita mejoras: <=4 detik
  • LCP Pobre: >4 second

Mejorar los elementos del sitio web para obtener un buen LCP, es decir:

1. Utilizar formatos de imagen modernos

La mayoría de los programadores web sin conocimientos de SEO ignorarán los resultados de las pruebas de rendimiento web porque añadirán trabajo y llevarán tiempo. A diferencia del caso de los programadores que entienden los fundamentos del SEO, con todos sus esfuerzos, lo implementarán para que el sitio web resultante obtenga una buena valoración por parte de los consumidores y usuarios del sitio web en el futuro. El formato de imagen moderno es WebP, que es compatible con los navegadores modernos. El formato Webp se recomienda para sitios web en lugar de .jpg porque tiene un tamaño de archivo más pequeño

2. Utilizar imágenes con capacidad de respuesta

Las imágenes responsivas indican al navegador que existen varias opciones de imagen, y el navegador presentará una imagen que se ajuste a la pantalla utilizada para visitar el sitio web. El elemento utilizado es el atributo srcset del elemento img, por ejemplo:

Las páginas web utilizan el elemento o el atributo srcset del elemento img para especificar imágenes responsive. Sin embargo, algunos navegadores y rastreadores necesitan ayuda para entender este atributo. Siempre debe especificar la URL alternativa mediante el atributo src.

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="flowers.webp">
  <img src="flowers.png" alt="flowers">
</picture>

 Or

<img
  srcset="flowers-320w.jpg 320w, flowers-480w.jpg 480w, flowers-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="flowers-800w.jpg"
  alt="flowers">

3. Eliminar Scripts y Stylesheets no utilizados.

Si la etapa de desarrollo del sitio web utiliza un marco de trabajo front-end, es importante ser eficiente para que los scripts o archivos CSS que no se necesiten en el proceso de renderizado de la página no sobrecarguen el proceso de carga. Esta etapa es la más difícil de realizar, ya que requiere trabajo adicional.

4. Minificar y comprimir scripts y CSS

Los scripts de gran tamaño pueden minimizarse minificando el script o el estilo CSS para que el tiempo de descarga no interfiera en el proceso de renderizado de los elementos del sitio web.

5. Aplazar CSS no crítico

En el proceso de renderizado de elementos primarios se necesitan Scripts y Stylesheets separados que deben descargarse al principio, y los estilos pueden descargarse una vez finalizado el proceso de renderizado, diferir CSS no crítico puede aumentar el proceso de renderizado de la página web.

Resumen

La reparación de sitios web que tienen problemas con LCP es compleja y en ella influyen muchos factores. Debe tenerse en cuenta para los clientes que quieren crear un sitio web a considerar la elección de una agencia de servicios de desarrollo de sitios web SEO amigable con un buen rendimiento para que los usuarios obtengan la máxima experiencia.