#eTubeGuideBangla : কিভাবে গতি লোডিং ব্লগস্পট ওয়েবসাইট অলস লোড ইমেজ জন্য সেটিংস

» #eTubeGuideBangla ভিডিও বিবরণ :

ব্লগস্পট ওয়েবসাইটে অলস লোড (Lazy Load) ইমেজ সেটআপ করার জন্য আপনাকে কিছু সহজ পদ্ধতি অনুসরণ করতে হবে। অলস লোডের মাধ্যমে, আপনার ওয়েবসাইটের ইমেজগুলো শুধুমাত্র তখনই লোড হবে যখন ইউজার সেই অংশে স্ক্রোল করবে। এটি পেজ লোডিং স্পিড বাড়াতে সাহায্য করে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

এখানে ব্লগস্পট ওয়েবসাইটে অলস লোড ইমেজ সেটআপ করার জন্য কিছু সহজ পদক্ষেপ দেওয়া হল:

১. ব্লগস্পট থিমের HTML কোডে পরিবর্তন

এটি করার জন্য, আপনাকে ব্লগস্পট থিমের HTML কোডে কিছু পরিবর্তন করতে হবে। এজন্য:

1. ব্লগস্পট ড্যাশবোর্ডে লগইন করুন।
2. Theme অপশনে যান এবং Customize এ ক্লিক করুন।
3. তারপর Edit HTML অপশনটি সিলেক্ট করুন।
4. এবার আপনার ব্লগের HTML কোডের মধ্যে নিচের কোডটি যুক্ত করুন, যা ইমেজগুলোর জন্য অলস লোড ফিচার সক্রিয় করবে।

html
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var images = document.querySelectorAll('img');
    images.forEach(function(image) {
      var imageSrc = image.getAttribute('data-src');
      if (imageSrc) {
        image.setAttribute('src', imageSrc);
      }
    });
  });
</script>

২. ইমেজে data-src অ্যাট্রিবিউট যোগ করা

এরপর, আপনার ব্লগে যেকোনো ইমেজ ট্যাগে data-src অ্যাট্রিবিউটটি ব্যবহার করতে হবে। উদাহরণস্বরূপ:

html
<img data-src="your-image.jpg" alt="image description" class="lazy-load" />

এখানে, ইমেজের আসল URL (your-image.jpg) data-src অ্যাট্রিবিউটে থাকবে। যখন ইউজার স্ক্রোল করবে, তখন ইমেজটি src অ্যাট্রিবিউটের মাধ্যমে লোড হবে।

৩. CSS কোড ব্যবহার করা (ঐচ্ছিক)

ইমেজের অলস লোড এফেক্টকে আরো কার্যকরী করতে কিছু CSS স্টাইল যোগ করা যেতে পারে। উদাহরণস্বরূপ:

css
.lazy-load {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.lazy-load[src] {
  opacity: 1;
}

এই CSS কোডটি ইমেজ লোড হওয়ার পর, ইমেজটি ধীরে ধীরে দৃশ্যমান হবে।

৪. ব্লগের ওয়েবপেজে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করা (ঐচ্ছিক)

আপনি যদি আরও উন্নত অলস লোডিং ফিচার চান, তবে বিভিন্ন জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করতে পারেন, যেমন:

• LazyLoad.js: এটি একটি জনপ্রিয় লাইব্রেরি যা ইমেজ অলস লোডিং করে এবং সহজেই ব্লগস্পট ওয়েবসাইটে সংযুক্ত করা যায়।

LazyLoad.js ব্যবহার করার জন্য:

1. LazyLoad.js ফাইলটি ডাউনলোড বা CDN লিঙ্ক ব্যবহার করুন:

html
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.0/dist/lazyload.min.js"></script>

2. তারপর কোডটি আপনার থিমের HTML কোডের শেষের দিকে যোগ করুন:

html
<script>
  var lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy"
  });
</script>

এখন আপনি যেকোনো ইমেজ ট্যাগে class="lazy" যোগ করতে পারবেন, যা অলস লোডিং সক্ষম করবে:

html
<img class="lazy" data-src="your-image.jpg" alt="image description" />

৫. সাইটের পারফরমেন্স পরীক্ষা

অলস লোডিং ইমেজ ব্যবহার করার পর, আপনি আপনার সাইটের পারফরমেন্স পরীক্ষা করতে পারেন। গুগল পেজস্পিড ইনসাইটস (Google PageSpeed Insights) বা লাইটহাউস (Lighthouse) টুল ব্যবহার করে সাইটের লোডিং টাইমের উন্নতি দেখতে পারবেন।

---

এই পদ্ধতিগুলি অনুসরণ করে আপনি আপনার ব্লগস্পট ওয়েবসাইটে ইমেজগুলোর অলস লোডিং ফিচার যুক্ত করতে পারবেন এবং ওয়েবসাইটের লোডিং স্পিড বাড়াতে পারবেন।

» #eTubeGuideBangla ভিডিও #হ্যাশট্যাগ :

#গতি #লোডিং #ব্লগস্পট #ওয়েবসাইট #অলসলোড #ইমেজলোডিং #ব্লগস্পটটিপস #লোডিংস্পিড #অলসলোডইমেজ #ব্লগস্পটগাইড #ওয়েবসাইটস্পিড #ইমেজকাস্টমাইজেশন #লোডিংটিপস #স্পিডআপ #ব্লগস্পটফিচার #লোডিংইমেজ #ওয়েবসাইটফাস্ট #ব্লগস্পটসেটআপ #ইমেজএপটিমাইজেশন #লোডিংকোড #ব্লগস্পটসামগ্রী #ইমেজকোড #ওয়েবস্পিডটিপস #ব্লগস্পটস্পিড #স্পিডএডজাস্ট #ইমেজফাইল #অপটিমাইজডলোডিং #ব্লগস্পটলেআউট #ইমেজফাস্টলোড #স্পিডকাস্টমাইজেশন #লোডিংএডভান্স #ব্লগস্পটলোডিংটিপস #ওয়েবসাইটরিডাকশন #লোডিংঅপটিমাইজেশন #ব্লগস্পটআরনিং #স্পিডপরিবর্তন #ইমেজলোডস্পিড #ব্লগস্পটকোড #লোডসেটআপ #ব্লগস্পটট্রিক #লোডিংফাইল #স্পিডইমেজ #ওয়েবসাইটট্রিক #লোডফাস্ট #ইমেজপ্রসেসিং #লোডিংগাইড #স্পিডটিউটোরিয়াল #ব্লগস্পটইমেজ #লোডিংস্টাইল #স্পিডফাইল #ওয়েবসাইটফাস্টলোড