ওয়েবের জন্য ব্রাউজার-স্তরের ছবি অলস লোড হচ্ছে

অন্তর্নির্মিত অলস লোডিং অবশেষে এখানে!

আদ্দি ওসমানী

হোসাইন জিরদেহ

ম্যাথিয়াস বাইনেন্স

ব্যারি পোলার্ড

অলস লোডিং চিত্রগুলির জন্য ব্রাউজার-স্তরের সমর্থন এখন ওয়েবে সমর্থিত! এই ভিডিওটি বৈশিষ্ট্যটির একটি ডেমো দেখায়:

আপনি কাস্টম অলস লোডিং কোড লিখতে বা একটি পৃথক জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করার প্রয়োজন ছাড়াই অলস-লোড চিত্রগুলিতে loading বৈশিষ্ট্যটি ব্যবহার করতে পারেন। আসুন বিস্তারিত মধ্যে ডুব.

ব্রাউজার সামঞ্জস্য

যেসব ব্রাউজার loading অ্যাট্রিবিউট সমর্থন করে না তারা পার্শ্বপ্রতিক্রিয়া ছাড়াই এটিকে উপেক্ষা করে।

কেন ব্রাউজার-স্তরের অলস লোড হচ্ছে?

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

পূর্বে, অফ-স্ক্রিন চিত্রগুলির লোডিং স্থগিত করার দুটি উপায় ছিল:

• ইন্টারসেকশন অবজারভার API ব্যবহার করে
• scroll , resize , বা orientationchange ইভেন্ট হ্যান্ডলার ব্যবহার করে

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

loading বৈশিষ্ট্য

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

আপনি স্ক্রল করার মাধ্যমে পৌঁছানো অফস্ক্রিন চিত্রগুলির লোডিং সম্পূর্ণরূপে স্থগিত করতে loading বৈশিষ্ট্যটি ব্যবহার করতে পারেন:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

এখানে loading বৈশিষ্ট্যের জন্য সমর্থিত মান রয়েছে:

• lazy : রিসোর্স লোড করা স্থগিত করুন যতক্ষণ না এটি ভিউপোর্ট থেকে একটি গণনাকৃত দূরত্বে পৌঁছায়।
• eager : ব্রাউজারের ডিফল্ট লোডিং আচরণ, যা অ্যাট্রিবিউট অন্তর্ভুক্ত না করার মতোই এবং এর অর্থ হল পৃষ্ঠায় যেখানেই থাকুক না কেন ছবিটি লোড করা হয়েছে। যদিও এটি ডিফল্ট, এটি স্পষ্টভাবে সেট করা উপযোগী হতে পারে যদি আপনার টুলিং স্বয়ংক্রিয়ভাবে loading="lazy" যোগ করে যদি কোন সুস্পষ্ট মান না থাকে, অথবা যদি আপনার লিন্টারটি স্পষ্টভাবে সেট না থাকলে অভিযোগ করে।

loading অ্যাট্রিবিউট এবং ফেচ অগ্রাধিকারের মধ্যে সম্পর্ক

ইমেজটিকে স্বাভাবিকভাবে লোড করার জন্য eager মান হল একটি নির্দেশনা, যদি এটি অফ-স্ক্রিন হয় তবে লোড হতে দেরি না করে। এটা বোঝায় না যে ইমেজটি loading="eager" অ্যাট্রিবিউট ছাড়াই অন্য ইমেজের চেয়ে দ্রুত লোড হয়।

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

আপনি যদি একটি গুরুত্বপূর্ণ চিত্রের (উদাহরণস্বরূপ LCP চিত্র) আনার অগ্রাধিকার বাড়াতে চান, তাহলে fetchpriority="high" এর সাথে ফেচ অগ্রাধিকার ব্যবহার করা উচিত।

মনে রাখবেন যে loading="lazy" এবং fetchpriority="high" সহ একটি ইমেজ অফ-স্ক্রীন থাকা অবস্থায় এখনও বিলম্বিত হবে, এবং তারপর একটি উচ্চ অগ্রাধিকার দিয়ে আনা হবে যখন এটি প্রায় ভিউপোর্টের মধ্যে থাকবে৷ এটি সম্ভবত এই ক্ষেত্রে একটি উচ্চ অগ্রাধিকার দিয়ে আনা হবে, তাই এই সংমিশ্রণটি সত্যিই প্রয়োজন বা ব্যবহার করা উচিত নয়।

ভিউপোর্ট থ্রেশহোল্ড থেকে দূরত্ব

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

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

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

দূরত্ব থ্রেশহোল্ড স্থির নয় এবং বিভিন্ন কারণের উপর নির্ভর করে পরিবর্তিত হয়:

• যে ধরনের ছবি রিসোর্স আনা হচ্ছে
• কার্যকর সংযোগের ধরন

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

উন্নত ডেটা-সঞ্চয় এবং দূরত্ব-থেকে-ভিউপোর্ট থ্রেশহোল্ড

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

দ্রুত সংযোগে (4G), আমরা Chrome-এর দূরত্ব-থেকে-ভিউপোর্ট থ্রেশহোল্ড 3000px থেকে কমিয়ে 1250px এবং ধীর সংযোগে (3G বা কম), থ্রেশহোল্ডকে 4000px থেকে 2500px এ পরিবর্তন করেছি। এই পরিবর্তন দুটি জিনিস অর্জন করে:

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

আপনি নীচে একটি দ্রুত সংযোগে (4G) আমাদের ডেমোগুলির একটির জন্য পুরানো বনাম নতুন দূরত্ব-থেকে-ভিউপোর্ট থ্রেশহোল্ডের মধ্যে একটি তুলনা খুঁজে পেতে পারেন:

পুরাতন থ্রেশহোল্ড। বনাম নতুন থ্রেশহোল্ড:

এবং নতুন থ্রেশহোল্ড বনাম LazySizes (একটি জনপ্রিয় JS অলস লোডিং লাইব্রেরি):

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

চিত্রগুলিতে মাত্রা বৈশিষ্ট্য অন্তর্ভুক্ত করা উচিত

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

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

বিকল্পভাবে, একটি ইনলাইন শৈলীতে সরাসরি তাদের মান নির্দিষ্ট করুন:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

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

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

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

যদিও Chromium-এ অলস লোডিং এমনভাবে প্রয়োগ করা হয়েছে যাতে ছবিগুলি দৃশ্যমান হওয়ার পরে লোড হওয়ার সম্ভাবনা থাকে, তবুও সেগুলি লোড না হওয়ার একটি ছোট সম্ভাবনা রয়েছে৷ এই ক্ষেত্রে, এই ধরনের চিত্রগুলিতে অনুপস্থিত width এবং height বৈশিষ্ট্যগুলি ক্রমবর্ধমান বিন্যাস শিফটে তাদের প্রভাবকে বাড়িয়ে তোলে।

<picture> উপাদান ব্যবহার করে সংজ্ঞায়িত ছবিগুলিও অলস-লোড হতে পারে:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

যদিও একটি ব্রাউজার সিদ্ধান্ত নেবে কোন <source> উপাদান থেকে কোন ছবি লোড করা হবে, loading বৈশিষ্ট্য শুধুমাত্র ফলব্যাক <img> উপাদানে অন্তর্ভুক্ত করা প্রয়োজন।

প্রথম দৃশ্যমান ভিউপোর্টে অলস লোড করা ছবিগুলি এড়িয়ে চলুন

আপনার প্রথম দৃশ্যমান ভিউপোর্টে থাকা যেকোনো ছবির জন্য loading=lazy সেট করা এড়াতে হবে। এটি LCP চিত্রগুলির জন্য বিশেষভাবে প্রাসঙ্গিক৷ আরও তথ্যের জন্য খুব বেশি অলস-লোডিংয়ের কার্যক্ষমতা প্রভাব নিবন্ধটি দেখুন।

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

সাধারণত, ভিউপোর্টের মধ্যে থাকা যেকোনো ছবি ব্রাউজারের ডিফল্ট ব্যবহার করে সাগ্রহে লোড করা উচিত। ইন-ভিউপোর্ট চিত্রগুলির ক্ষেত্রে এটির জন্য আপনাকে loading=eager উল্লেখ করার দরকার নেই।

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

সাবলীল পতন

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

FAQ

ক্রোমে স্বয়ংক্রিয়ভাবে অলস-লোড চিত্রগুলি করার পরিকল্পনা আছে কি?

পূর্বে, ক্রোমিয়াম স্বয়ংক্রিয়ভাবে অলস-লোড করা যেকোন ছবিগুলিকে পিছিয়ে দেওয়ার জন্য উপযুক্ত ছিল যদি Android এর জন্য Chrome এ লাইট মোড সক্ষম করা থাকে এবং loading বৈশিষ্ট্যটি হয় প্রদান করা হয়নি বা loading="auto" হিসাবে সেট করা হয়েছিল। যাইহোক, লাইট মোড বাতিল করা হয়েছে (যেমনটি ছিল অ-মানক loading="auto" ) এবং বর্তমানে Chrome-এ স্বয়ংক্রিয়ভাবে অলস-লোড ছবি দেওয়ার কোনো পরিকল্পনা নেই৷

একটি লোড ট্রিগার হওয়ার আগে একটি চিত্র কতটা কাছাকাছি হওয়া দরকার তা কি আমি পরিবর্তন করতে পারি?

এই মানগুলি হার্ডকোড করা হয়েছে এবং API এর মাধ্যমে পরিবর্তন করা যাবে না। যাইহোক, ব্রাউজার বিভিন্ন থ্রেশহোল্ড দূরত্ব এবং ভেরিয়েবল নিয়ে পরীক্ষা করার কারণে ভবিষ্যতে তারা পরিবর্তিত হতে পারে।

CSS ব্যাকগ্রাউন্ড ইমেজ কি loading অ্যাট্রিবিউটের সুবিধা নিতে পারে?

না, এটি বর্তমানে শুধুমাত্র <img> ট্যাগের সাথে ব্যবহার করা যেতে পারে।

ডিভাইস ভিউপোর্টের মধ্যে থাকা অলস লোডিং ইমেজগুলির একটি খারাপ দিক আছে কি?

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

ভিউপোর্টে থাকা কিন্তু অবিলম্বে দৃশ্যমান নয় এমন চিত্রগুলির সাথে loading বৈশিষ্ট্য কীভাবে কাজ করে (উদাহরণস্বরূপ: একটি ক্যারাউজেলের পিছনে, বা নির্দিষ্ট স্ক্রিনের আকারের জন্য CSS দ্বারা লুকানো)?

loading="lazy" ব্যবহার করলে তাদের লোড হওয়া আটকাতে পারে যখন তারা দৃশ্যমান নয় কিন্তু গণনাকৃত দূরত্বের মধ্যে। উদাহরণস্বরূপ, ক্রোম, সাফারি এবং ফায়ারফক্স display: none; স্টাইলিং—হয় ইমেজ এলিমেন্টে বা প্যারেন্ট এলিমেন্টে। যাইহোক, ছবি লুকানোর অন্যান্য কৌশল-যেমন opacity:0 স্টাইলিং-এর ফলে ছবিগুলি লোড হবে। সর্বদা আপনার বাস্তবায়নটি ভালভাবে পরীক্ষা করুন যাতে এটি উদ্দেশ্য অনুযায়ী কাজ করছে।

যদি আমি ইতিমধ্যেই একটি তৃতীয় পক্ষের লাইব্রেরি বা অলস-লোড চিত্রগুলির জন্য একটি স্ক্রিপ্ট ব্যবহার করছি?

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

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

অলস লোডিং সমর্থন করে না এমন ব্রাউজারগুলিকে আমি কীভাবে পরিচালনা করব?

একটি পলিফিল তৈরি করুন বা আপনার সাইটে অলস-লোড চিত্রগুলির জন্য একটি তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করুন৷ বৈশিষ্ট্যটি ব্রাউজারে সমর্থিত কিনা তা সনাক্ত করতে loading বৈশিষ্ট্য ব্যবহার করা যেতে পারে:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

উদাহরণস্বরূপ, lazysizes একটি জনপ্রিয় জাভাস্ক্রিপ্ট অলস লোডিং লাইব্রেরি। loading সমর্থিত না হলেই আপনি ফলব্যাক লাইব্রেরি হিসাবে ল্যাজিসাইজ লোড করার জন্য loading বৈশিষ্ট্যের জন্য সমর্থন সনাক্ত করতে পারেন। এটি নিম্নরূপ কাজ করে:

• অসমর্থিত ব্রাউজারগুলিতে একটি আগ্রহী লোড এড়াতে <img src> কে <img data-src> দিয়ে প্রতিস্থাপন করুন। যদি loading বৈশিষ্ট্যটি সমর্থিত হয়, src এর জন্য data-src অদলবদল করুন।
• loading সমর্থিত না হলে, একটি ফলব্যাক লোড করুন (লেজিসাইজ) এবং এটি শুরু করুন। lazysizes ডক্স অনুযায়ী, আপনি lazysizes ইঙ্গিত করার উপায় হিসাবে lazyload ক্লাস ব্যবহার করেন কোন চিত্রগুলি অলস-লোড করতে হবে।

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

এখানে এই প্যাটার্নের একটি ডেমো আছে. ফলব্যাক অ্যাকশনে দেখতে একটি পুরানো ব্রাউজারে এটি ব্যবহার করে দেখুন।

আইফ্রেমের জন্য অলস লোডিং কি ব্রাউজারেও সমর্থিত?

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

ব্রাউজার-স্তরের অলস লোডিং কীভাবে একটি ওয়েব পৃষ্ঠায় বিজ্ঞাপনগুলিকে প্রভাবিত করে?

সমস্ত বিজ্ঞাপন ব্যবহারকারীর কাছে ইমেজ আকারে প্রদর্শিত হয় বা অন্য যেকোন ইমেজ বা আইফ্রেমের মতোই আইফ্রেম অলস-লোড।

একটি ওয়েব পৃষ্ঠা মুদ্রিত হলে ছবিগুলি কীভাবে পরিচালনা করা হয়?

পৃষ্ঠাটি মুদ্রিত হলে সমস্ত ছবি এবং আইফ্রেম অবিলম্বে লোড হয়। বিস্তারিত জানার জন্য সংখ্যা #875403 দেখুন।

বাতিঘর কি ব্রাউজার-স্তরের অলস লোডিং চিনতে পারে?

Lighthouse 6.0 এবং তার উপরে ফ্যাক্টর অফস্ক্রিন ইমেজ অলস লোডিং এর জন্য পন্থা যা বিভিন্ন থ্রেশহোল্ড ব্যবহার করতে পারে, তাদের অফস্ক্রিন ইমেজ অডিট ডিফার করার অনুমতি দেয়।

উপসংহার

অলস লোডিং চিত্রগুলির সমর্থনে বেকিং আপনার ওয়েব পৃষ্ঠাগুলির কার্যকারিতা উন্নত করা আপনার পক্ষে উল্লেখযোগ্যভাবে সহজ করে তুলতে পারে।

আপনি কি Chrome-এ এই বৈশিষ্ট্যটি সক্ষম করে কোনো অস্বাভাবিক আচরণ লক্ষ্য করছেন? একটি বাগ ফাইল করুন !