Carga las imágenes sólo al hacer scroll para acelerar WordPress

Seguro que mas de una vez te pasa, que accedes a un blog que usa muchas imágenes, como este habitualmente, y la carga de la página es lenta.

Esto es debido a que la página trata de cargar todas las imágenes disponibles, y esto hace que, aunque aún no vayas a verlas – haciendo scroll – no puedas visualizar bien la primera publicación hasta que no se carguen todas.

Quizás hayas visto que sitios como Google Imágenes usan un script que trabaja para evitar precisamente eso. Lo que hace ese script es ir cargando las imágenes a medida que haces scroll, de manera que puedas visualizar las primeras imágenes y solo se cargan las demás si de verdad quieres verlas.

Pues bien, la gente de Automattic, Techcrunch y Jake Goldman se pusieron manos a la obra y, resultado de su trabajo tenemos el plugin Lazy Load que consigue precisamente eso, que las imágenes se carguen a medida que el visitante haga scroll, cargando solo las necesarias que visualiza en su navegador y, en consecuencia, mejorando la experiencia de navegación en tu web, por velocidad de carga, por simple gestión eficaz de los recursos.

Además, que no tienes que configurar nada, lo instalas, lo activas y empieza a funcionar, usando jQuery.sonar para mostrar imágenes a medida que están en el foco de visualización del navegador del usuario. El resto de contenido, no obstante, se carga al completo, por si te quedaba la duda.

¿Ventajas?, pues todas, especialmente en blogs con mucho uso de imágenes, pues mejoras los tiempos de carga de página y eso Google es posible que te lo agradezca, y lo que es seguro es que tus visitantes te lo agradecerán.

Si quieres ver el efecto puedes comprobarlo en mi blog personal.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(6 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

25 comentarios en “Carga las imágenes sólo al hacer scroll para acelerar WordPress”

  1. Lo he probado y va bien, carga cuando tiene que cargar, perfecto. 
    Aunque he encontrado 2 problemillas (o posibles problemillas):
    -En mi blog la paginación se hace plan ajax, cuando pagino de este modo no hace correctamente el cambio de imagen y deja las imágenes vacías.
    -Al descargar directamente la página en bruto (wget from all the life) mantiene la imagen vacía en los IMG, y supongo esto puede ser un problema para los buscadores, que no hallarán las imágenes tan monas que colgamos 😀

  2. Muy bueno Fernando, lo había visto alguna vez en una página y estaba buscándolo de hace tiempo.

    Por lo que se puede ver a simple vista yo creo que si que funciona.

    Muchas gracias

  3. Otra cosa, habría posibilidad de hacer que aparecieran con algún efecto en vez de golpe, algo como suavizado, fade o así…

    Gracias

  4. Dado que no puedo logearme en el nuevo foro ni aún recuperando la contraseña, inserto este comentario en esta entrada. Ya se que no tiene nada que ver con su contenido pero no he encontrado ningún post que explique el cambio sufrido por el foro. Bueno.. hay uno pero solo habláis de vuestro nuevo servidor.

    El caso es que me gustaría hacer dos sugerencias:

    1) El buscador arroja resultados solo para el blog aunque te encuentres en el foro. Así, por ejemplo, si buscas Pagenavi sólo aparecen entradas y nada de las consultas realizadas por la gente en el foro.

    2) En el formato anterior aparecía una lista con los comentarios más recientes. Ahora tal lista ya no existe. Es prácticamente imposible seguir la pista a las nuevas preguntas con el nuevo formato salvo que vayas subforo por subforo.

    Un saludo.

    1.  Para acceder al foro, logueate en la web en el menu lateral derecho, y luego pinchas en la sección Foro del menu superior.

  5. Creo que hace algunos años ya publicaste esto Fernando, por que hice las pruebas con el plugin y bueno hace lo que se indica, sin embargo en mi caso aún así generó un consumo de los recursos y dejé de utilizarlo.

      1. Bueno, pues yo recuerdo algo parecido, lo probé justo cuando tenía problemas de consumo de recursos, y supongo que por eso no habría notado los cambios, pero ahora he instalado este plugin y aún así no noto los cambios.
        PD. Creo que cometí un error, el anterior plugin se llamada "jquery lazy load"

  6. la verdad que andaba desde hace mucho buscando esto y no lo avía encontrado pero gracias @fernandot:disqus   y a @fliberty:disqus  ya lo tengo 

  7. Lo he probado y no me funciona :S

    Con las imágenes que inserto desde servidores externos me aparece el
    hueco en el post, y las que inserto internamente no aparecen ni el
    hueco.

    Por si tiene algo que ver, he activado y desactivado WP Super Cache pero ningún cambio.

    ¿Alguna sugerencia?

    Saludos y gracias!

  8. Recomendadisimo!!!!!!!!!!!!!!!! 

    Lo he probado y funciona de perlas, sobre todo en esos sitios donde hay muchas imágenes que cargar.

    Muchas gracias por el post. Realmente no sabía que lo necesitaba hasta que lo probé.

  9. Hola,

    Muy interesante, lo he probado y funciona muy bien en páginas en las que las se van visualizando las imágenes a  medida que se hace scroll. Además es tan sencillo como instalarlo y punto, sin ningún tipo de configuración.

    Alguien ha detectado alguna incompatibilidad o efecto (positivo o negativo) con herramientas como prettyPhoto o jcarrousel.

    Un saludo!

  10. Pingback: Las 5 claves para optimizar WordPress | Ayuda WordPress

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido