এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

অলস লোড অফস্ক্রিন ইমেজ lazysizes সঙ্গে

Katie Hempenius

অলস লোডিং হল রিসোর্স লোড করার জন্য অপেক্ষা করার পন্থা, যতক্ষণ না সেগুলি প্রয়োজন হয়, সেগুলি আগে থেকে লোড করার পরিবর্তে। এটি প্রাথমিক পৃষ্ঠা লোডের সময় লোড এবং পার্স করার প্রয়োজনীয় সংস্থানগুলির পরিমাণ হ্রাস করে কার্যক্ষমতা উন্নত করতে পারে।

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

পৃষ্ঠায় lazysizes স্ক্রিপ্ট যোগ করুন

প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷

lazysizes.min.js ইতিমধ্যেই ডাউনলোড করা হয়েছে এবং এই সমস্যাটিতে যোগ করা হয়েছে। পৃষ্ঠায় এটি অন্তর্ভুক্ত করতে:

index.html এ নিম্নলিখিত <script> ট্যাগ যোগ করুন:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

lazysizes বুদ্ধিমত্তার সাথে ছবিগুলি লোড করবে যখন ব্যবহারকারী পৃষ্ঠাটি স্ক্রোল করবে এবং ব্যবহারকারী শীঘ্রই যে চিত্রগুলির মুখোমুখি হতে চলেছে সেগুলিকে অগ্রাধিকার দেবে৷

অলস লোড ইমেজ নির্দেশ করুন

অলস লোড হওয়া উচিত এমন চিত্রগুলিতে ক্লাস lazyload যোগ করুন। উপরন্তু, data-src তে src বৈশিষ্ট্য পরিবর্তন করুন।

উদাহরণস্বরূপ, flower3.png এর পরিবর্তনগুলি দেখতে এইরকম হবে:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

এই উদাহরণের জন্য, অলস লোড করার চেষ্টা করুন flower3.png , flower4.jpg , এবং flower5.jpg ।

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

কর্ম এটি দেখুন

এটাই! কর্মে এই পরিবর্তনগুলি দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:

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

আপনি পৃষ্ঠাটি স্ক্রোল করার সাথে সাথে ইমেজ ফাইলগুলি পৃথকভাবে লোড হচ্ছে তা দেখতে নেটওয়ার্ক প্যানেলটি দেখুন।

বাতিঘর ব্যবহার করে যাচাই করুন

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

সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
লাইটহাউস ট্যাবে ক্লিক করুন।
নিশ্চিত করুন যে পারফরম্যান্স চেকবক্সটি বিভাগ তালিকায় নির্বাচিত হয়েছে।
জেনারেট রিপোর্ট বোতামে ক্লিক করুন।
ডিফার অফস্ক্রিন ইমেজ অডিট পাস করা হয়েছে যাচাই করুন.

সফলতার ! আপনি আপনার পৃষ্ঠায় চিত্রগুলিকে অলসভাবে লোড করতে অলসাইজ ব্যবহার করেছেন৷