¿Cómo hacer que las imágenes se carguen más rápido?

Te explico cómo acelerar la carga de la imagen en tu blog, usando un plugin para wordpress y un script para blogger ¡Fácil y rápido!

¡Hola! Bienvenido a Peengler. Antes mencioné, cómo reducir el peso de las imágenes. Ahora para complementar la optimización en tus imágenes te explicare cómo mejorar su carga, ya sea en Blogger o WordPress.

Sin más que decir ¡empecemos!

Clic en la imagen para ver el tutorial en YouTube

Optimizar las imágenes para el SEO

El rendimiento y la velocidad de carga de tu blog es esencial por dos motivos:

  • Te ayuda a mejorar el posicionamiento de tus artículos.
  • Mejora la experiencia de tus visitantes o lectores.

Con que tengas a favor estos 2 elementos puedes hacer grandes cosas con tu sitio web, entre ellos vivir de él. Pero para esto, hay que trabajar mucho en lo que quieres, en el contenido, en tu estrategia, etc.

Entonces, ¿por dónde empiezo?

Mejorar la velocidad de carga de imágenes en mi blog

Tener un blog que cargue rápido es la misión que todo Blogger tiene que lograr, no es fácil ¡lo sé! porque siempre añadimos códigos que ralentizan la carga pero que aun así es necesario.

Por ejemplo: cuando quieras añadir publicidad en tu web, tendrás que añadir código para que este se muestre, haciendo que tu página cargue un poco más lenta. Pero si quieres monetizarlo, lo más probable es que lo dejes así.

Aunque hay otro factor que también influye en la velocidad de carga de tu sitio y es el mismo internet, que a veces no colabora. Sin mencionar que hasta puede ser la misma plantilla que estas usando. En fin, son muchas cosas que hay que tener en cuenta. Pero por ahora, intenta mejorar la carga de tus imágenes.

¿Cómo lo hago? Muy sencillo.

Cómo acelerar la carga de mis imágenes en Blogger

Lazy Load ayuda a agilizar la carga de tu blog de Blogger, especialmente en tus imágenes. Haciendo que la carga de las imágenes se detenga y solo mostrara aquellas donde el lector allá llegado en tu contenido.

En el caso de que solo llegara a leer la mitad del artículo, las demás imágenes no llegarían a cargar, lo cual es buenísimo porque eso es lo que mejora la carga en tu web.

Ahora, necesitaras del siguiente script que deberás copiar y pegar antes del </body> en el código de tu blog.

JS

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' />

<script type='text/javascript'>
//<![CDATA[
/*
* Lazy Load - jQuery plugin for lazy loading images
* Copyright (c) 2007-2012 Mika Tuupola
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
* Project home:
* http://www.appelsiini.net/projects/lazyload
*/
(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options);}
var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});} this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}
if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}
self.loaded=false;}else{self.loaded=true;}
$(self).one("appear",function(){if(!this.loaded){$("<img />").bind("load",function(){$(self).hide().attr("src",$(self).attr("original"))
[settings.effect](settings.effectspeed);self.loaded=true;}).attr("src",$(self).attr("original"));};});if("scroll"!=settings.event){$(self).bind(settings.event,function(event){if(!self.loaded){$(self).trigger("appear");}});}});$(settings.container).trigger(settings.event);return this;};$.belowthefold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).height()+$(window).scrollTop();}else{var fold=$(settings.container).offset().top+$(settings.container).height();}
return fold<=$(element).offset().top-settings.threshold;};$.rightoffold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).width()+$(window).scrollLeft();}else{var fold=$(settings.container).offset().left+$(settings.container).width();}
return fold<=$(element).offset().left-settings.threshold;};$.abovethetop=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollTop();}else{var fold=$(settings.container).offset().top;} return fold>=$(element).offset().top+settings.threshold+$(element).height();};$.leftofbegin=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollLeft();}else{var fold=$(settings.container).offset().left;}
return fold>=$(element).offset().left+settings.threshold+$(element).width();};$.extend($.expr[':'],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"});})(jQuery);

$(document).ready(function($){
$('img').lazyload({
effect:'fadeIn',
placeholder:'http://lh3.googleusercontent.com/-9nuRfZdo5ro/T5cYmFT_X9I/AAAAAAAACa8/K9aG-gcgsaI/s1/bg_placeholder.png'
});
});
//]]>
</script>

Si solo quieres que se aplique en las imágenes de tu contenido, cambias el:  $(‘img‘).lazyload({  por $(‘.post img‘).lazyload({

el .post es la clase del contenedor de tus artículos, quizás en tu plantilla tenga otro nombre.

Cómo acelerar la carga de mis imágenes en WordPress

Lo mejor de WordPress es que tiene plugin para casi todo, y en esta ocasión te recomiendo usar BJ Lazy Load o a3 Lazy Load, con tan solo configurarlo (que no es difícil) ya empieza a funcionar a la perfección.

Este complemento hace que tus imágenes carguen a medida que el lector se acerca a la imagen, logrando que tu sitio se cargue más rápido y ahorra ancho de banda.

plugin para acelerar la carga de las imagenes

En conclusión

Acelerar la carga de la imagen en tu blog, puede ser muy útil y más en sitios que suban muchas imágenes, pero si no es tu caso (no subes muchas imágenes) quizás no sea tan necesario.

Aun así, podrías hacer la prueba. Personalmente lo aplico en mi sitio y me va muy bien. Por supuesto, antes de subir mis imágenes le reduzco el peso, sino sabes como hacerlo CLIC AQUÍ.

¿Qué te pareció el articulo? ¿Ya aplicaste el plugin/script?

¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.

Deja un comentario

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

Alicia:

Uy estos post siempre vienen genial para aquellas personas que vamos muy perdidas por el mundo blogger.
B7s

Responder
    Gabriela Laya:

    Hola Alicia, es por eso que quiero ayudarlos XD

    Responder
Citu:

Gracias por el consejo lo tendré en cuenta y te deseo una buena semana

Responder
    Gabriela Laya:

    Hola Citu, igualmente.

    Responder
Yomi MR:

Holaa, pues que amo poner imágenes pero sí me concentro en que sean las necesarias para no atacar las entradas y también para que no sea tan lento, eh, solo hay algunas páginas que se demoran pero ahí vam 😛
¡Besos! :3

Responder
    Gabriela Laya:

    Hola Yomi MR, he visto que no subes tantas imágenes, es como dices solo las necesarias, no creo que sea necesario que lo apliques.

    Responder
Rocío:

Me parece interesante, pero ¿dónde accedo al .html?
Un abrazo.

Responder
    Gabriela Laya:

    Hola Rocío, tienes que dirigirte a Tema > clic en el botón HTML

    Responder
El desvan de vicensi:

Me ha encantado tu recomendación de hoy Gabriela y la probare pues mi blog va un poco lento en la carga. Un beso y feliz tarde ❤️❤️❤

Responder
    Gabriela Laya:

    Hola El desvan de vicensi, en tu caso puede ser la misma publicidad, eso siempre hace que la página cargue un poco más lento, pero como quieres monetizar tu sitio, ni modo a esperar XD

    Responder
Miss Bridgerton:

Hola,
Como siempre una entrada interesante, gracias por la información.
Besos desde Promesas de Amor, nos leemos.

Responder
    Gabriela Laya:

    Hola Miss Bridgerton, gracias a ti por tu comentario 🙂

    Responder
Espe:

Me ha venido muy bien la información porque suele pasarme.
Besos

Responder
    Gabriela Laya:

    Hola Espe, que genial que te sea útil 😀

    Responder
Kinga:

Siempre publicas cosas muy importantes 🙂

Responder
    Gabriela Laya:

    Hola Kinga, muchas gracias 😀

    Responder
Celia | Miles de Libros:

¡Hola, hola!

Este truquito lo dejo pasar porque aunque la entrada de novedades que subo una vez al mes tiene muchas imágenes, el resto de entradas suelen tener solo dos.

Mil besos,
Celia | 1000 LIBROS blog.

Responder
    Gabriela Laya:

    Hola Celia, en ese caso no es necesario que lo apliques. 🙂

    Responder
Nayade:

Hola guapa!!
Pondré en práctica lo que nos indicas porque si me pasa que a veces me tardan mucho en cargar
besos grandes! ♥

– – El Mundo de Naya – –

Responder
    Gabriela Laya:

    Hola Nayade, aunque a veces suele ser la plantilla, por los widgets, el mismo internet, etc.

    Responder
Sakuya Aikawa:

(ノ◕ヮ◕)ノ*:・゚✧ Holaaa!!!
Como siempre esta entrada es un gran aporte, yo no sabía que se podía hacer eso, así que lo quise intentar y ya pegue el código en mi blog por lo que espero funcione jajajaja, gracias por compartir esta información es bastante útil 😀

Responder
    Gabriela Laya:

    Hola Sakuya Aikawa, espero que te sirva, cualquier pregunta aquí estaré.

    Responder
Maria Eugenia ARIAS LOZANO:

Mira esto si me sirve, a ver si lo pongo en práctica!

Responder
    Gabriela Laya:

    Hola Maria, cuándo quieras cariño.

    Responder
yo leo Novela:

¡Qué buenos consejos! Me encanta. Muchas gracias.

Responder
    Gabriela Laya:

    Hola yo leo Novela, muchas gracias a ti.

    Responder
JLO:

todo es importante en los blogs pero que cargue rápido es una obligación hoy, sino es imposible mantener la atención del visitante… saludos!

Responder
    Gabriela Laya:

    Hola JLO, muy cierto lo que comentas, lo que es el diseño responsive y la carga, es un reto 🙂

    Responder
Boris Estebitan:

Qué lindo blog, muestras interesantes tips. Saludos desde El Blog de Boris Estebitan.

Responder
    Gabriela Laya:

    Hola Boris Estebitan, bienvenido a peengler jajaja gracias 🙂

    Responder
Asunción Artal:

Nunca me lo había planteado, muchas gracias!!

Responder
    Gabriela Laya:

    Hola Asunción Artal, si subes muchas imágenes pienso que podrías tenerlo en cuenta.

    Responder
Mava (Marianna 2.0):

¡Hola, Gaby!
Pues como siempre acá poco a poco, aprendiendo acerca de todo esto, gracias a tus entradas y videos.
Por cierto quería darte nuevamente las gracias por tu video sobre la nueva interfaz de Blogger, tuve que repasar tus explicaciones para poder crear una nueva etiqueta 😂
Después de un tiempo tratando de encontrar como hacerlo, renuncié a seguir buscando, me fui a tu video y listo, solucionado el problema ☺️😍
Un gran abrazo.

Responder
    Gabriela Laya:

    Hola Mava, vaya me alegro que el vídeo siga siendo útil jajaja 😂 y mira que blogger ha ido cambiando desde que hice el vídeo, ojalá y lo siga mejorando para que sea fácil de usarlo 🙂

    Responder
Joanna:

Un post muy útil e interesante, como siempre. 🙂

Besos

Responder
Blanca:

¡Hola, holaaaaaaaaaaaaaa ^-^!

De verdad que lo que estoy aprendiendo contigo, no es ni medio normal.

¡SE MUY FELIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIZ 🥰!

Responder