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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

আপনি কাস্টম লেজি-লোডিং কোড লেখা বা আলাদা কোনো জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করা ছাড়াই loading অ্যাট্রিবিউটের সাহায্যে ছবি লেজি-লোড করতে পারেন। এখানে ফিচারটির একটি ডেমো দেওয়া হলো:

এই পৃষ্ঠায় ব্রাউজারে লেজি-লোডিং বাস্তবায়নের বিস্তারিত আলোচনা করা হয়েছে।

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

HTTP Archive অনুসারে, বেশিরভাগ ওয়েবসাইটের জন্য ছবি হলো সবচেয়ে বেশি অনুরোধ করা অ্যাসেট টাইপ, এবং এগুলো সাধারণত অন্য যেকোনো রিসোর্সের চেয়ে বেশি ব্যান্ডউইথ ব্যবহার করে। ৯০তম পার্সেন্টাইলে, সাইটগুলো ডেস্কটপ এবং মোবাইলে ৫ মেগাবাইটের বেশি ছবি পাঠায়।

পূর্বে, অফ-স্ক্রিন ছবি লোড হওয়া বিলম্বিত করার দুটি উপায় ছিল:

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

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

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

loading বৈশিষ্ট্য

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

অফস্ক্রিন ছবি লোড হওয়া সম্পূর্ণরূপে স্থগিত করতে আপনি ` loading অ্যাট্রিবিউট ব্যবহার করতে পারেন:

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

loading অ্যাট্রিবিউটের জন্য সমর্থিত মানগুলো হলো:

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

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

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

আপনি যদি কোনো গুরুত্বপূর্ণ ইমেজের (যেমন, LCP ইমেজ) ফেচ প্রায়োরিটি বাড়াতে চান, তাহলে fetchpriority="high" সহ ফেচ প্রায়োরিটি ব্যবহার করুন।

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

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

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

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

দূরত্বের সীমা নিম্নলিখিত কারণগুলির উপর নির্ভর করে পরিবর্তিত হয়:

• যে ধরনের ইমেজ রিসোর্স আনা হচ্ছে
• কার্যকরী সংযোগের ধরণ

আপনি ক্রোমিয়াম সোর্সে বিভিন্ন কার্যকর সংযোগ প্রকারের জন্য ডিফল্ট মানগুলি খুঁজে পেতে পারেন। আপনি ডেভটুলসে নেটওয়ার্ক থ্রটল করে এই বিভিন্ন থ্রেশহোল্ড নিয়ে পরীক্ষা করতে পারেন।

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

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

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

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

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

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

আপনার ছবিগুলোতে ডাইমেনশন অ্যাট্রিবিউট দিন

ব্রাউজার যখন কোনো ছবি লোড করে, তখন সেটির মাপ স্পষ্টভাবে উল্লেখ না করা পর্যন্ত তা তাৎক্ষণিকভাবে জানতে পারে না। পেজে ছবির জন্য পর্যাপ্ত জায়গা সংরক্ষণ করতে এবং লেআউটের অপ্রয়োজনীয় পরিবর্তন এড়াতে, আমরা সমস্ত <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 নির্দিষ্ট করা না থাকলে, ছবির ডাইমেনশন ডিফল্টভাবে ০×০ পিক্সেল হয়ে যায়। আপনার যদি ছবির একটি গ্যালারি থাকে, তাহলে ব্রাউজার শুরুতে ধরে নিতে পারে যে সবগুলো ছবিই ভিউপোর্টের মধ্যে এঁটে গেছে, কারণ প্রতিটি ছবি কোনো জায়গা নেয় না এবং কোনো ছবিই স্ক্রিনের বাইরে চলে যায় না। এই ক্ষেত্রে, ব্রাউজার সবকিছু লোড করার সিদ্ধান্ত নেয়, যার ফলে পেজটি লোড হতে বেশি সময় নেয়।

বিপুল সংখ্যক ছবি loading কীভাবে কাজ করে, তার একটি উদাহরণের জন্য এই ডেমোটি দেখুন।

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

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

যদিও ব্রাউজার <source> এলিমেন্টগুলো থেকে কোন ছবিটি লোড করবে তা নিজেই ঠিক করে, আপনাকে শুধু ফলব্যাক <img> এলিমেন্টটিতে loading যোগ করতে হবে।

প্রথম ভিউপোর্টে দৃশ্যমান ছবিগুলো সর্বদা ইগার-লোড করুন।

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

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

<!-- 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 অ্যাট্রিবিউট সমর্থন করে না, তারা এটিকে উপেক্ষা করে। এর ফলে তারা লেজি লোডিংয়ের সুবিধা পায় না, তবে এটি অন্তর্ভুক্ত করার কোনো নেতিবাচক প্রভাব নেই।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

ব্রাউজার-স্তরের লেজি লোডিং সম্পর্কে প্রায়শই জিজ্ঞাসিত কিছু প্রশ্ন।

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

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

একটি ছবি লোড হওয়ার আগে সেটিকে ভিউপোর্টের কতটা কাছে থাকতে হবে, তা কি পরিবর্তন করা যায়?

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

CSS ব্যাকগ্রাউন্ড ইমেজে কি loading অ্যাট্রিবিউট ব্যবহার করা যায়?

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

ভিউপোর্টে থাকা যেসব ছবি তাৎক্ষণিকভাবে দেখা যায় না, সেগুলো কি loading সম্ভব?

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

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

যদি আমি আগে থেকেই ছবি লেজি-লোড করার জন্য কোনো থার্ড-পার্টি লাইব্রেরি বা স্ক্রিপ্ট ব্যবহার করে থাকি, তাহলে কী হবে?

আধুনিক ব্রাউজারগুলিতে লেজি লোডিংয়ের সম্পূর্ণ সমর্থন থাকায়, ছবি লেজি-লোড করার জন্য আপনার সম্ভবত কোনো থার্ড-পার্টি লাইব্রেরি বা স্ক্রিপ্টের প্রয়োজন হবে না।

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

যেসব ব্রাউজার লেজি লোডিং সমর্থন করে না, সেগুলো আমি কীভাবে সামলাব?

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

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

কোনো ব্রাউজার ফিচারটি সমর্থন করে কিনা তা শনাক্ত করতে আপনি loading প্রপার্টি ব্যবহার করতে পারেন:

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

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

• অসমর্থিত ব্রাউজারগুলিতে ইগার লোড এড়াতে <img src> এর পরিবর্তে <img data-src> ব্যবহার করুন। যদি loading অ্যাট্রিবিউটটি সমর্থিত হয়, তবে data-src এর জায়গায় src ব্যবহার করুন।
• যদি loading সমর্থিত না হয়, তাহলে 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> অ্যাট্রিবিউটটিও এখন স্ট্যান্ডার্ড হিসেবে ব্যবহৃত হচ্ছে। এর মাধ্যমে আপনি loading অ্যাট্রিবিউট ব্যবহার করে আইফ্রেম লেজি-লোড করতে পারবেন। আরও তথ্যের জন্য, “অফস্ক্রিন আইফ্রেম লেজি-লোড করার সময় এসেছে!” দেখুন।

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

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

একটি ওয়েব পেজ প্রিন্ট করার সময় ছবিগুলো কীভাবে পরিচালনা করা হয়?

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

লাইটহাউস কি ব্রাউজার-স্তরের লেজি লোডিং শনাক্ত করতে পারে?

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

পারফরম্যান্স উন্নত করতে ইমেজগুলো লে-লোড করুন।

ব্রাউজারে ইমেজ লেজি লোডিং-এর সুবিধা থাকলে আপনার পেজগুলোর পারফরম্যান্স উন্নত করা অনেক সহজ হয়ে যায়।

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