অলস লোডিং ইমেজ

জেরেমি ওয়াগনার
রাচেল অ্যান্ড্রু

HTML এ <img> উপাদান বা CSS ব্যাকগ্রাউন্ড ইমেজ হিসাবে ইনলাইন থাকার কারণে ছবিগুলি ওয়েবপেজে প্রদর্শিত হতে পারে। এই পোস্টে আপনি উভয় ধরনের ইমেজ অলস-লোড কিভাবে খুঁজে পাবেন.

ইনলাইন ইমেজ

সবচেয়ে সাধারণ অলস লোডিং প্রার্থী হল <img> উপাদানে ব্যবহৃত ছবি। ইনলাইন চিত্রগুলির সাথে আমাদের কাছে অলস লোডিংয়ের জন্য তিনটি বিকল্প রয়েছে, যা ব্রাউজার জুড়ে সর্বোত্তম সামঞ্জস্যের জন্য সংমিশ্রণে ব্যবহার করা যেতে পারে:

ব্রাউজার-স্তরের অলস লোডিং ব্যবহার করা

ক্রোম এবং ফায়ারফক্স উভয়ই loading বৈশিষ্ট্য সহ অলস লোডিং সমর্থন করে। এই বৈশিষ্ট্যটি <img> উপাদানগুলিতে এবং <iframe> উপাদানগুলিতে যোগ করা যেতে পারে। lazy একটি মান ব্রাউজারকে ইমেজটি ভিউপোর্টে থাকলে অবিলম্বে লোড করতে এবং ব্যবহারকারী যখন তাদের কাছাকাছি স্ক্রোল করে তখন অন্যান্য ছবি আনতে বলে।

ব্রাউজার সমর্থনের বিশদ বিবরণের জন্য MDN এর ব্রাউজার সামঞ্জস্য টেবিলের loading ক্ষেত্রটি দেখুন। যদি ব্রাউজার অলস লোডিং সমর্থন না করে তবে বৈশিষ্ট্যটি উপেক্ষা করা হবে এবং চিত্রগুলি স্বাভাবিক হিসাবে অবিলম্বে লোড হবে৷

বেশিরভাগ ওয়েবসাইটের জন্য, ইনলাইন চিত্রগুলিতে এই বৈশিষ্ট্যটি যোগ করা একটি কর্মক্ষমতা বৃদ্ধি করবে এবং ব্যবহারকারীদের ছবি লোড করার সময় সংরক্ষণ করবে যা তারা কখনও স্ক্রোল করতে পারবে না৷ আপনার যদি প্রচুর সংখ্যক ছবি থাকে এবং আপনি নিশ্চিত হতে চান যে ব্রাউজারগুলির ব্যবহারকারীরা অলস লোডিং সুবিধার সমর্থন ছাড়াই আপনাকে পরবর্তী ব্যাখ্যা করা পদ্ধতিগুলির সাথে এটি একত্রিত করতে হবে।

আরও জানতে, ওয়েবের জন্য ব্রাউজার-স্তরের অলস লোডিং দেখুন।

ছেদ পর্যবেক্ষক ব্যবহার করে

<img> উপাদানগুলির অলস লোডিং পলিফিল করতে, আমরা জাভাস্ক্রিপ্ট ব্যবহার করি তারা ভিউপোর্টে আছে কিনা তা পরীক্ষা করতে। যদি সেগুলি হয়, তবে তাদের src (এবং কখনও কখনও srcset ) বৈশিষ্ট্যগুলি পছন্দসই চিত্র সামগ্রীতে URL দিয়ে পপুলেট করা হয়৷

আপনি যদি আগে অলস লোডিং কোড লিখে থাকেন, তাহলে আপনি ইভেন্ট হ্যান্ডলার যেমন scroll বা resize ব্যবহার করে আপনার কাজটি সম্পন্ন করতে পারেন। যদিও এই পদ্ধতিটি ব্রাউজারগুলির মধ্যে সবচেয়ে সামঞ্জস্যপূর্ণ, আধুনিক ব্রাউজারগুলি ইন্টারসেকশন অবজারভার API এর মাধ্যমে উপাদানের দৃশ্যমানতা পরীক্ষা করার কাজটি করার জন্য আরও কার্যকরী এবং দক্ষ উপায় অফার করে।

বিভিন্ন ইভেন্ট হ্যান্ডলারের উপর নির্ভর করে কোডের চেয়ে ইন্টারসেকশন অবজারভার ব্যবহার করা এবং পড়া সহজ, কারণ ক্লান্তিকর উপাদান দৃশ্যমানতা সনাক্তকরণ কোড লেখার পরিবর্তে উপাদানগুলি দেখার জন্য আপনাকে শুধুমাত্র একজন পর্যবেক্ষক নিবন্ধন করতে হবে। একটি উপাদান দৃশ্যমান হলে কি করতে হবে তা ঠিক করা বাকি আছে। আপনার অলসভাবে লোড করা <img> উপাদানগুলির জন্য এই মৌলিক মার্কআপ প্যাটার্নটি ধরে নেওয়া যাক:

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">

এই মার্কআপের তিনটি প্রাসঙ্গিক টুকরা রয়েছে যেগুলিতে আপনার ফোকাস করা উচিত:

  1. class অ্যাট্রিবিউট, যা আপনি জাভাস্ক্রিপ্টে উপাদান নির্বাচন করবেন।
  2. src বৈশিষ্ট্য, যা একটি স্থানধারক চিত্রের উল্লেখ করে যা পৃষ্ঠাটি প্রথম লোড হলে প্রদর্শিত হবে।
  3. data-src এবং data-srcset অ্যাট্রিবিউটগুলি, যেগুলি হল প্লেসহোল্ডার অ্যাট্রিবিউট যাতে ভিউপোর্টে উপাদানটি উপস্থিত হলে আপনি যে ছবির URL লোড করবেন।

এখন এই মার্কআপ প্যাটার্নটি ব্যবহার করে অলস-লোড চিত্রগুলি জাভাস্ক্রিপ্টে ইন্টারসেকশন অবজারভার ব্যবহার করা যাক:

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  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.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
});

ডকুমেন্টের DOMContentLoaded ইভেন্টে, এই স্ক্রিপ্টটি lazy শ্রেণির সমস্ত <img> উপাদানের জন্য DOM-কে জিজ্ঞাসা করে। ইন্টারসেকশন অবজারভার উপলব্ধ থাকলে, একটি নতুন পর্যবেক্ষক তৈরি করুন যা একটি কলব্যাক চালায় যখন img.lazy উপাদান ভিউপোর্টে প্রবেশ করে।

ইন্টারসেকশন অবজারভার সব আধুনিক ব্রাউজারে পাওয়া যায়। তাই এটিকে loading="lazy" নিশ্চিত করবে যে বেশিরভাগ দর্শকদের জন্য অলস লোডিং উপলব্ধ।

CSS-এ ছবি

যদিও <img> ট্যাগগুলি ওয়েব পৃষ্ঠাগুলিতে চিত্রগুলি ব্যবহার করার সবচেয়ে সাধারণ উপায়, ছবিগুলিকে CSS background-image বৈশিষ্ট্য (এবং অন্যান্য বৈশিষ্ট্য) এর মাধ্যমেও আহ্বান করা যেতে পারে। ব্রাউজার-স্তরের অলস লোডিং CSS ব্যাকগ্রাউন্ড ইমেজগুলিতে প্রযোজ্য নয়, তাই আপনার যদি অলস-লোড করার জন্য ব্যাকগ্রাউন্ড ইমেজ থাকে তবে আপনাকে অন্যান্য পদ্ধতি বিবেচনা করতে হবে।

<img> উপাদানগুলির বিপরীতে যা তাদের দৃশ্যমানতা নির্বিশেষে লোড করে, CSS-এ চিত্র লোডিং আচরণ আরও অনুমান সহ করা হয়। যখন ডকুমেন্ট এবং সিএসএস অবজেক্ট মডেল এবং রেন্ডার ট্রি তৈরি করা হয়, তখন ব্রাউজার এক্সটার্নাল রিসোর্সের অনুরোধ করার আগে একটি ডকুমেন্টে কিভাবে সিএসএস প্রয়োগ করা হয় তা পরীক্ষা করে। যদি ব্রাউজার একটি বাহ্যিক সম্পদের সাথে জড়িত একটি CSS নিয়ম নির্ধারণ করে থাকে যেটি বর্তমানে তৈরি করা নথিতে প্রযোজ্য নয়, ব্রাউজার এটির অনুরোধ করে না।

এই অনুমানমূলক আচরণটি জাভাস্ক্রিপ্ট ব্যবহার করে সিএসএস-এ ছবি লোড করা স্থগিত করতে ব্যবহার করা যেতে পারে যখন একটি উপাদান ভিউপোর্টের মধ্যে থাকে তা নির্ধারণ করতে এবং পরবর্তীতে সেই উপাদানটিতে একটি শ্রেণী প্রয়োগ করে যা একটি ব্যাকগ্রাউন্ড ইমেজ আহ্বান করে স্টাইলিং প্রয়োগ করে। এটি প্রাথমিক লোডের পরিবর্তে প্রয়োজনের সময় ইমেজ ডাউনলোড করার কারণ হয়। উদাহরণস্বরূপ, আসুন এমন একটি উপাদান নেওয়া যাক যাতে একটি বড় হিরো ব্যাকগ্রাউন্ড ইমেজ রয়েছে:

<div class="lazy-background">
  <h1>Here's a hero heading to get your attention!</h1>
  <p>Here's hero copy to convince you to buy a thing!</p>
  <a href="/buy-a-thing">Buy a thing!</a>
</div>

div.lazy-background এলিমেন্টে সাধারণত কিছু CSS দ্বারা আমন্ত্রিত হিরো ব্যাকগ্রাউন্ড ইমেজ থাকে। এই অলস লোডিং উদাহরণে, যাইহোক, আপনি div.lazy-background এলিমেন্টের background-image প্রপার্টিটি ভিউপোর্টে থাকা এলিমেন্টে যোগ করা visible ক্লাসের মাধ্যমে আলাদা করতে পারেন:

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
}

এখান থেকে, উপাদানটি ভিউপোর্টে আছে কিনা তা পরীক্ষা করতে JavaScript ব্যবহার করুন (ইন্টারসেকশন অবজারভারের সাথে!), এবং সেই সময়ে visible শ্রেণীটি div.lazy-background এলিমেন্টে যোগ করুন, যা ছবিটি লোড করে:

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

সবচেয়ে বড় কন্টেন্টফুল পেইন্টের (LCP) উপর প্রভাব

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

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

JavaScript-ভিত্তিক অলস লোডার ব্যবহার করার সময়, আপনি অলস লোডিং ইন-ভিউপোর্ট চিত্রগুলি এড়াতে চাইবেন কারণ এই সমাধানগুলি প্রায়শই src এবং srcset বৈশিষ্ট্যগুলির জন্য একটি স্থানধারক হিসাবে data-src বা data-srcset বৈশিষ্ট্য ব্যবহার করে। এখানে সমস্যা হল এই ছবিগুলি লোড হতে দেরি হবে কারণ ব্রাউজার প্রিলোড স্ক্যানার স্টার্টআপের সময় সেগুলি খুঁজে পায় না ৷

এমনকি ব্রাউজার-লেভেল অলস লোডিং ব্যবহার করে অলস লোড করার জন্য একটি ইন-ভিউপোর্ট ইমেজ ব্যাকফায়ার করতে পারে। যখন একটি ইন-ভিউপোর্ট ইমেজে loading="lazy" প্রয়োগ করা হয়, তখন ব্রাউজার নিশ্চিত না হওয়া পর্যন্ত যে ছবিটি ভিউপোর্টে রয়েছে তা দেরি হবে , যা একটি পৃষ্ঠার LCP-কে প্রভাবিত করতে পারে।

স্টার্টআপের সময় ভিউপোর্টে দৃশ্যমান ছবিগুলি কখনই অলস লোড করবেন না। এটি এমন একটি প্যাটার্ন যা আপনার সাইটের এলসিপিকে নেতিবাচকভাবে প্রভাবিত করবে এবং তাই ব্যবহারকারীর অভিজ্ঞতা। আপনার যদি স্টার্টআপের সময় একটি চিত্রের প্রয়োজন হয়, তবে অলস লোড না করে যত তাড়াতাড়ি সম্ভব স্টার্টআপে এটি লোড করুন!

অলস লোডিং লাইব্রেরি

আপনার ব্রাউজার-স্তরের অলস লোডিং ব্যবহার করা উচিত যখনই সম্ভব, কিন্তু আপনি যদি নিজেকে এমন একটি পরিস্থিতিতে খুঁজে পান যেখানে এটি একটি বিকল্প নয় - যেমন ব্যবহারকারীদের একটি উল্লেখযোগ্য গোষ্ঠী এখনও পুরানো ব্রাউজারগুলির উপর নির্ভরশীল - নিম্নলিখিত লাইব্রেরিগুলি অলস-লোড করতে ব্যবহার করা যেতে পারে ছবি:

  • lazysizes হল একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত অলস লোডিং লাইব্রেরি যা অলস-লোড করে ছবি এবং আইফ্রেম। এটি যে প্যাটার্নটি ব্যবহার করে তা এখানে দেখানো কোড উদাহরণগুলির সাথে বেশ মিল যে এটি স্বয়ংক্রিয়ভাবে <img> উপাদানগুলিতে একটি lazyload ক্লাসের সাথে আবদ্ধ হয়, এবং আপনাকে data-src এবং/অথবা data-srcset বৈশিষ্ট্যগুলিতে চিত্র URLগুলি নির্দিষ্ট করতে হবে, এর বিষয়বস্তু যা যথাক্রমে src এবং/অথবা srcset বৈশিষ্ট্যে অদলবদল করা হয়। এটি ইন্টারসেকশন অবজারভার ব্যবহার করে (যা আপনি পলিফিল করতে পারেন), এবং অলস-লোড ভিডিওর মতো জিনিসগুলি করতে অনেকগুলি প্লাগইন দিয়ে প্রসারিত করা যেতে পারে। Lazysizes ব্যবহার সম্পর্কে আরও জানুন ।
  • ভ্যানিলা-ল্যাজিলোড হল অলস লোডিং ইমেজ, ব্যাকগ্রাউন্ড ইমেজ, ভিডিও, আইফ্রেম এবং স্ক্রিপ্টের জন্য একটি হালকা বিকল্প। এটি ইন্টারসেকশন অবজারভারের সুবিধা দেয়, প্রতিক্রিয়াশীল চিত্রগুলিকে সমর্থন করে এবং ব্রাউজার-স্তরের অলস লোডিং সক্ষম করে।
  • lozad.js হল আরেকটি হালকা বিকল্প যা শুধুমাত্র ইন্টারসেকশন অবজারভার ব্যবহার করে। যেমন, এটি অত্যন্ত পারফরম্যান্স, কিন্তু আপনি পুরানো ব্রাউজারে এটি ব্যবহার করার আগে পলিফিল করতে হবে।
  • আপনার যদি একটি রিঅ্যাক্ট-নির্দিষ্ট অলস লোডিং লাইব্রেরির প্রয়োজন হয়, তাহলে react-lazyload বিবেচনা করুন। যদিও এটি ইন্টারসেকশন পর্যবেক্ষক ব্যবহার করে না, এটি প্রতিক্রিয়া সহ অ্যাপ্লিকেশন বিকাশে অভ্যস্ত তাদের জন্য অলস লোডিং চিত্রগুলির একটি পরিচিত পদ্ধতি প্রদান করে ।