Móvil

Por qué una página con muchas imágenes carga más lento en el móvil

La misma página que carga al instante en el Wi-Fi de la oficina puede ir a paso de tortuga en una conexión móvil, solo por el peso de las imágenes.

Qué es

Esta comprobación examina cuántas imágenes carga una página, y marca aquellas con un número inusualmente alto, ya que cada imagen adicional es otro archivo más que el navegador tiene que descargar antes de que la página termine de cargar por completo. Esto no trata de que las imágenes sean inherentemente malas — a menudo son esenciales para el diseño y el contenido de una página — sino específicamente del efecto acumulado de cargar un número muy grande de ellas a la vez.

El impacto práctico de un recuento alto de imágenes se nota mucho más en el móvil que en el escritorio, porque las conexiones móviles (incluso las buenas) suelen ser más lentas y menos constantes que una conexión Wi-Fi o por cable de casa o de la oficina.

En qué afecta

Cada imagen se suma a la cantidad total de datos que el dispositivo de un visitante tiene que descargar antes de que la página sea del todo usable, y en una conexión de datos móvil concretamente, ese tiempo de descarga puede alargarse notablemente en comparación con la misma página cargando casi al instante en una conexión rápida de escritorio. Un visitante que espera en una página lenta y cargada de imágenes en su móvil tiene bastantes más probabilidades de rendirse e irse antes de que termine de cargar, en comparación con una página más ligera que se vuelve usable mucho antes.

Este es un caso en el que arreglarlo no significa necesariamente eliminar contenido que le importa al visitante — se trata mucho más a menudo de cómo se entregan esas imágenes (su tamaño de archivo, y si cargan todas de golpe) que de tener que eliminarlas por completo.

Cómo solucionarlo

  1. Cuenta cuántas imágenes cargan inmediatamente en la página, e identifica cuáles tienen un tamaño de archivo inusualmente grande (las herramientas de desarrollador de tu navegador pueden mostrarlo para cada imagen).
  2. Comprime las imágenes grandes con una herramienta gratuita de compresión de imágenes antes de subirlas — esto suele reducir el tamaño del archivo de forma drástica sin pérdida visible de calidad.
  3. Añade carga diferida (lazy loading) a las imágenes que aparecen más abajo en la página (fuera de lo visible sin desplazarse), para que solo se carguen cuando un visitante se desplace realmente cerca de ellas, en lugar de todas de golpe cuando la página se abre por primera vez.
  4. La mayoría de los creadores de webs y plataformas CMS modernas admiten la carga diferida con un simple interruptor o de forma automática por defecto — revisa tus ajustes de imágenes o rendimiento antes de añadirla manualmente.
  5. Vuelve a probar el tiempo de carga móvil de la página después de hacer los cambios, idealmente en una conexión móvil real y no en el Wi-Fi rápido de la oficina.

Comprueba si tu propia web tiene este problema

Launch Readiness analiza tu web en busca de esto y ~50 problemas más antes del lanzamiento, en segundos — gratis, sin registro.

Hacer un análisis gratis