অলস লোডিং সেরা অনুশীলন

Jeremy Wagner

Rachel Andrew

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

ভাঁজ মন

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

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

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

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

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  // lazy-loading image code goes here
}, {
  rootMargin: "0px 0px 256px 0px"
});

যদি rootMargin এর মানটি আপনি একটি CSS margin প্রপার্টির জন্য নির্দিষ্ট করা মানগুলির অনুরূপ দেখায়, কারণ এটি! এই ক্ষেত্রে, পর্যবেক্ষণ করা উপাদানের নীচের মার্জিন (ডিফল্টরূপে ব্রাউজার ভিউপোর্ট, তবে এটি root বৈশিষ্ট্য ব্যবহার করে একটি নির্দিষ্ট উপাদানে পরিবর্তন করা যেতে পারে) 256 পিক্সেল দ্বারা প্রসারিত হয়। তার মানে কলব্যাক ফাংশনটি কার্যকর হবে যখন একটি চিত্র উপাদান ভিউপোর্টের 256 পিক্সেলের মধ্যে থাকবে এবং ব্যবহারকারী আসলে এটি দেখার আগেই ছবিটি লোড হতে শুরু করবে।

ইন্টারসেকশন অবজারভ সমর্থন করে না এমন ব্রাউজারগুলিতে এই একই প্রভাব অর্জন করতে, স্ক্রোল ইভেন্ট হ্যান্ডলিং কোড ব্যবহার করুন এবং একটি বাফার অন্তর্ভুক্ত করতে আপনার getBoundingClientRect চেক সামঞ্জস্য করুন।

লেআউট স্থানান্তর এবং স্থানধারক

অলস লোডিং মিডিয়া লেআউটে স্থানান্তরিত হতে পারে যদি স্থানধারক ব্যবহার না করা হয়। এই পরিবর্তনগুলি ব্যবহারকারীদের জন্য বিভ্রান্তিকর হতে পারে এবং ব্যয়বহুল DOM লেআউট ক্রিয়াকলাপগুলিকে ট্রিগার করতে পারে যা সিস্টেম সংস্থানগুলি ব্যবহার করে এবং জ্যাঙ্কে অবদান রাখে। ন্যূনতম, লক্ষ্য চিত্রের মতো একই মাত্রা দখল করে একটি কঠিন রঙের স্থানধারক বা LQIP বা SQIP- এর মতো কৌশলগুলি ব্যবহার করার কথা বিবেচনা করুন যা একটি মিডিয়া আইটেমের বিষয়বস্তু লোড হওয়ার আগে ইঙ্গিত করে৷

<img> ট্যাগের জন্য, src প্রাথমিকভাবে একটি স্থানধারকের দিকে নির্দেশ করবে যতক্ষণ না সেই বৈশিষ্ট্যটি চূড়ান্ত চিত্র URL-এর সাথে আপডেট করা হয়। একটি স্থানধারক ইমেজ নির্দেশ করতে একটি <video> উপাদানে poster বৈশিষ্ট্য ব্যবহার করুন. উপরন্তু, <img> এবং <video> ট্যাগ উভয় ক্ষেত্রে width এবং height বৈশিষ্ট্য ব্যবহার করুন। এটি নিশ্চিত করে যে স্থানধারক থেকে চূড়ান্ত চিত্রগুলিতে রূপান্তর মিডিয়া লোড হিসাবে উপাদানটির রেন্ডার করা আকার পরিবর্তন করবে না।

ছবি ডিকোডিং বিলম্ব

জাভাস্ক্রিপ্টে বড় ছবি লোড করা এবং সেগুলিকে DOM-এ ড্রপ করা মূল থ্রেডকে বেঁধে ফেলতে পারে, যার ফলে ডিকোডিং হওয়ার সময় ব্যবহারকারীর ইন্টারফেসটি অল্প সময়ের জন্য প্রতিক্রিয়াহীন হয়ে পড়ে। DOM-এ ঢোকানোর আগে decode পদ্ধতি ব্যবহার করে অ্যাসিঙ্ক্রোনাসলি ডিকোড করা ছবিগুলি এই ধরণের জ্যাঙ্ককে কমিয়ে দিতে পারে, কিন্তু সাবধান: এটি এখনও সর্বত্র উপলব্ধ নয়, এবং এটি অলস লোডিং যুক্তিতে জটিলতা যোগ করে৷ আপনি যদি এটি ব্যবহার করতে চান তবে আপনাকে এটি পরীক্ষা করতে হবে। নিচে দেখানো হয়েছে কিভাবে আপনি একটি ফলব্যাক সহ Image.decode() ব্যবহার করতে পারেন:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

if ("decode" in newImage) {
  // Fancy decoding logic
  newImage.decode().then(function() {
    imageContainer.appendChild(newImage);
  });
} else {
  // Regular image load
  imageContainer.appendChild(newImage);
}

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

যখন জিনিসপত্র লোড হয় না

কখনও কখনও মিডিয়া সংস্থানগুলি এক বা অন্য কারণে লোড হতে ব্যর্থ হয় এবং ত্রুটি ঘটে। কখন এই ঘটতে পারে? এটি নির্ভর করে, তবে এখানে আপনার জন্য একটি অনুমানমূলক দৃশ্যকল্প রয়েছে: আপনার কাছে একটি স্বল্প সময়ের জন্য একটি HTML ক্যাশিং নীতি রয়েছে (যেমন, পাঁচ মিনিট), এবং ব্যবহারকারী সাইটটি ভিজিট করেন বা ব্যবহারকারীর একটি বাসি ট্যাব দীর্ঘ সময়ের জন্য খোলা থাকে সময়ের (যেমন, কয়েক ঘন্টা) এবং আপনার বিষয়বস্তু পড়তে ফিরে আসে। এই প্রক্রিয়ার কিছু সময়ে, একটি পুনঃনিয়োগ ঘটে। এই স্থাপনার সময়, হ্যাশ-ভিত্তিক সংস্করণের কারণে একটি চিত্র সম্পদের নাম পরিবর্তিত হয়, বা সম্পূর্ণরূপে সরানো হয়। ব্যবহারকারী অলসভাবে ছবিটি লোড করার সময়, সংস্থানটি অনুপলব্ধ থাকে এবং এইভাবে ব্যর্থ হয়।

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

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

newImage.onerror = function(){
  // Decide what to do on error
};
newImage.onload = function(){
  // Load the image
};

একটি ত্রুটির ক্ষেত্রে আপনি কী করবেন তা আপনার আবেদনের উপর নির্ভর করে। উদাহরণস্বরূপ, আপনি একটি বোতাম দিয়ে চিত্র স্থানধারক এলাকাটি প্রতিস্থাপন করতে পারেন যা ব্যবহারকারীকে চিত্রটি আবার লোড করার চেষ্টা করতে দেয়, বা চিত্র স্থানধারক এলাকায় একটি ত্রুটি বার্তা প্রদর্শন করতে দেয়।

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

জাভাস্ক্রিপ্ট উপলব্ধতা

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

জাভাস্ক্রিপ্ট বন্ধ থাকলে, ব্যবহারকারীরা প্লেসহোল্ডার ইমেজ এবং <noscript> এলিমেন্ট সহ ইমেজ উভয়ই দেখতে পাবেন। এটির কাছাকাছি যাওয়ার জন্য, <html> ট্যাগে no-js এর একটি ক্লাস রাখুন এভাবে:

<html class="no-js">

তারপর কোনো স্টাইল শীট <link> ট্যাগের মাধ্যমে অনুরোধ করার আগে <head> এ ইনলাইন স্ক্রিপ্টের একটি লাইন রাখুন যা JavaScript চালু থাকলে <html> উপাদান থেকে no-js ক্লাস সরিয়ে দেয়:

<script>document.documentElement.classList.remove("no-js");</script>

অবশেষে, যখন জাভাস্ক্রিপ্ট অনুপলব্ধ থাকে তখন অলস শ্রেণীর সাথে উপাদানগুলি লুকানোর জন্য কিছু CSS ব্যবহার করুন:

.no-js .lazy {
  display: none;
}

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