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
El rendimiento y la velocidad de carga de tu blog es esencial por dos motivos:
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?
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.
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'>
//<;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.
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.
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?
Únete a la Zona VIP🔥
Descubre todo el contenido que te ofrece y ser parte de mi comunidad.
Gabriela Laya
Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.
Uy estos post siempre vienen genial para aquellas personas que vamos muy perdidas por el mundo blogger.
B7s
Hola Alicia, es por eso que quiero ayudarlos XD
Gracias por el consejo lo tendré en cuenta y te deseo una buena semana
Hola Citu, igualmente.
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
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.
Me parece interesante, pero ¿dónde accedo al .html?
Un abrazo.
Hola Rocío, tienes que dirigirte a Tema > clic en el botón HTML
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 ❤️❤️❤
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
Hola,
Como siempre una entrada interesante, gracias por la información.
Besos desde Promesas de Amor, nos leemos.
Hola Miss Bridgerton, gracias a ti por tu comentario 🙂
Me ha venido muy bien la información porque suele pasarme.
Besos
Hola Espe, que genial que te sea útil 😀
Siempre publicas cosas muy importantes 🙂
Hola Kinga, muchas gracias 😀
¡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.
Hola Celia, en ese caso no es necesario que lo apliques. 🙂
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 – –
Hola Nayade, aunque a veces suele ser la plantilla, por los widgets, el mismo internet, etc.
(ノ◕ヮ◕)ノ*:・゚✧ 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 😀
Hola Sakuya Aikawa, espero que te sirva, cualquier pregunta aquí estaré.
Mira esto si me sirve, a ver si lo pongo en práctica!
Hola Maria, cuándo quieras cariño.
¡Qué buenos consejos! Me encanta. Muchas gracias.
Hola yo leo Novela, muchas gracias a ti.
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!
Hola JLO, muy cierto lo que comentas, lo que es el diseño responsive y la carga, es un reto 🙂
Qué lindo blog, muestras interesantes tips. Saludos desde El Blog de Boris Estebitan.
Hola Boris Estebitan, bienvenido a peengler jajaja gracias 🙂
Nunca me lo había planteado, muchas gracias!!
Hola Asunción Artal, si subes muchas imágenes pienso que podrías tenerlo en cuenta.
¡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.
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 🙂
Un post muy útil e interesante, como siempre. 🙂
Besos
¡Hola, holaaaaaaaaaaaaaa ^-^!
De verdad que lo que estoy aprendiendo contigo, no es ni medio normal.
¡SE MUY FELIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIZ 🥰!
Deja un comentario