Optimiza las imágenes del renderizado del mayor elemento con contenido (LCP) con Jetpack Boost

La optimización de imágenes de LCP identifica y optimiza automáticamente las imágenes más importantes de las páginas principales de tu sitio web Páginas principales. Esta función analiza tus páginas principales, identifica sus imágenes principales (si procede) y aplica optimizaciones técnicas para que se carguen más rápido para tus visitantes.

La optimización de imágenes de LCP está disponible tanto en los planes gratuitos como en los de pago de Jetpack Boost. El plan gratuito permite optimizar una página principal, mientras que el plan Premium admite hasta diez.

¿Qué es el renderizado del mayor elemento con contenido (LCP)?MD

El renderizado del mayor elemento con contenido (LCP) es una métrica de Core Web Vitals que mide cuánto tarda en cargarse por completo el elemento de contenido visible más grande —como una imagen grande o un titular— en el navegador de un visitante.

Un LCP rápido da la impresión de que tu sitio es rápido y responde con agilidad. Un LCP lento, aunque los demás elementos se carguen rápido, puede hacer que tu sitio parezca lento a los usuarios.

Por qué es importante LCP para tu sitio webMD

Renderizado del mayor elemento con contenido (LCP) es una métrica de Core Web Vitals que mide cuánto tarda en cargarse el elemento de contenido visible más grande de tu página web.

• Los visitantes juzgan la velocidad de un sitio según lo rápido que aparece el contenido principal, no según cuándo termina de cargarse toda la página.
• Un LCP lento hace que tu sitio parezca lento, aunque los demás elementos se carguen rápido.
• Un LCP rápido hace que tu sitio parezca profesional y responda con agilidad.

Optimización para motores de búsquedaMD

• Como LCP es una métrica de Core Web Vitals, Google utiliza LCP como factor de posicionamiento en los resultados de búsqueda.
• Los sitios web con buenas puntuaciones de LCP (menos de 2,5 segundos) tienen un posicionamiento superior al de sus competidores más lentos.
• Las puntuaciones bajas de LCP pueden perjudicar tu visibilidad en las búsquedas orgánicas.

¿Qué hace que LCP sea lento?MD

Entre las causas habituales del bajo rendimiento de LCP se incluyen:

• Imágenes grandes sin optimizar.
• Imágenes sin una priorización de carga adecuada.
• Ausencia de técnicas para imágenes adaptables.
• Tiempos de respuesta del servidor lentos.
• Recursos que bloquean el renderizado.

¿Qué es la optimización de imágenes de LCP?MD

La optimización de imágenes de LCP es una función de Jetpack Boost que identifica los elementos visuales más importantes de tus páginas clave y aplica mejoras de rendimiento para que se carguen más rápido.

Se centra en la imagen más grande o en la imagen de fondo visible en la ventana del navegador cuando se carga una página —el elemento LCP—. Optimizar este elemento puede mejorar considerablemente tus puntuaciones de Core Web Vitals.

Activa la optimización de imágenes para LCPMD

Para activar la optimización de imágenes para LCP:

1. Ve a Jetpack → Boost en el panel de administración.
2. En Optimiza tu velocidad, amplía la sección Imágenes.
3. Activa el interruptor «Optimiza las imágenes para el renderizado del mayor elemento con contenido (LCP)».

Jetpack Boost analizará tus páginas principales y optimizará las imágenes relevantes para el renderizado del mayor elemento con contenido (LCP).

Cómo funciona la optimización de imágenes para el renderizado del mayor elemento con contenido (LCP)MD

Análisis automático de páginasMD

Esta función examina tus páginas principales para identificar:

• El elemento visual más grande que aparece en la ventana gráfica.
• Si se trata de una imagen estándar o de fondo.
• La estrategia de carga óptima para cada tipo de dispositivo (móvil/ordenador).

Optimizaciones técnicas aplicadasMD

Para elementos de imagen:

• Optimiza la imagen de LCP mediante el acelerador del sitio de Jetpack.
• Establece fetchpriority="high" para dar prioridad a la carga.
• Aplica loading="eager" para evitar retrasos por la carga diferida.
• Genera imágenes adaptables con los atributos srcset y sizes.
• Incluye compatibilidad con pantallas de alta densidad de píxeles.

Para elementos de imagen de fondo:

• Optimiza la imagen de fondo de LCP mediante el acelerador del sitio de Jetpack.
• Añade enlaces de precarga en la cabecera del documento.
• Implementa imágenes de fondo adaptables mediante CSS image-set().
• Aplica consultas de medios específicas para cada dispositivo.
• Utiliza reglas alternativas de CSS para garantizar una carga óptima.

Consulta el estado de optimización del renderizado del mayor elemento con contenido (LCP)MD

Después de activar Optimiza las imágenes para el renderizado del mayor elemento con contenido (LCP), Jetpack Boost analiza tus páginas principales. Mientras se ejecuta este proceso, Boost muestra Jetpack Boost está optimizando la página principal para el renderizado del mayor elemento con contenido (LCP)…

Cuando termina la optimización, Boost muestra cuándo se optimizaron por última vez las páginas y proporciona un enlace Optimizar que puedes usar para volver a ejecutar la optimización.

Si Boost no puede optimizar una o varias páginas, aparece un aviso: Problemas de optimización del renderizado del mayor elemento con contenido (LCP). Selecciona el enlace Ver los detalles para consultar las páginas afectadas y el motivo por el que no se pudo optimizar cada una.

Solución de problemas de optimización de imágenes para el renderizado del mayor elemento con contenido (LCP)MD

Para consultar la lista completa de problemas conocidos y sus soluciones, consulta Cómo solucionar problemas de optimización de imágenes para el renderizado del mayor elemento con contenido (LCP) en Jetpack Boost.

¿Sigues necesitando ayuda?MD

Por favor contacta con el equipo de soporte. Estaremos encantados de asesorarte.