El sitio web independiente carga lentamente: ¿cómo diagnosticar problemas de carga de imágenes?

La carga lenta de un sitio web independiente suele llevar a revisar las imágenes, pero no conviene comprimirlas todas en cuanto se observa que la página contiene muchas. Una imagen grande de la parte superior que tarda demasiado en descargarse, una solicitud de imagen que el navegador detecta tarde, una conexión deficiente desde nodos en el extranjero o incluso una respuesta lenta del servidor pueden hacer que el usuario sienta que «las imágenes no terminan de aparecer». Primero identifique qué imágenes ralentizan la página y en qué etapa se produce la demora; después decida si debe modificar los archivos, el código de la página o revisar la cadena de entrega.

Para los responsables de la evaluación técnica, un diagnóstico eficaz debe responder a tres preguntas: qué imagen es lenta, si el tiempo se consume antes de iniciar la solicitud o durante la transferencia, y si, tras la optimización, los usuarios del mercado objetivo realmente ven antes el contenido principal.

Confirme primero si las imágenes son el principal cuello de botella

Abra el panel Network de las herramientas para desarrolladores de Chrome y marque la opción para deshabilitar la caché. Registre las solicitudes durante la carga de la página; después de probar una primera visita, vuelva a probar con la caché activada para distinguir la experiencia con la caché fría de la de las visitas posteriores. Filtre las solicitudes por tipo de imagen y revise el tamaño del archivo, la hora de inicio de la solicitud, la duración y el gráfico de cascada. Realice las pruebas en condiciones de red similares a las de los usuarios objetivo y revise tanto la versión de escritorio como la móvil.

Ejecute también Lighthouse o PageSpeed Insights y consulte los diagnósticos relacionados con Largest Contentful Paint (LCP). Si el elemento LCP es una imagen de la parte superior y aparece muy tarde, ya tiene un punto de partida claro para la investigación. Si el elemento LCP es texto o el propio HTML o los scripts responden lentamente, optimizar las imágenes aún puede ser útil, pero quizá no resuelva la lentitud de la carga inicial.

No se fije únicamente en la duración total de la solicitud. Haga clic en la imagen sospechosa, consulte Timing y use el gráfico de cascada para determinar lo siguiente:

• La solicitud empieza tarde: es posible que la imagen solo se detecte después de que JavaScript la renderice o que se haya configurado incorrectamente para la carga diferida.
• El tiempo de espera de respuesta es largo: revise el servidor de origen de la imagen, el estado de la caché de la CDN y la conexión de red desde la región objetivo.
• La descarga del contenido tarda mucho: evalúe el tamaño real transferido junto con el ancho de banda de la red y las dimensiones de la imagen; dé prioridad a los archivos grandes.
• La imagen tarda en mostrarse incluso después de descargarse: revise la decodificación de la imagen, las tareas del hilo principal y si los estilos o scripts de la página bloquean el renderizado.

El tamaño transferido que aparece en el panel Network no siempre coincide con el tamaño del archivo original de la imagen. Compruebe también si hay redirecciones, reintentos tras fallos, aciertos de caché y solicitudes duplicadas de la misma imagen desde distintas direcciones. En sitios web independientes orientados al extranjero, conviene repetir las pruebas en las principales regiones de los clientes o mediante nodos de prueba locales; de lo contrario, los resultados obtenidos localmente pueden ocultar problemas de acceso entre regiones.

Revise las dimensiones, el formato y el uso real de las imágenes

Empiece por la imagen principal de la parte superior, las imágenes grandes de las páginas de detalle de producto y los banners para móviles. Estas imágenes pueden consumir mucho tráfico y, además, afectan directamente al tiempo que tarda el usuario en ver el contenido principal. Consulte en el navegador las dimensiones de visualización reales de las imágenes y las dimensiones de los recursos: si la página solo muestra una miniatura pequeña de un producto, pero descarga la imagen original de alta resolución, genere una versión adecuada para ese espacio en lugar de limitarse a aumentar la compresión.

Las páginas adaptables pueden usar srcset y sizes para ofrecer distintos tamaños y permitir que el navegador elija el recurso en función de la maquetación y las características del dispositivo. Si la composición de la imagen difiere considerablemente entre móviles y equipos de escritorio, también puede utilizar picture para proporcionar imágenes distintas. Al revisar la configuración, compruebe que sizes coincida con la maquetación real; de lo contrario, el navegador podría seguir seleccionando un archivo demasiado grande.

El formato debe elegirse en función del contenido de la imagen y los requisitos de compatibilidad. Para fotografías e imágenes reales de productos, evalúe WebP o AVIF; si el material necesita un fondo transparente, compruebe también la compatibilidad del formato elegido y de las herramientas de procesamiento. Mantenga una alternativa compatible y compare el tamaño del archivo convertido, la calidad de imagen y el rendimiento de decodificación. Un formato más reciente no garantiza que todas las imágenes ocupen menos; en especial, revise después de la compresión los bordes del texto, las texturas de los productos y los logotipos de marca.

La presentación de productos también tiene requisitos comerciales: las miniaturas de las listas pueden tener dimensiones reducidas, pero las ampliaciones parciales en las páginas de detalle, las texturas de los materiales y las etiquetas de modelo necesitan suficiente nitidez. Genere por separado miniaturas, imágenes de detalle e imágenes ampliables según su uso. Así evitará utilizar una sola imagen original en todos los espacios y perder información que el personal de compras necesita identificar para ahorrar tráfico.

Priorice la parte superior de la página y cargue bajo demanda las imágenes fuera de pantalla

El navegador debe detectar cuanto antes la imagen LCP de la parte superior. Procure que la dirección de la imagen aparezca directamente en el HTML inicial, en lugar de insertarla solo después de ejecutar un script. No aplique loading="lazy" a esta imagen. Una vez confirmado que se trata de un recurso clave, puede evaluar el uso de fetchpriority="high" para indicar al navegador que le asigne mayor prioridad. Sin embargo, no asigne alta prioridad a varias imágenes a la vez, ya que podrían competir por el ancho de banda con recursos esenciales como las fuentes y las hojas de estilo.

Si la imagen grande de la parte superior se carga como fondo CSS, el navegador suele tener que obtener y analizar primero los estilos correspondientes para detectarla. Para las imágenes que muestran contenido principal, evalúe la posibilidad de usar un elemento de imagen HTML. También puede evaluar la precarga cuando la dirección del recurso esté clara y exista un retraso real en su detección. La dirección precargada y la configuración adaptable deben coincidir con el recurso que se utilizará finalmente; de lo contrario, la descarga podría duplicarse.

Para las listas de productos fuera de pantalla, las imágenes largas de las páginas de detalle y el contenido recomendado, puede evaluarse la carga diferida nativa para reducir las solicitudes iniciales. Durante las pruebas, desplácese hacia abajo y compruebe que las imágenes aparezcan a tiempo. Asigne también ancho y alto a las imágenes, o una relación de aspecto adecuada, para evitar que el contenido de la página se desplace al cargarlas. Revise asimismo los carruseles: si todas las imágenes grandes que inicialmente no se ven se cargan desde el principio, pueden ralentizar la carga inicial; aun así, la primera imagen visible debe recibir prioridad.

Si las imágenes siguen cargando lentamente después de optimizar los archivos, revise la cadena de entrega

Si una misma imagen carga correctamente en el entorno local, pero lentamente en el mercado objetivo, compruebe si la CDN cubre la región de acceso objetivo y si las solicitudes se atienden desde la caché. La estrategia de caché debe coordinarse con la forma de actualizar las imágenes: la caché de larga duración es adecuada para recursos que no cambian; cuando se actualicen las imágenes, puede utilizar una dirección con información de versión para evitar que los usuarios sigan viendo la imagen anterior. Los parámetros de firma o los parámetros de consulta que cambian con frecuencia también pueden afectar a los aciertos de caché; revíselos junto con la configuración del servicio.

Si las imágenes están alojadas en un dominio de terceros, observe también la resolución del dominio, el establecimiento de la conexión, las redirecciones y la disponibilidad del servicio. Las conexiones entre dominios requieren tiempo, pero la decisión de aplicar optimizaciones como la precarga de la conexión debe basarse en las esperas reales que muestra el gráfico de cascada. En las tiendas transfronterizas, revise por separado los sitios de distintos idiomas y regiones, así como las páginas de destino de los anuncios, para evitar que una plantilla concreta cargue imágenes originales sin optimizar.

Repita las pruebas en las mismas condiciones y confirme si se ha resuelto el problema

Tras realizar los cambios, vuelva a registrar las mediciones en la misma página, con el mismo tipo de dispositivo, las mismas condiciones de red y la misma región de prueba. Compare la hora de inicio de la solicitud de las imágenes clave de la parte superior, el tamaño transferido, el tiempo de descarga y el LCP. Una sola prueba puede verse afectada por las fluctuaciones de la red; repita las mediciones y compruebe si los resultados son estables. Si dispone de datos de rendimiento de usuarios reales, evalúelos también teniendo en cuenta el mercado objetivo.

Por último, compruebe que la optimización no haya introducido nuevos problemas: que la imagen de la parte superior siga siendo nítida, que en móviles se seleccione el tamaño adecuado, que las imágenes con carga diferida aparezcan a tiempo al desplazarse y que los recursos actualizados se almacenen correctamente en caché. Reducir el número de solicitudes de imágenes o el tamaño de los archivos son solo indicadores del proceso; lo que determina si hay que seguir ajustando es que los usuarios puedan ver antes una página funcional.