Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Speed up your blog with Lazy Script Automatic Load Image on Blogger

Indeed, in Blogger itself, the biggest problem that is still classic from the past until now is Image OPTIMIZATION.


It turns out that images play an important role in terms of wasting data packets, the more images load, the more data used will be too.


Some bloggers even don't display images, so they only write... and it's proven that the speed of their blogs can't be doubted.


From time to time image or image optimization is also carried out, especially for large industry players in the field of web technology, so that the image size is smaller, but has good quality. 



I once mentioned the webp format, which is the next generation image format as it's called on Google PageSpeed. 

 

 

lazy load image

 

 

 

Image Optimization Concept 

 

Maybe for web hosting-based websites it will be easy to convert automatically..


The concept is this...


  • - We Upload Image
  • - Then the image is divided into different folders, with auto-scale sizes.
  • - Also divided into thumb folders, which automatically convert to webp format.
  • -When a visitor requests data, what appears is the thumbnail, which is in webp format.


I analyzed this concept from several microstock websites, such as pixabay.


When we upload an image, the image can immediately scale to several sizes.


and on the front page of Pixabay itself, which contains a lot of photos... it turns out that when we download the size is on a small scale with webp format, but it doesn't reduce the quality of the display.


It would be very tiring if done manually. 




For example 


  • - People Upload Images
  • - Then workers scale the image with graphics processing software such as Photoshop, scaled with a standardized format (Small, Large, Extra Large)
  • - Put into several folders using FTP for example FILEZILA
  • - And that's only 1 person, just imagine if a Microstock site is like PIXABAY
  • - Has millions of active users, who upload images every second, some are uploaded.
  • - How many employees should it have? to just do the Scale and change the format?
  • - Not to mention if there is an upload error from the user, and you want to re-upload it..
  • - Now this is the function of INFORMATION SYSTEM DISCIPLINE or INFORMATICS 


So how does the system make everything completely automatic, even if only a few employees can handle millions of images every hour.


or Employees only do moderation, so they can focus on quality selection..


Well that's him. 



Why IT is one of the most expensive fields...

because he created a function that can handle the work that should be handled by many people.




Especially with the LOG or history of compositions, so it's almost the same as CCTV that can be accessed, if there is a serial number (unique) you can directly use the FIND function to look for a particular LOG as evidence.. hehe 



What about bloggers? 

 

We know that as users who are provided with free space, we don't have access to the host directly, we can't go into deeper directories .. and we can only make settings according to what has been determined by GM or GAME MASTER.. hehe, yes of course from the blogger. 


So it's actually limited... most of the bloggers take advantage of the existing gaps, but only manipulate them, because there are limitations there.


Well, actually, Blogger is a platform for blogging... hehe


Yes, you should focus on the content of the writing, please...


So using the SKYLIGHT BASIC template is actually enough.. 

 

well, but there is something that can be used, namely our freedom to set CSS, Javascript and HTML on Blogger so that we can explore so that our blog looks good.. even like website hosting in general.. 

 

Because Blogger is really good, that's why for me, I can put BLOGGER as the leading platform in the blogging world.


This is my own perspective, because here we can be free to do creativity on our blog just like we play WEB HOSTING. 

 

There is learning CSS there, Javascript too, HTML is also dominating (yes, it's PHP) that can't be done... hehe 

 

Yes .. because PHP is usually directly related to the SQL server or the table table .. hehe ( CRUD ) 

 


How come you know?

Yes, that's a lesson when studying in Informatics nang... hehe... 

 


Ok back to Blogger.. 


So that's why, because of the significant difference between blogger and web hosting, the only way we can do it is by converting or optimizing images with the smallest possible size in kb units. 

Optimized images are usually less than 77kb.. that's good.. 

Well.. will it break?


well that's it... eat as little as possible... as little as possible.. 


and now the webp format is here...


Well, bro... I've already uploaded pictures in thousands of posts, how about changing them one by one...


Yes, how else, if you don't want to change it, it means that for future uploads, you will start to optimize the image, which was previously left alone.




Is there a way to automatically switch images to Webp? I haven't found that myself yet. 


Then what is the function of this lazy load image? 



From the name alone, it can be interpreted that Lazy is lazy.. so lazy load image is lazy to load image.. hehe


No no... just kidding...




So actually the basic concept of Lazy Load Image is that it almost resembles INSTAGRAM FEED or the like which has penetrated the mobile market, if you look at it, and observe, there are a lot of Instagram posts... a lot in fact... just imagine if everything is loaded directly ...


 


oh it's going to be long...


This is an image because it's not text! I have explained at length the image optimization above from observations and what I learned.. and observed..


 


So usually there are several images that are loaded on Instagram, let's just say 20 posts.... the others are lazy aka not loaded... now when the user scrolls to the limit of the uploaded posts... that means for example, for example, it has reached 20 images, then it will load again 20..


and so on... until the auction user scrolls again... ehehehe




Well, Lazy Load Image is almost similar to that, so it only loads the image that you see... then when you scroll, it will load the image.




Is it understandable enough?




Now, but this doesn't mean making the image OPTIMAL with a small size... Not at all... so it's a kind of manipulation technique... so that it feels like it's loading fast...


For the value or size loaded remains the same..


like words


User / visitor visits RahmanCyber.NET Blog, normally without lazy load, the user spent 8MB in one load.. wkwkwkwk


wow this sucks...


after lazyload is installed, if the user scrolls down... then the result will be the same... hehe


It's just the speed that feels faster.




So don't GR... hehe


But even so, this will affect the score displayed when our website is tested on GTMETRIX and PAGESPEED.




Basically this lazy load will really affect your website when there are lots of images in a post .. so visitors will feel faster aka not heavy. 



How to Install Automatic Lazy Load Script 


hy automatic..? because for this edition script, you don't need to change the tags manually one by one.. so just put the script above the body tag suffix in EDIT HTML. 

 

But first, please check your GTMETRIX Web Blog score... visit GTMETRIX.COM 


Already?


Please observe and absorb the score you get... if you buy a template that has been optimized... you don't have to worry about it anymore... just write it down... because it's usually been adjusted... but if not, or make your own.. then this Lazy Load Image tutorial may be useful to practice.. 


The details are like this: 

  1. 1. You first open Blogger
  2. 2. Go to Themes
  3. 3. Click the Triangle icon down
  4. 4. Select EDIT HTML
  5. 5. After that, look for the </body> tag, usually at the bottom...
  6. 6. Put the code below right above </body> 

 

Lazy Script Code Automatic Load Image 


 <script type='text/javascript'> //<![CDATA[
// Lazy Load Image
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.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);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDRYnHmEBPLApqWLlPER8lVocUTc-SzLiwX6ofC6F_2QqlvCLc7bawtT-pIijZIx15YNcv2n_Ircmddx06hOGn_B49gP2NOLR__66ai-j_GhWLKLwQH-Qw6ZBiGGYPyV1AuF-RI8-XteE/s700-rw/rc-loading.png",effect:"fadeIn",threshold:"-50"})}); //]]>
</script>

After that... Click Save 

 

 

 

Have you finished installing the Lazy Load Image Script? 

 

Actually it's done... but please, open a new tab in your browser, after that TEST your Website Score on GT METRIX


Remember yes..


Open a new tab because here we will compare the scores before and after..


 


do the same thing as the previous test..


Then compare it with the previous test results.


There is a difference?


which one is faster?


 


if it turns out to be even slower.. yes.. just delete the Lazy Automatic Load Image Script on Blogger..


^_^




But if it's faster...




keep..


it means you are successful :D






Well, that's how to add an Automatic Lazy Load Image Script on Blogger. 




*Bonus


Hasil Pagespeed RahmanCyber

that's the result of testing on Google PageSpeed Insight RahmanCyber.NET, for desktop viewing only people, especially mobile ones...and for the score here... I don't think it matters much.. because before that it wasn't much different. .. even feels the same... Lazy Load is installed the same or not for the score..




Why is it so difficult? because I want to make a Blog Magazine.. so there are a lot of using Sliders... and especially for the pictures themselves, I didn't think about the optimization before.. (before I studied the blog temperature)


So, if you want to optimize, you have to change one by one.. and many..


 


and this is what caused me to experiment with making a guide to speed up blogs on mobile or mobile mode... because the score really dropped... for the mobile version




there is actually a summary of the research I did...








As for GTMETRIX, it's fantastic... just look at this 



hasil test gtmetrix rahmancyber net

so before that my web score was F.. it's really red.. that's all..


but after installing LAZY LOAD IMAGE Script... so it goes up..


hmmm how come the parameters are different times.. :D between pagespeed insight and GTMetrix, WHICH I know is the mainstay of template developers...








Alright


Ok, it is finished...




May it be useful. 




Post a Comment for "Speed up your blog with Lazy Script Automatic Load Image on Blogger "

Article original from MyShorTTips Stuff. Don't Copied or Sale. Protected by LAW. Thanks for Reading.