Una introducción a Core Web Vitals de PageSpeed

Barış Ünver es el fundador de Optimocha, un servicio personalizado de optimización de velocidad de WordPress y propietario de Complemento Speed ​​​​Booster Pack .

Desde su

actualización del algoritmo en junio 2021, Google efectivamente ve la experiencia de la página como un factor importante en términos de SEO. Y una de las partes más críticas de esta "Actualización de la experiencia de la página" es lo que Google llama Core Web Vitals .

En esta publicación, repasaremos qué es y comprenderemos por qué cada métrica es importante.

¿Qué es “Core Web Vitals”?

Core Web Vitals

Core Web Vitals
Crédito de la imagen:
web.dev

Combine esta información con el anuncio de Google acerca de que CWV es un factor de clasificación en SERPs, y puede concluir que LCP, FIDy CLS son las métricas de UX más importantes para SEO, según Google.

Una nota sobre FID, de Google : "FID requiere un usuario real y, por lo tanto, no se puede medir en el laboratorio. Sin embargo, la métrica del tiempo total de bloqueo (TBT) es medible en laboratorio, se correlaciona bien con FID en el campo y también captura problemas que afectan la interactividad. Las optimizaciones que mejoran TBT en el laboratorio también deberían mejorar FID para sus usuarios”.

Profundicemos un poco más en cada métrica.

La mayor pintura con contenido (LCP)

Core Web Vitals

Core Web VitalsCrédito de la imagen: web.dev Como sugiere su nombre, esta métrica mide la velocidad de carga del elemento más grande (en píxeles) con contenido dentro de la ventana gráfica. Google decide que este es el mayor indicador de la velocidad percibida de una página, y en su mayoría tienen razón: cuando se carga el elemento más grande, como un párrafo o una imagen destacada, nuestro cerebro percibe que la página está cargada y disponible para nosotros.

Mejorar LCP se trata principalmente de eliminar los bloqueos de procesamiento y diferir las descargas de activos (CSS, JS, imágenes, fuentes, etc.). Esta es la razón por la cual la minimización de activos y el empleo de métodos como CSS crítico, carga diferida y aplazamiento de JavaScript son cruciales para esta métrica.

Retardo de primera entrada (FID) y Tiempo total de bloqueo (TBT)

CLS

Credito de imagen: web.dev

  • Esta es probablemente la métrica más difícil de entender y la más difícil de mejorar de las tres. (Parece que incluso Google tuvo dificultades para encontrar formas de medir esto, por lo que también podemos decir que es el más difícil de medir).

    Incluso los expertos en optimización del rendimiento más experimentados pueden tener dificultades para explicar esto, así que perdóname si te estoy diciendo tonterías.

    Para que un visitante interactúe con la página, si el "principal thread” del navegador (que básicamente está analizando toda la página web) toma más tiempo que 50 milisegundos, Google considera el principal subproceso "bloqueado" y etiqueta el proceso como "Tarea larga".

    Mide las duraciones de las tareas del subproceso principal (menos 50 ms para cada tarea) y lo resume para llamarlo "tiempo total de bloqueo". Mejorar esta métrica es crucial para que un usuario interactúe con la página lo antes posible, y de eso se trata el "retraso en la primera entrada".

    ¿Complicado? Absolutamente. Difícil de mejorar? tu apuesta Pero, ¿puede hacerse? N—sí. Sin embargo, requiere una eliminación despiadada del uso de JavaScript, por lo que las herramientas de análisis, píxeles de seguimiento, barras de consentimiento de cookies, widgets de chat en vivo y otras cosas perjudican dramáticamente estas dos métricas.

    Desplazamiento de diseño acumulativo

  • LCP

    Credito de imagen:
    web.dev
  • ¿Alguna vez quisiste tocar un botón de menú, solo para darte cuenta de que tocaste un anuncio que apareció de la nada en la fracción de segundo que decidiste tocar y tocar? Eso es lo que es un cambio de diseño; y "cambio de diseño acumulativo" es (obviamente) la suma de todos los cambios de diseño en esa carga de página.

    Mejorar CLS tiene que ver con mejorar el rendimiento de los elementos de la mitad superior de la página. Precargar imágenes y fuentes, asignar espacios vacíos para anuncios, CSS crítico y cosas como estas contribuyen a una mejor medición de CLS.

    (Personalmente, no creo que esto esté relacionado en absoluto con la optimización del rendimiento de una página; ¡quiero decir que ni siquiera es una medida basada en el tiempo! Por lo tanto, no estoy de acuerdo con Google acerca de que esto sea una "Velocidad de página ”, pero definitivamente es una métrica importante para mejorar la experiencia del usuario.)

    Conclusión: cómo abordar PageSpeed ​​y Core Web Vitals

    En este momento, en la versión 8 de Lighthouse, estas tres métricas conforman 75% de la puntuación de PageSpeed ​​de esa página (fuente). Sin embargo, como dice Google (en la cita anterior), PageSpeed ​​está en constante evolución; por lo que puede esperar que esto cambie en el futuro.

    ¡Y tenga en cuenta que las puntuaciones de PageSpeed ​​son cada vez más insignificantes! Debe recordar que si está tratando de optimizar su sitio web para mejorar su clasificación SERP, Core Web Vitals es el único conjunto de métricas que debe vigilar. Obsesionado con tener 88% de las puntuaciones de PageSpeed ​​para todas sus páginas no solo no tiene sentido, sino que también es perjudicial.

    Para obtener más información sobre cómo optimizar su sitio web, dirígete a Optimocha.com y no dudes en ponerte en contacto con Barış Ünver en LinkedIn.

    Entradas relacionadas

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

  • Subir

    Utilizamos cookies para asegurarnos de brindarle la mejor experiencia en nuestro sitio web. Si continúa utilizando este sitio, asumiremos que está satisfecho con él. Más información