Core web vitals ahora formará las métricas más importantes a través de las cuales Google evaluará el rendimiento del sitio web de un editor.

La experiencia del usuario Es uno de los aspectos clave para que un sitio web domine las páginas de resultados de los motores de búsqueda. Atrás quedaron los días en que los editores podían clasificar sus páginas web basándose en el relleno de palabras clave. Con cada paso Actualización del algoritmo central amplio de Google, los resultados de búsqueda se centran cada vez más en satisfacer la intención y la experiencia del usuario. Por lo tanto, los editores deben mejorar el rendimiento general de su sitio web para garantizar una experiencia de usuario positiva. 

Google tiene una variedad de herramientas para medir el rendimiento de una página. Pero a algunos editores les puede resultar desalentador utilizarlos de forma eficaz debido a su complejidad técnica. Para facilitar un poco las cosas a los editores, desarrolladores y especialistas en marketing, Google lanzó recientemente un conjunto de métricas de rendimiento llamado Vitales web. 

Entre los diferentes Web Vitals se encuentran Elementos fundamentales de la Web, métricas que más importan. En esta guía completa, hablaremos sobre Core Web Vitals y su importancia, cómo los editores pueden mejorar las puntuaciones de estas métricas y su futuro en la industria de la tecnología publicitaria. 

Core web vitals ahora formará las métricas más importantes a través de las cuales Google evaluará el rendimiento del sitio web de un editor.

La experiencia del usuario Es uno de los aspectos clave para que un sitio web domine las páginas de resultados de los motores de búsqueda. Atrás quedaron los días en que los editores podían clasificar sus páginas web basándose en el relleno de palabras clave. Con cada paso Actualización del algoritmo central amplio de Google, los resultados de búsqueda se centran cada vez más en satisfacer la intención y la experiencia del usuario. Por lo tanto, los editores deben mejorar el rendimiento general de su sitio web para garantizar una experiencia de usuario positiva.

Google tiene una variedad de herramientas para medir el rendimiento de una página. Pero a algunos editores les puede resultar desalentador utilizarlos de forma eficaz debido a su complejidad técnica.

Para facilitar un poco las cosas a los editores, desarrolladores y especialistas en marketing, Google lanzó recientemente un conjunto de métricas de rendimiento llamado Vitales web.

Entre los diferentes Web Vitals se encuentran Elementos fundamentales de la Web, métricas que más importan. En este blog, hablaremos sobre Core Web Vitals y su importancia, cómo los editores pueden mejorar las puntuaciones de estas métricas y su futuro en la industria de la tecnología publicitaria.

Después de mucha investigación, Google ha llegado a tres métricas que son de alta prioridad cuando se trata de medir cómo los usuarios interactúan con un sitio web: Carga, interactividad y estabilidad visual.

Las métricas que componen Core Web Vitals son:

1. Pintura con contenido más grande (LCP): cargando

2. Retraso de la primera entrada (FID) - interactividad

3. Cambio de diseño acumulativo (CLS): estabilidad visual

Como ya se mencionó, estas métricas son parte de un concepto más amplio llamado Web Vitals que también se centra en medir la experiencia del usuario. 

Core Web Vitals básicamente cuantifica la primera impresión que obtiene el usuario después de abrir un sitio web. Al utilizar estas métricas, los editores pueden comprobar cómo interactúan los usuarios con sus sitios. Esto beneficia a los editores porque si la participación del usuario es alta, los editores obtienen más oportunidades de optimizar sus ingresos publicitarios. 

Echemos un vistazo detallado a los tres Core Web Vitals.

Lighthouse presentó Largest Contentful Paint como una de las métricas de rendimiento principales en 2020

Más tarde, Google anunció LCP como un factor de clasificación importante y lo incluyó en Core Web Vitals. Como un Núcleo web vital métrica, LCP representa el 25% del puntaje de desempeño, lo que la convierte en una de las métricas más importantes a optimizar.

En esta sección, analizamos en profundidad Largest Contentful Paint y también aprendemos formas de optimizar las mejores puntuaciones de LCP:

¿Cuál es la pintura con contenido más grande?

LCP mide cuánto tiempo le toma a una página web mostrar el "elemento de contenido más grande" disponible en la página. En este caso, el contenido "más grande" podría ser cualquier cosa, incluido:

Un "elemento de contenido" es cualquier elemento HTML, como por ejemplo: 

• Un elemento de imagen

• un elemento de vídeo

• Un elemento SVGUn elemento con la imagen de fondo cargada a través de la función URL 

• , , , , u otros elementos a nivel de bloque

Según Google:

"LCP es una métrica importante centrada en el usuario para medir la velocidad de carga percibida porque marca el punto en la línea de tiempo de carga de la página en el que es probable que se haya cargado el contenido principal de la página; un LCP rápido ayuda a asegurar al usuario que la página es útil".

Primera pintura con contenido frente a la pintura con contenido más grande

Recientemente publicamos una publicación de 'Primera pintura contenta,' y algunos de ustedes se preguntarán en qué se diferencia del 'Pintura contenta más grande.' Entonces, aquí hay una explicación fácil para lo mismo:

Primera pintura con contenido: FCP mide cuánto tiempo tarda una página desde la carga inicial hasta que el primer contenido renderizado se muestra en la pantalla.

Pintura con contenido más grande: LCP mide el tiempo de renderizado de la imagen o bloque de texto más grande visible en la ventana gráfica, en comparación con el momento en que la página comenzó a cargarse.

¿Qué es una buena puntuación LCP?

Según las directrices de Google, una buena puntuación LCP debe ser inferior a 2.5 segundos. Esto garantiza una buena experiencia de usuario.

Los umbrales de LCP son los siguientes:

Bueno: LCP de 1200 milisegundos o menos (no hay nada que hacer aquí)

Necesita mejorar: LCP entre 1200 y 2400 milisegundos

Pobre = LCP superior a 2400 milisegundos.

¿Cómo medir la puntuación de pintura con contenido más grande?

Los webmasters o editores pueden realizar una prueba de pintura con contenido más grande utilizando las siguientes herramientas:

1. Informe de experiencia del usuario de Chrome;

2. PageSpeed ​​Insights;

3. Search Console (informe Core Web Vitals).

4. DevTools de Chrome.

5. Lighthouse .

Dado que LCP es una métrica aprobada por Google, podemos encontrar fácilmente la puntuación LCP en todas estas herramientas. 

Cómo mejorar el tiempo de la primera pintura con contenido (FCP):

Ahora que hemos entendido qué es FCP y por qué es importante, echemos un vistazo a cómo se puede mejorar el tiempo de FCP:

Elimine los recursos de bloqueo de renderizado:

Los recursos de bloqueo de renderizado son los archivos que se deben renderizar en un sitio web. Estos pueden incluir fuentes, archivos CSS, JavaScript y  HTML. Estos archivos se denominan "bloqueo de renderizado" porque tienen prioridad sobre otros elementos de la página (por ejemplo, las imágenes, el texto u otro contenido de cara al usuario). 

Este retraso crea un aumento repentino en LCP ya que los archivos de bloqueo de renderizado suelen ser de gran tamaño y ni siquiera contienen contenido del sitio. 

El tiempo de LCP se puede reducir si elimina recursos de renderizado de la ruta de renderizado crítica, difiere recursos no críticos o elimina JS innecesarios.

Eliminar CSS innecesario:

Si tiene archivos en sus hojas de estilo que no se utilizan, pero que requieren una velocidad significativa, no tiene sentido conservarlos. Por lo tanto, cualquier código antiguo o no utilizado debe eliminarse para que no afecte el tiempo de carga de su sitio. 

Minificar HTML, JavaScript y CSS:

La minificación de HTML, JavaScript y CSS puede reducir significativamente el tiempo de LCP de su sitio web. La minificación consiste en eliminar todos los caracteres adicionales, como los espacios, de los archivos CSS, HTML y JavaScript de su sitio. 

Si bien el espaciado ayuda a la legibilidad, los navegadores no los necesitan. De hecho, estos espacios ocupan bytes y minimizarlos disminuiría el tamaño de la página y mejoraría el tiempo de pintura del contenido inicial.

Optimizar el tamaño de la imagen:

Utilice siempre imágenes del tamaño adecuado. Puede utilizar un complemento optimizador de imágenes como SSmush o Hummingbird para reducir el tamaño de la imagen. Reducir el tamaño evita la sobrecarga, que puede generar un LCP alto. También puede utilizar una CDN de imagen para reducir el tiempo de LCP. 

Elige un buen servicio de hosting:

Su servicio de alojamiento también afecta el tiempo de carga de las páginas. Por lo tanto, pruebe con un buen proveedor de alojamiento que ofrezca una infraestructura adecuada para el tamaño y el volumen de acceso de su sitio.

En resumen:

Google considera Pintura contenta más grande ser parte relevante de Core Web Vitals.  Por lo tanto, es un parámetro vital a evaluar y los sitios deben lograr una buena puntuación en él.

Dado que LCP está relacionado con el tiempo de carga de la página, influye directamente en cómo Google clasifica un sitio en la página de resultados. La experiencia del usuario es un parámetro fundamental para que los sitios se encuentren en la web. Por eso no basta con tener productos atractivos, buena UX o contenido de calidad. Una buena puntuación LCP no sólo es favorable para el usuario sino que también garantiza que Google clasificará bien el contenido.

En 2019, Google anunció que clasificará los sitios web en función de dos métricas de rendimiento más: primera pintura con contenido y retraso en la primera entrada. Más tarde, Google introdujo tres Elementos fundamentales de la Web: Primer retardo de entrada, Cambio de diseño acumulativo.

En esta sección, hablaremos sobre First Contentful Paint, ya que sigue siendo una métrica importante de la experiencia del usuario y representa la puntuación de rendimiento general de un sitio web.

¿Qué es la primera partitura contenta?

La primera pintura de contenido de un sitio web es cuando el navegador recupera y representa el primer elemento DOM de la página. Los elementos de lienzo, imágenes o textos, elementos que no sean blancos y SVG se consideran contenido DOM.

En palabras simples, FCP es el tiempo que le toma a un usuario de un sitio web ver cualquier contenido en su navegador una vez que ha hecho clic en el enlace del sitio web. Por lo tanto, un FCP increíblemente rápido garantiza que los usuarios encuentren algo útil tan pronto como accedan a la página.

En esta sección, hablaremos sobre First Contentful Paint, ya que sigue siendo una métrica importante de la experiencia del usuario y representa la puntuación de rendimiento general de un sitio web.

En las partes anteriores de esta guía, es posible que haya encontrado el término "Retraso de la primera entrada". Si lo ha leído, quizás se pregunte cuál es la diferencia entre First Contentful Paint y First Input Delay.

DDiferencia entre la primera pintura con contenido y el primer retraso de entrada:

¿Alguna vez te has encontrado con una página donde el contenido cambia repentinamente? Sin previo aviso, el texto se mueve, hay espacios en blanco adicionales y has perdido tu lugar.

Probablemente haya tenido esa experiencia molesta debido al 'Cambio de diseño acumulativo'. Lighthouse introdujo el cambio de diseño acumulativo como una métrica de rendimiento en 2020.

Posteriormente, CLS también se convirtió en una de las métricas que componen Core Web Vitals.

En esta publicación de blog, aprenderemos qué es Cumulative Layout Shift (CLS), por qué es parte de la métrica Core Web Vitals, cómo sucede, cómo medirlo y cómo los webmasters pueden optimizarlo.

Para los no expertos, la primera pintura es cuando el navegador detecta un renderizado. Este render podría ser tan sutil como el color de fondo:

¿Alguna vez te has encontrado con una página donde el contenido cambia repentinamente? Sin previo aviso, el texto se mueve, hay espacios en blanco adicionales y has perdido tu lugar.

Probablemente haya tenido esa experiencia molesta debido al 'Cambio de diseño acumulativo'. Lighthouse introdujo el cambio de diseño acumulativo como una métrica de rendimiento en 2020.

Posteriormente, CLS también se convirtió en una de las métricas que componen Core Web Vitals.

En esta publicación de blog, aprenderemos qué es Cumulative Layout Shift (CLS), por qué es parte de la métrica Core Web Vitals, cómo sucede, cómo medirlo y cómo los webmasters pueden optimizarlo.

¿Cómo medir la primera pintura con contenido?

Los webmasters o editores pueden medir la primera pintura de contenido de su sitio web a través de múltiples herramientas que incluyen: 

1. Lighthouse

2. WebPageTest

3. DevTools de Chrome

4. PageSpeed ​​Insights

5. Informe de experiencia del usuario de Chrome

¿Cómo medir la primera pintura con contenido?

Según las directrices de Google, la primera pintura de contenido de una página web debe producirse en 1.8 segundos. Cuando una página web se carga en 2 segundos, garantiza una buena experiencia de usuario para los visitantes, ya que pueden acceder a la información más rápido. Si la primera imagen de contenido de un sitio web tarda más de 3 segundos en cargarse, se considera lenta.

Google califica el tiempo del FCP en tres categorías diferentes:

1. Bueno: entre 0 segundos y 1.8 segundos

2. Necesita mejorar: entre 1.8 segundos y 3 segundos

3. Deficiente: más de 3 segundos

Cómo mejorar el tiempo de la primera pintura con contenido (FCP):

Ahora que hemos entendido qué es FCP y por qué es importante, echemos un vistazo a cómo se puede mejorar el tiempo de FCP:

Elimine los recursos de bloqueo de renderizado:

Los recursos de bloqueo de renderizado son los archivos que se deben renderizar en un sitio web. Estos pueden incluir fuentes, archivos CSS, JavaScript y HTML. Estos archivos se denominan "bloqueo de renderizado" porque tienen prioridad sobre otros elementos de la página (por ejemplo, las imágenes, el texto u otro contenido de cara al usuario). 

Este retraso crea un aumento repentino en FCP ya que los archivos de bloqueo de renderizado suelen ser de gran tamaño y ni siquiera contienen contenido del sitio. El tiempo de FCP se puede reducir si elimina recursos de renderizado de la ruta de renderizado crítica, difiere recursos no críticos o elimina JS innecesarios. 

Reduzca el tiempo de respuesta del servidor:

TTFB o tiempo hasta el primer byte es el tiempo total que tarda un navegador en recibir el primer byte del contenido de una página. Si TTFB es menor, el tiempo de FCP también será menor. 

FCP = TTFB + Tiempo de renderizado + Tiempo de carga de contenido 

Como puede ver, FCP depende del TTFB. Por lo tanto, optimizar TTFB mejoraría automáticamente la puntuación FCP. Puede reducir el TTFB utilizando una CDN de calidad, habilitando el almacenamiento en caché para su sitio web y eligiendo un proveedor de alojamiento rápido. 

Remover CSS innecesario

Si tiene archivos en sus hojas de estilo que no se utilizan, pero que requieren una velocidad significativa, no tiene sentido conservarlos. Por lo tanto, cualquier código antiguo o no utilizado debe eliminarse para que no afecte el tiempo de carga de su sitio.

Minificar HTML, JavaScript y CSS

La minificación de HTML, JavaScript y CSS puede reducir significativamente el tiempo de FCP de su sitio web. La minificación consiste en eliminar todos los caracteres adicionales, como los espacios, de los archivos CSS, HTML y JavaScript de su sitio. Si bien el espaciado ayuda a la legibilidad, los navegadores no los necesitan. De hecho, estos espacios ocupan bytes y minimizarlos disminuiría el tamaño de la página y mejoraría el tiempo de pintura del contenido inicial. 

Dado que Google valora la velocidad de la página como una métrica de rendimiento importante, First Contentful Paint seguirá siendo una métrica importante para los sitios web. Tener un cronograma de FCP bajo no solo mantiene a los usuarios en su sitio, sino que también mejora la experiencia general del usuario. Estamos de acuerdo, el FCP puede ser una métrica difícil de concretar, pero un poco de optimización para reducir el FCP sin duda aumentará la UX y los tiempos de carga generales de su sitio. 

¿Alguna vez te has encontrado con una página donde el contenido cambia repentinamente? Sin previo aviso, el texto se mueve, hay espacios en blanco adicionales y has perdido tu lugar.

Probablemente haya tenido esa experiencia molesta debido al 'Cambio de diseño acumulativo'. Lighthouse introdujo el cambio de diseño acumulativo como una métrica de rendimiento en 2020.

Posteriormente, CLS también se convirtió en una de las métricas que componen Core Web Vitals.

En esta publicación de blog, aprenderemos qué es Cumulative Layout Shift (CLS), por qué es parte de la métrica Core Web Vitals, cómo sucede, cómo medirlo y cómo los webmasters pueden optimizarlo.

Entendamos esta métrica de rendimiento desglosándola:

Acumulativo: Significa un aumento en la cantidad.

En el cierre

Actualmente, recomendamos a los editores que se familiaricen lo más posible con Core Web Vitals y Web Vitals. Cuanto antes aprendan a optimizar sus sitios web para brindar la mejor experiencia de usuario posible, mejor será para ellos cuando Google realmente se mude.

La buena noticia es que los editores ahora pueden tener conocimientos cuantificados sobre el rendimiento de sus páginas. Además de esto, reciben orientación sobre cómo solucionar problemas que obstaculizan la experiencia del usuario de sus páginas. Todo esto ayudará a los editores a mejorar la participación de los usuarios en su sitio web, aumentar el tráfico y obtener más ingresos.

Una vez que los editores completen la tarea de comprender detalles importantes sobre Core Web Vitals, verán que estas métricas resultarán de gran utilidad.