Imágenes fuera de pantalla diferidas
Silktide comprueba si tu página descarga imágenes que el visitante aún no puede ver —imágenes más abajo en la página, por debajo de la primera pantalla—. Cargarlas por adelantado retrasa el contenido que el visitante está viendo realmente.
El remedio es la : el navegador descarga cada imagen justo antes de que vaya a mostrarse en pantalla, en lugar de descargar todas las imágenes de la página inmediatamente.
Por qué es importante
Cuando una página se carga, el navegador dispone de un ancho de banda limitado, y cada imagen que descarga compite con todo lo demás. Gastar ese ancho de banda en imágenes que están tres pantallas más abajo significa que la imagen principal, el texto y los botones que el visitante espera llegan más tarde.
En páginas largas y con muchas imágenes, el derroche es grande: un visitante que solo lee la primera pantalla y se va puede haber pagado —en tiempo y en datos móviles— por decenas de imágenes que nunca vio.
Cómo solucionarlo
- Añade
loading=\"lazy\"a las imágenes que estén por debajo de la primera pantalla. Los navegadores lo admiten de forma nativa, sin necesidad de scripts:
<!-- Muy abajo en la página: no cargar hasta que el visitante se acerque -->
<img src=\"team-photo.jpg\" alt=\"Nuestro equipo\" loading=\"lazy\" width=\"800\" height=\"600\">
- No apliques carga diferida a las imágenes de la parte superior de la página, especialmente a la más grande: eso retrasa lo que los visitantes ven primero y perjudica más de lo que ayuda.
- Muchos CMS y frameworks ya aplican la carga diferida automáticamente; si el tuyo no lo hace, busca una opción de configuración o un complemento antes de editar las plantillas.
- Mantén dimensiones explícitas en las imágenes con carga diferida para que la página no salte cuando se carguen; consulta Tamaños de imagen explícitos.
Cómo lo prueba Silktide
- Cargar la página en un navegador real, usando el tipo de dispositivo, la velocidad de conexión y la ubicación de prueba configurados para tus pruebas de velocidad.
- Identificar las imágenes que se descargan durante la carga inicial pero están situadas completamente por debajo de la pantalla visible y que no estén ya diferidas.
- Informar de cada imagen fuera de pantalla con el tamaño de descarga que podría diferirse.
- Calificar la página según el tamaño total que se puede diferir: alrededor de 30 KB penaliza; 100 KB o más se califica como deficiente.
Solución de problemas
La imagen es visible en mi pantalla
Qué se considera «fuera de pantalla» depende de la pantalla. Silktide realiza las pruebas con el dispositivo configurado para tus pruebas de velocidad, por lo que una imagen que esté junto al pliegue en tu escritorio puede quedar por debajo de la primera pantalla en un más pequeño. La carga diferida sigue siendo segura: la imagen se carga en cuanto el visitante se acerca.
Ya aplicamos carga diferida con un script
Enfoques antiguos basados en scripts a veces siguen iniciando descargas demasiado pronto, o el script puede no cubrir imágenes añadidas por otros complementos. Las imágenes indicadas muestran exactamente lo que se descargó estando fuera de pantalla; el loading=\"lazy\" nativo es la solución más sencilla y fiable.