Website Speed Up

⌘K
  2. Home
  4. Website Speed Up
  6. Html
  8. Lazy Loading

Lazy Loading

Thought for 2 secondsThought for 2 secondsলেজি লোডিং কি এবং কিভাবে এটি ওয়েবসাইটের গতি বাড়ায়:

লেজি লোডিং হল একটি কৌশল যা ওয়েবসাইটের পারফরম্যান্স উন্নত করে। এর মাধ্যমে, ওয়েবপেজের সব কন্টেন্ট একসাথে লোড না করে, শুধুমাত্র প্রয়োজনীয় অংশগুলি প্রথমে লোড করা হয়। বাকি অংশগুলি পরে, যখন প্রয়োজন হয় তখন লোড করা হয়।

কিভাবে এটি ওয়েবসাইটের গতি বাড়ায়:

  1. প্রাথমিক লোড সময় কমায়: শুধু প্রয়োজনীয় কন্টেন্ট লোড হওয়ায় পেজ দ্রুত লোড হয়।
  2. রিসোর্স ব্যবহার কমায়: অপ্রয়োজনীয় ডাটা ডাউনলোড না করায় ব্যান্ডউইথ সংরক্ষণ হয়।
  3. সার্ভার লোড কমায়: একসাথে কম ডাটা প্রসেস করতে হয় বলে সার্ভারের কাজ কমে।

লেজি লোডিং প্রয়োগের ক্ষেত্রসমূহ:

  1. ছবি (Images)
  2. ভিডিও (Videos)
  3. আইফ্রেম (iframes)
  4. কার্ড বা গ্রিড লেআউট (Card or grid layouts)
  5. কমেন্ট সেকশন (Comment sections)
  6. সোশ্যাল মিডিয়া ফিড (Social media feeds)
  7. ম্যাপ (Maps)

এখন আমরা একটি HTML উদাহরণ দেখব যেখানে ছবির জন্য লেজি লোডিং ব্যবহার করা হয়েছে:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>লেজি লোডিং উদাহরণ</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>লেজি লোডিং ছবির উদাহরণ</h1>

    <img src="placeholder.jpg" data-src="https://example.com/image1.jpg" alt="ছবি ১" loading="lazy">
    <img src="placeholder.jpg" data-src="https://example.com/image2.jpg" alt="ছবি ২" loading="lazy">
    <img src="placeholder.jpg" data-src="https://example.com/image3.jpg" alt="ছবি ৩" loading="lazy">

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));

            if ("IntersectionObserver" in window) {
                let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            let lazyImage = entry.target;
                            lazyImage.src = lazyImage.dataset.src;
                            lazyImage.removeAttribute("data-src");
                            lazyImageObserver.unobserve(lazyImage);
                        }
                    });
                });

                lazyImages.forEach(function(lazyImage) {
                    lazyImageObserver.observe(lazyImage);
                });
            } else {
                // Fallback for browsers that don't support IntersectionObserver
                lazyImages.forEach(function(lazyImage) {
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.removeAttribute("data-src");
                });
            }
        });
    </script>
</body>
</html>

এই HTML ফাইলটি বাংলা ভাষায় ব্যাখ্যা করা হল:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>লেজি লোডিং উদাহরণ</title>
    <style>
        /* ছবিগুলোর জন্য বেসিক স্টাইল */
        img {
            max-width: 100%;
            height: auto;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>লেজি লোডিং ছবির উদাহরণ</h1>

    <!-- লেজি লোড করার জন্য ছবি -->
    <!-- src অ্যাট্রিবিউটে একটি ছোট প্লেসহোল্ডার ছবি দেওয়া হয়েছে -->
    <!-- আসল ছবির URL data-src অ্যাট্রিবিউটে রাখা হয়েছে -->
    <!-- loading="lazy" অ্যাট্রিবিউট ব্রাউজারের নেটিভ লেজি লোডিং সাপোর্ট করে -->
    <img src="placeholder.jpg" data-src="https://example.com/image1.jpg" alt="ছবি ১" loading="lazy">
    <img src="placeholder.jpg" data-src="https://example.com/image2.jpg" alt="ছবি ২" loading="lazy">
    <img src="placeholder.jpg" data-src="https://example.com/image3.jpg" alt="ছবি ৩" loading="lazy">

    <script>
        // DOM লোড হওয়ার পর স্ক্রিপ্ট চালু হবে
        document.addEventListener("DOMContentLoaded", function() {
            // data-src অ্যাট্রিবিউট সহ সব ছবি সিলেক্ট করা
            var lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));

            // IntersectionObserver সাপোর্ট চেক করা
            if ("IntersectionObserver" in window) {
                // IntersectionObserver তৈরি করা
                let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(function(entry) {
                        // ছবি ভিউপোর্টে আসলে
                        if (entry.isIntersecting) {
                            let lazyImage = entry.target;
                            // data-src থেকে আসল ছবির URL src-এ সেট করা
                            lazyImage.src = lazyImage.dataset.src;
                            // data-src অ্যাট্রিবিউট রিমুভ করা
                            lazyImage.removeAttribute("data-src");
                            // অবজারভ করা বন্ধ করা
                            lazyImageObserver.unobserve(lazyImage);
                        }
                    });
                });

                // প্রতিটি লেজি ছবি অবজারভ করা শুরু করা
                lazyImages.forEach(function(lazyImage) {
                    lazyImageObserver.observe(lazyImage);
                });
            } else {
                // IntersectionObserver সাপোর্ট না থাকলে ফলব্যাক
                // সব ছবি একসাথে লোড করা
                lazyImages.forEach(function(lazyImage) {
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.removeAttribute("data-src");
                });
            }
        });
    </script>
</body>
</html>

এই উদাহরণে, আমরা দেখতে পাচ্ছি:

  1. ছবিগুলোতে loading="lazy" অ্যাট্রিবিউট ব্যবহার করা হয়েছে, যা মডার্ন ব্রাউজারে নেটিভ লেজি লোডিং সাপোর্ট করে।
  2. data-src অ্যাট্রিবিউটে আসল ছবির URL রাখা হয়েছে, আর src-এ একটি ছোট প্লেসহোল্ডার ছবি দেওয়া হয়েছে।
  3. জাভাস্ক্রিপ্টে IntersectionObserver ব্যবহার করা হয়েছে। এটি ছবিগুলো কখন ভিউপোর্টে আসছে তা ট্র্যাক করে।
  4. যখন একটি ছবি ভিউপোর্টে আসে, তখন data-src থেকে আসল URL নিয়ে src অ্যাট্রিবিউটে সেট করা হয়।
  5. পুরনো ব্রাউজারের জন্য একটি ফলব্যাক ব্যবস্থা রাখা হয়েছে, যেখানে সব ছবি একসাথে লোড হবে।

এই পদ্ধতিতে, শুধুমাত্র ব্যবহারকারী যে ছবিগুলো দেখতে যাচ্ছে সেগুলোই লোড হবে, যা ওয়েবসাইটের পারফরম্যান্স উন্নত করবে।

How can we help?