লোডিং গতি উন্নত করতে অলস লোডিং ব্যবহার করুন

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

অলস লোডিং কি?

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

লাইটহাউসে ডিফার অফস্ক্রিন ইমেজ অডিটের একটি স্ক্রিনশট।
লাইটহাউসের পারফরম্যান্স অডিটগুলির মধ্যে একটি হল অফ স্ক্রিন চিত্রগুলি সনাক্ত করা, যা অলস লোডিংয়ের জন্য প্রার্থী৷

আপনি সম্ভবত ইতিমধ্যে অ্যাকশনে অলস লোডিং দেখেছেন এবং এটি এরকম কিছু যায়:

  • আপনি একটি পৃষ্ঠায় পৌঁছান, এবং আপনি বিষয়বস্তু পড়ার সাথে সাথে স্ক্রোল করতে শুরু করেন।
  • কিছু সময়ে, আপনি ভিউপোর্টে একটি স্থানধারক চিত্র স্ক্রোল করেন।
  • স্থানধারক চিত্রটি হঠাৎ চূড়ান্ত চিত্র দ্বারা প্রতিস্থাপিত হয়।

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

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

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

কেন অলস-লোড ইমেজ বা ভিডিও পরিবর্তে শুধু তাদের লোড ?

কারণ এটা সম্ভব যে আপনি এমন জিনিস লোড করছেন যা ব্যবহারকারী হয়তো কখনও দেখতে পাবে না। এটি কয়েকটি কারণে সমস্যাযুক্ত:

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

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

অলস লোডিং বাস্তবায়ন

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

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

এছাড়াও, আমরা অলস লোডিং সহ সম্ভাব্য সমস্যার একটি তালিকা সংকলন করেছি এবং আপনার বাস্তবায়নে যে বিষয়গুলি লক্ষ্য রাখতে হবে।

উপসংহার

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

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