¿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.

<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.

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?