Hello Bloggers, इस लेख में मैं आपको बताऊंगा Lazy Load Blogger Script लगाकर आप अपने Blogger Blog की Loading Speed कैसे increase कर सकते हो। हम अपने Blog में काफी सारे Images और Graphics इस्तेमाल करते हैं और ये दोनों size में काफी heavy होते हैं इस कारण से कई बार blog खुलने में काफी समय लगा देता है। अगर Blog की loading speed slow होती है, तो इससे Blog की ranking पर बहुत बुरा असर पड़ता है। Blogger Blog में changes करना थोड़ा मुश्किल होता है लेकिन इस लेख में मैं आपका बहुत आसान भाषा में बताऊंगा आप किस तरह आसानी से अपने ब्लॉग में Lazy Load Blogger Script लगाकर अपने blog की speed increase कर सकते हैं।
Lazy Load Blogger Script क्या होती है ?
Lazy Load Plugin को Blogger Blog में Add करने के फायदे
- » इस script को अपने ब्लॉग में लगाने से आपके blog का content पहले खुल जायेगा और बाद में Images open होंगी। इससे Blog की loading speed बढ़ती है।
- » इसको लगाने से आपके Blog की SEO improve होगी जिससे आपका blog Google में जल्दी rank होगा और आपको ज्यादा ट्रैफिक मिलेगा।
Lazy load Blogger script को Blog में कैसे लगाते हैं
- » इस लेख के Last में आपको Lazy Load Blogger Script को download करने का code मिलेगा। पहले उसे download करके Copy करलें।
- » सबसे पहले आपको अपने Blogger Dashboard को Open करके Login करना है।
- » "Theme " Option पर Click करें। पहले Back Up लें अपनी पुरानी Theme का। ताकि अगर आपसे कोई गलती हो जाये तो अपने ब्लॉग को फिर से पहले जैसा कर सकें।
- » इसके बाद EDIT HTML पर Click करें।
- » अब अपनी Theme की बिलकुल last में आ जायें यहां आपको </body> लिखा हुआ मिलेगा।
- » आपको </body> के ऊपर Code Paste करना है जो अपने सबसे पहले Copy किया था।
- » अब अपनी Theme को SAVE कर दें।
What is the effect of Lazy Loading on SEO?
Google has always been advising publishers to increase the speed of their websites. They have always released many tools and articles to help website owners improve the speed of their sites. To improve the speed of a website, Google suggests delaying the loading of off-screen images.
This is possible to do with the use of the Lazy Loading Technique. Because images are usually the largest part of the web page and which has a big impact on the speed and SEO of a website.
Generally, Google has always adopted confidentiality regarding the factors of ranking. But, when it comes to a site's speed, Google has publicly stated that site speed is a ranking factor for mobile search. Lazy loading technology is a useful script to make sites load faster on mobile devices.
How to Add Lazy Loading in Blogger
Step 1. At first, you need to go to the Blogger dashboard i.e. Blogger.com.
Step 2. Go to the Themes Section and Click Edit HTML Button.
Step 3. Copy the Javascript code given below.
<script>//<;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/AVvXsEh2-XwH1SBSfW6-lvyr51_z7E8Zsb42NF6HM4aT9Xm1ktQ7o7gJJbVBHNDDevUWgxAa5CSXFbqNmEjooMI-WpCcLCKXzDH5796SYZYs25EmYEIDGuin8VybuvvLMgZ0_1_H7ZeQKECbB5Q/s10/loadingku.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>
Step 4. Find the </body> tag and paste the Javascript code above it
Step 5. Then click the Save Button.
Now you have successfully implemented lazy loading in your blogger website. You can check if it is working or not in the Google Page Speed Insights.
PRO's and CON's of Lazy Loading
Before implementing Lazy Loading on your page, you should carefully consider the pros and cons for your programming and website users.
Here are some of the advantages of Lazy Loading:
- Lazy Loading strikes a balance between optimizing the delivery of content and simplifying the user experience.
- Users can view the content of the page very quickly.
- Due to faster page loading, leads to better conversions and higher revenue for e-commerce sites.
- Use of less bandwidth, which translates into cost savings.
Some of the disadvantages of Lazy Loading are as follows:
- Additional lines of Javascript to implement lazy loading, combined with existing code, make it more complicated.
- Improper indexing of unloaded content can sometimes affect the ranking of the website in search engines.
FAQ
Lazy loading is an exercise of loading the content of a web page, which makes it useful to improve the performance of the system and save your resources. The advantage of lazy loading is that it reduces the initial loading time of a webpage.
Lazy loading reduces the weight of web pages and contributes to faster loading.
- A Lazy Loading Image means the slow loading of images on websites, this means that if a user does not scroll the webpage completely, the images at the bottom of the page will also not load.
- As the name suggests, the content is loaded continuously as the user scrolls the web page. As the user scrolls through the page, the images in the viewport are replaced by thumbnails and after a specified number of images are displayed, a button pops up allowing the user to load additional images.
Conclusion
Lastly, lazy loading is a great strategy that reduces the initial loading time of web applications to a great extent. However, to use this strategy, as a web designer, it is important to be properly aware of its negative effects while developing any programming.
A right and usable application will ensure better user experiences. It is important to have the well-organized web content for a good browsing experience. Lazy Loading technology speeds up the loading of a website, while also saving bandwidth.
Thank you for Reading