Cómo Optimizar La Entrega De Imágenes Y El LCP En Una Página En Vivo

Comprensión de la Entrega de imágenes y el LCP

Comprender la Entrega de Imágenes y el LCP es fundamental si desea mejorar la velocidad de carga de su página.

¿Qué es la Entrega de Imágenes?

La Entrega de Imágenes hace referencia a un sistema o infraestructura diseñado para optimizar, transformar y entregar imágenes de manera eficiente a los usuarios finales en diferentes dispositivos y condiciones de red.

Un sistema de entrega de imágenes generalmente combina:

• Una Red de Distribución de Contenido (Content Delivery Network o CDN) para el almacenamiento en caché global y la entrega rápida
• Procesamiento de imágenes en tiempo real (redimensionamiento, compresión, conversión de formato)
• Optimización adaptada al dispositivo y al área de visualización (viewport)

Las imágenes suelen representar entre el 50 y el 70% del tamaño total de la carga útil de una página. Cuando las imágenes no están correctamente optimizadas, se convierten en una de las principales causas de:

• Tiempo de carga lento
• Puntuaciones deficientes en las Core Web Vitals
• Alto consumo de ancho de banda
• Menor participación de los usuarios
• Tasas de conversión más bajas

Una entrega eficaz de imágenes garantiza que los usuarios descarguen únicamente el tamaño de imagen necesario para su dispositivo y viewport, sin sacrificar la calidad visual.

¿Qué es la Pintura de Mayor Contenido (Largest Contentful Paint o LCP)?

La Pintura de Mayor Contenido (Largest Contentful Paint o LCP) es una de las métricas de Core Web Vitals de Google. Mide el tiempo transcurrido desde la navegación a la página hasta que el elemento visible más grande dentro del viewport queda completamente renderizado.

En la mayoría de los casos, el elemento de LCP es:

• Una imagen de banner héroe
• Una imagen de producto de gran tamaño
• Un bloque promocional destacado
• Un bloque de texto de gran tamaño

Dado que el elemento LCP es frecuentemente una imagen, el manejo ineficiente de imágenes - como archivos de gran tamaño, ausencia de precarga, solicitudes tardías o falta de compresión - aumentará directamente el tiempo de LCP.

Optimizar la entrega de imágenes desempeña un papel fundamental en:

• Mejorar la velocidad de carga percibida
• Lograr mejores posicionamientos en los motores de búsqueda
• Aumentar la participación de los usuarios
• Impulsar conversiones más altas

Cómo optimizar la Entrega de Imágenes y el LCP

Existen dos formas principales de optimizar la Entrega de Imágenes y mejorar el LCP en GemPages: ajustar la calidad de la imagen a nivel de elemento y configurar el comportamiento de carga a nivel de página. A continuación, repasaremos cada método paso a paso.

1. Configurar los ajustes del elemento de imagen en el Editor

GemPages ofrece un ajuste de Calidad que le permite controlar cómo los archivos de imagen son renderizados y entregados en la página en vivo. Este ajuste forma parte de la sección Optimizar LCP dentro del panel de configuración del elemento.

Para acceder:

• Abra su página en el Editor de GemPages
• Seleccione un elemento relacionado con imágenes
• Vaya a la barra lateral izquierda
• Desplácese hacia abajo hasta la sección Optimizar LCP .

Esta configuración afecta directamente el tamaño de la variante de imagen solicitada por el navegador, lo que repercute en el rendimiento de la entrega de imágenes y en el LCP.

Tenga en cuenta que el ajuste de Calidad solo funciona bajo las siguientes condiciones:

• La imagen debe estar alojada en la CDN de Shopify (es decir, debe haber sido subida a través de Shopify).
• El elemento utilizado debe ser uno de los siguientes:
  • Imagen
  • Imagen de Producto
  • Comparación de imágenes

Cómo funciona el ajuste de Calidad:

El ajuste de Calidad determina el ancho de la variante de imagen que se solicitará en función del ancho del viewbox del elemento (el ancho real al que la imagen se muestra dentro del diseño de su página).

Opciones disponibles:

• De mayor calidad: El sistema carga el archivo de imagen original subido sin redimensionarlo.  
• Alta: El sistema solicita una variante de imagen con un tamaño de XNUMX × ancho del viewbox.
• Media: El sistema solicita una variante de imagen con un tamaño exactamente de XNUMX × ancho del viewbox.
• Personalizada: El sistema calcula el tamaño de imagen solicitado utilizando esta fórmula: Ancho del viewbox × X% (relación definida por el usuario; se recomienda un valor predeterminado del 100 %).

Por ejemplo, si la imagen subida tiene 2000 px de ancho y el Viewbox tiene 400 px de ancho, el tamaño de imagen solicitado variará según la opción seleccionada:

• Máxima => carga el archivo de imagen original (2000 px)
• Alta => Carga una variante de imagen con ancho = × 400 1.5 = 600px
• Media: Carga una variante de imagen con ancho = × 400 1 = 400px
• Personalizada: 200 % → Carga una variante de imagen con ancho = × 400 2 = 800px

Caso 1: En el editor, seleccione el elemento Imagen, en la barra lateral izquierda, desplácese hacia abajo hasta Optimizar LCP y configure Calidad = máxima, tanto en modo escritorio como en modo móvil:

La página en vivo: carga el archivo de imagen original.

Probamos el rendimiento de esta página y el resultado fue:

La entrega de imágenes necesita mejorar:

Caso 2: En el editor, seleccione el elemento Imagen, en la barra lateral izquierda, desplácese hacia abajo hasta Optimizar LCP y configure Calidad = Media, tanto en modo escritorio como en modo móvil:

La página en vivo: carga una variante de imagen con ancho = 500 px × 1 = 500 px.

A continuación, probamos el rendimiento de esta página y el resultado mostró una puntuación de rendimiento más alta, y la entrega de imágenes mejoró:

¿Qué podemos aprender de esto?

Cargar el archivo de imagen original puede aumentar innecesariamente el tamaño del archivo, especialmente cuando el tamaño de visualización es mucho menor que la imagen subida.

Configurar la Calidad a una relación Personalizada razonable garantiza que el tamaño de la imagen coincida con el ancho de visualización real. Esto reduce el tamaño del archivo, mejora la velocidad de carga y ayuda a optimizar el LCP sin afectar la calidad visual.

El ajuste Optimizar LCP se configura de la misma manera para los elementos Imagen de Producto y Comparación de imágenes .

2. Otras configuraciones

Además de ajustar Optimizar LCP a nivel de elemento, puede mejorar aún más la Entrega de Imágenes y el Largest Contentful Paint (LCP) controlando cómo se cargan las imágenes durante el renderizado inicial de la página.

Estas optimizaciones se centran en cuándo y cómo el navegador solicita las imágenes críticas.

Desactivar "Carga diferida de imágenes" (Lazyload Image)

¿Qué es la carga diferida (Lazy Load)?

La carga diferida es una técnica que retrasa la carga de imágenes hasta que están cerca de entrar en el viewport del usuario (el área visible de la pantalla). En lugar de cargar todas las imágenes de inmediato cuando la página comienza a renderizarse, el navegador solo carga las imágenes a medida que el usuario se desplaza.

<img draggable="false" role="img" class="emoji" alt="" src="https://s.w.org/images/core/emoji/17.0.2/svg/1f449.svg"> Puede obtener más información sobre la carga diferida en este artículo: Configuración de publicación – Carga diferida de imágenes

Desactivar la carga diferida para las imágenes críticas garantiza que:

• Las imágenes dentro del viewport inicial se soliciten de inmediato
• El navegador priorice la obtención de la imagen LCP
• El renderizado de los hero banners o las imágenes de productos destacados no se retrase

Esto es especialmente importante porque en la mayoría de las páginas de comercio electrónico o páginas de aterrizaje, el elemento LCP es típicamente:

• Una imagen de banner héroe
• Una imagen de producto de gran tamaño
• Un bloque promocional destacado

Si dichas imágenes se cargan de forma diferida, el navegador espera hasta que el cálculo del diseño esté completo antes de iniciar la solicitud, lo que retrasa directamente el LCP.

Activar "Carga diferida de secciones" (Lazyload Section)

¿Qué es la carga diferida de secciones?

La Carga diferida de secciones es un ajuste de rendimiento que retrasa el renderizado de secciones enteras que están fuera del viewport inicial (por debajo del pliegue).

En lugar de controlar la carga de imágenes de forma individual, este ajuste funciona a nivel estructural — lo que significa que toda la sección (incluidas sus imágenes, texto, scripts y estructura de diseño) se aplaza hasta que el usuario se desplaza cerca de ella.

<img draggable="false" role="img" class="emoji" alt="" src="https://s.w.org/images/core/emoji/17.0.2/svg/1f449.svg"> Puede leer más en nuestro artículo del Centro de ayuda: Activar la Carga Diferida (Lazyload) y la Precarga (Preload) de Secciones e Imágenes

Cuando está activado:

• Las secciones fuera del viewport inicial no se renderizan ni se solicitan durante la primera carga
• El tamaño del DOM en el renderizado inicial se reduce (Document Object Model – representa el árbol estructurado de elementos HTML que el navegador construye al cargar una página).
• Menos solicitudes de red compiten por el ancho de banda
• La carga de trabajo del hilo principal disminuye

Esto mejora:

• Tiempo hasta el primer pintado (First Contentful Paint o FCP): el contenido visible aparece antes
• Estabilidad del LCP: los elementos críticos no compiten por los recursos
• Capacidad de respuesta general de la página: una interacción inicial más fluida

En términos simples:

• Mantenemos la carga inmediata del contenido visible
• Aplazamos la complejidad del contenido situado por debajo del pliegue

Este método garantiza que el navegador priorice lo que los usuarios ven primero, mientras pospone el contenido que no se necesita de inmediato.

Activar "Precarga de secciones" (Preload Section)

¿Qué es la precarga de secciones?

La Precarga de secciones es un ajuste de rendimiento que indica al navegador que priorice la carga de las secciones visibles dentro del viewport inicial. Para obtener más información, consulte: Característica de Optimización de Página

Cuando la Precarga de secciones está activada:

• Todas las secciones dentro del viewport (no solo la primera sección) se priorizan
• El navegador comienza a obtener sus recursos críticos antes
• Las diferencias de viewport entre escritorio y móvil se gestionan correctamente

Sin la lógica de precarga, los navegadores normalmente priorizan solo la primera sección. Otras secciones que aún son visibles por encima del pliegue pueden solicitarse más tarde, después de que se completen los pasos de diseño y renderizado. Esto puede retrasar la carga de las imágenes e impactar directamente en el LCP.

Esto es especialmente importante para los diseños responsivos donde:

• El viewport de escritorio puede contener entre 2 y 3 secciones por encima del pliegue
• La estructura del viewport móvil difiere significativamente
• La precarga garantiza que el contenido adaptado al viewport se trate como de alta prioridad en todos los puntos de ruptura.

Por qué esta combinación funciona

El objetivo no es desactivar o activar todo de una vez. La optimización del rendimiento funciona mejor cuando el comportamiento de carga se coordina de forma estratégica.

Un enfoque eficaz incluye:

• Do No cargar de forma diferida las imágenes críticas → proteger el LCP
• Cargar de forma diferida las secciones no visibles → reducir el costo de carga inicial
• Precargar todas las secciones del viewport → alinear la prioridad de red con la prioridad visual

Esto garantiza que lo que los usuarios ven primero cargue de inmediato, mientras que el contenido no crítico espera.

Probamos una página de producto con la siguiente configuración:

• La imagen tiene calidad = máxima
• La lista de productos contiene elementos de imagen de producto, calidad = máxima
• Carga diferida de imágenes is ON
• Carga diferida de secciones is OFF
• Precarga de secciones está desactivada

→ El resultado es:

Como puede observar, la entrega de imágenes necesita mejorar, porque el tiempo de descarga de las imágenes es largo:

A continuación, reconfiguramos la página utilizando la estrategia recomendada:

• Configurar el elemento de ajuste que contiene imágenes en el Editor: Imagen, Imagen de producto; configurar Calidad = media
• Carga diferida de imágenes is OFF
• Carga diferida de secciones is ON
• Precarga de secciones is habilitada

Después de aplicar todos los cambios, hicimos clic en Publicar en el editor de páginas para actualizar la página en vivo.

A continuación, volvimos a probar el rendimiento de esa página. El resultado ha cambiado: el rendimiento de esta página está optimizado.

La entrega de imágenes es mejorada:

Conclusión final

La optimización del rendimiento no consiste en activar o desactivar un único ajuste.

Se trata de:

• Servir imágenes del tamaño adecuado
• Cargar el contenido visible de inmediato
• Aplazar el contenido no crítico de forma inteligente
• Priorizar los recursos en función de lo que los usuarios realmente ven

Cuando estas estrategias funcionan en conjunto, tanto la Entrega de imágenes como el LCP mejoran de forma consistente en todos los dispositivos, especialmente en páginas con muchas imágenes como páginas de productos y páginas de aterrizaje.