How To Accelerate Loading Blog By Installing Lazy Load Scripts For Images
How To Accelerate Loading Blog By Installing Lazy Load Scripts For Images - One of the common problems that Blogger users often encounter is the difficulty of managing expires headers (browser caching). Not difficult anymore, but it can not. Since Blogger is a Google product, so we just ride status and can not set it yourself.
When a visitor first opens your blog, the browser will make several requests to download all the content from the blog. Ideally, all files are stored in the visitor's browser cache. In order for when he returns to visit your blog, all files can be taken directly from the browser cache.
This will obviously ease the loading of blogs, because the browser does not need to constantly request his files to the server. How long the cache is stored in the browser you can set yourself. Some of the types of files that need to be cached include:
That's ideally yes. And it can only be done on blogs or websites that have their own hosting (self-hosted).
Since it's Blogger, you can not set the expires header to control the browser cache. So every time a visitor opens your blog, the browser will instantly re-download all files directly from the server. Then the travel time required to display the blog page becomes longer. One of the factors that make YSlow score in GTmetrix can not get A (100%) mostly because of the problem of this header expires.
You can use Lazy Load image script for Blogger to solve expires header problem. Other effects, page speed so increased and loading blog so much faster. Let's go directly to the script.
A script that will delay the calling of a file before a certain activity is performed. For Lazy Load Blogger Image script in this article, the file call will be delayed before any page scroll activity.
1. Go to Blogger >> Select Template >> click Edit HTML
2. Find the HTML tag code <img> tag which is the code of the blog thumbnail. In each template it must be different, so I execute the thumbnail code from my template. For you, find yourself yes code. It must be similar.
3. Then follow these steps
4. Here comes the main part, the Lazy Load Picture script for Blogger. Save this code BEFORE / ABOVE </body>.
5. When done, then Save Template
Easy is not it, so tutorials that I can discuss about How To Accelerate Loading Blog By Installing Lazy Load Scripts For Images. Hopefully with a short enough article this can be useful and good luck.
When a visitor first opens your blog, the browser will make several requests to download all the content from the blog. Ideally, all files are stored in the visitor's browser cache. In order for when he returns to visit your blog, all files can be taken directly from the browser cache.
This will obviously ease the loading of blogs, because the browser does not need to constantly request his files to the server. How long the cache is stored in the browser you can set yourself. Some of the types of files that need to be cached include:
- Image: jpg, gif, png
- Favicon / ico
- Javascript
- CSS
That's ideally yes. And it can only be done on blogs or websites that have their own hosting (self-hosted).
Since it's Blogger, you can not set the expires header to control the browser cache. So every time a visitor opens your blog, the browser will instantly re-download all files directly from the server. Then the travel time required to display the blog page becomes longer. One of the factors that make YSlow score in GTmetrix can not get A (100%) mostly because of the problem of this header expires.
You can use Lazy Load image script for Blogger to solve expires header problem. Other effects, page speed so increased and loading blog so much faster. Let's go directly to the script.
What is Lazy Load Plugin?
A script that will delay the calling of a file before a certain activity is performed. For Lazy Load Blogger Image script in this article, the file call will be delayed before any page scroll activity.
How to Install Lazy Load Script in Blogspot
1. Go to Blogger >> Select Template >> click Edit HTML
2. Find the HTML tag code <img> tag which is the code of the blog thumbnail. In each template it must be different, so I execute the thumbnail code from my template. For you, find yourself yes code. It must be similar.
<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>
3. Then follow these steps
- Add to class='lazy' its image tag.
- Change expr:src to expr:data-src.
- Add a src and its value is filled with data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=.
<img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
4. Here comes the main part, the Lazy Load Picture script for Blogger. Save this code BEFORE / ABOVE </body>.
<script type='text/javascript'>//<![CDATA[
function ignielLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|ignielLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
//]]></script>
5. When done, then Save Template
Easy is not it, so tutorials that I can discuss about How To Accelerate Loading Blog By Installing Lazy Load Scripts For Images. Hopefully with a short enough article this can be useful and good luck.
Post a Comment for "How To Accelerate Loading Blog By Installing Lazy Load Scripts For Images"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog