Cómo optimizar el dibujo con la mayor cantidad de contenido y una clasificación más alta

Cómo medir la pintura más grande para el contenido de su sitio web

ejecutar un prueba de velocidad del sitio gratis para descubrir. La velocidad de su LCP se mostrará inmediatamente.

Los resultados de su prueba de velocidad le dirán si:

• Umbral de LCP alcanzado.
• Debe optimizar todos los demás Core Web Vital.

¿Cómo se calcula el dibujo con el mayor contenido?

Google observa el percentil 75 de experiencias: esto significa que el 25 % de los visitantes reales del sitio web experimentan un tiempo de carga de LCP de 3,09 segundos o más, mientras que el 75 % de los usuarios tienen un LCP de menos de 3,09 segundos.

En este ejemplo, el LCP para un usuario real se muestra como 3,09 segundos.

¿Cuáles son los resultados de las pruebas de laboratorio de mis métricas web centrales?

con esta prueba de velocidad de red específica, también verá métricas de laboratorio recopiladas en un entorno de prueba controlado. Aunque estas métricas no afectan directamente las clasificaciones de Google, estos datos tienen dos beneficios:

1. Las métricas se actualizan tan pronto como mejore su sitio web, mientras que los datos en tiempo real de Google tardarán 28 días en actualizarse por completo.
2. Obtiene informes detallados además de métricas que pueden ayudarlo a optimizar su sitio web.

Es más, Perspectivas de velocidad de página también proporciona datos de laboratorio, pero tenga en cuenta que los datos que informa a veces pueden ser engañosos debido a estrangulamiento simulado se utiliza para emular una conexión de red más lenta.

¿Cómo encuentras tu mayor atracción con el contenido?

Cuando ejecutas un prueba de velocidad de pagina con DebugBear, el elemento LCP se resalta en el resultado de la prueba.

A veces, un elemento LCP puede ser una imagen grande y, otras veces, puede ser una gran porción de texto.

Ya sea que su elemento LCP sea una imagen o un fragmento de texto, el contenido LCP no aparecerá hasta que su página comience a procesarse.

Por ejemplo, en la página siguiente, la imagen de fondo es responsable de la pintura más grande.

Por el contrario, el LCP de esta página es un párrafo de texto.

Para mejorar la representación del contenido más grande (LCP) en su sitio web, debe asegurarse de que el elemento HTML responsable del LCP aparezca rápidamente.

Cómo mejorar la imagen con más contenido

Para mejorar su LCP, debe:

1. Averigüe qué recursos se requieren para que aparezca el elemento LCP.
2. Vea cómo puede cargar estos recursos más rápido (o no cargarlos en absoluto).

Por ejemplo, si el elemento LCP es una foto, puede reducir el tamaño de archivo de la imagen.

Después de iniciar un Prueba de velocidad de DebugBearpuede hacer clic en cada métrica de rendimiento para ver más información sobre cómo se puede optimizar.

Los recursos comunes que afectan al LCP son:

• Recursos de bloqueo de procesamiento.
• Imágenes que no están optimizadas.
• Formatos de imagen obsoletos.
• Fuentes que no están optimizadas.

Cómo reducir los recursos que bloquean el renderizado

Recursos de bloqueo de procesamiento son archivos que deben descargarse antes de que el navegador pueda comenzar a dibujar el contenido de la página en la pantalla. Las hojas de estilo CSS suelen bloquear la representación, al igual que muchas etiquetas de secuencias de comandos.

Para reducir el impacto en el rendimiento de los recursos que bloquean el procesamiento, puede:

1. Identifique qué recursos están bloqueando la representación.
2. Revise si el recurso es necesario.
3. Revise si el recurso debe bloquear la representación.
4. Vea si el recurso se puede cargar más rápido, por ejemplo comprimiéndolo.

La manera fácil: En DebugBear pide una cascadalas solicitudes de recursos de bloqueo de procesamiento se marcan con una etiqueta de "Bloqueo".

Cómo priorizar y acelerar las solicitudes de imágenes LCP

Para esta sección, utilizaremos el nuevo atributo de imagen "fetchpriority" para ayudar a los navegadores de sus visitantes a identificar rápidamente qué imagen debe cargarse primero.

Utilice este atributo en su elemento LCP.

¿Por qué?

Cuando solo miran HTML, los navegadores a menudo no pueden decir de inmediato qué imágenes son importantes. Una imagen puede terminar siendo una gran imagen de fondo, mientras que otra puede ser una pequeña parte del pie de página de un sitio web.

En consecuencia, todas las imágenes se consideran inicialmente de baja prioridad hasta que se muestra la página y el navegador sabe dónde aparece la imagen.

Sin embargo, esto puede significar que el navegador comienza a descargar la imagen LCP bastante tarde.

el nuevo Consejos prioritarios El estándar web permite a los propietarios de sitios web proporcionar más información para ayudar a los navegadores a priorizar imágenes y otros recursos.

En el siguiente ejemplo, podemos ver que el navegador pasa mucho tiempo esperando, como lo indica la barra gris.

Seleccionaríamos esta imagen LCP para agregarle el atributo 'fetchpriority'.

Cómo agregar el atributo "FetchPriority" a las imágenes

Simplemente agregando el atributo fetchpriority=”high” a la etiqueta HTML img, el navegador priorizará la descarga de esa imagen lo más rápido posible.

<img src="https://www.searchenginejournal.com/optimize-largest-contentful-paint-debugbear-spcs/471883/photo.jpg" fetchpriority="high" />

Cómo utilizar los formatos de imagen modernos y dimensionar las imágenes de forma adecuada

Las imágenes de alta resolución a menudo pueden tener un tamaño de archivo grande, lo que significa que tardan mucho en descargarse.

En el resultado de la prueba de velocidad a continuación, puede ver esto mirando las áreas sombreadas en azul oscuro. Cada línea muestra parte de la imagen que llega al navegador.

Hay dos enfoques para reducir el tamaño de la imagen:

1. Asegúrese de que la resolución de la imagen sea lo más baja posible. Considere mostrar imágenes en diferentes resoluciones según el tamaño del dispositivo del usuario.
2. Usar moderno formato como WebP, que puede almacenar imágenes de la misma calidad en un tamaño de archivo más pequeño.

Cómo optimizar los tiempos de carga de las fuentes

Si el elemento LCP es un encabezado o párrafo HTML, es importante que la fuente de ese cuerpo de texto se cargue rápidamente.

Una forma de lograr esto es usar etiquetas de precarga que puede decirle al navegador que cargue las fuentes antes.

los fuente - pantalla: intercambio Una regla CSS también puede proporcionar una representación acelerada, ya que el navegador mostrará inmediatamente el texto en la fuente predeterminada antes de cambiar a la fuente web más adelante.

Supervise su sitio web para mantener LCP rápido

El monitoreo continuo de su sitio web no solo le permite verificar que las optimizaciones de LCP están funcionando, sino que también garantiza que reciba una alerta si su LCP se deteriora.

DebugBear puede monitorear Core Web Vitals y otras métricas de velocidad del sitio a lo largo del tiempo. Además de realizar extensas pruebas de laboratorio, el producto también realiza un seguimiento de las métricas de usuarios reales de Google.

Pruebe DebugBear con un prueba gratuita de 14 días.