ভারী কন্টেন্ট রেন্ডার করা পিছিয়ে দিন

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

রেন্ডারিং অপ্টিমাইজ করতে, আপনি CSS content-visibility প্রপার্টি এবং HTML hidden="until-found" অ্যাট্রিবিউট ব্যবহার করতে পারেন। দুটিই পারফর্ম্যান্স উন্নত করতে সাহায্য করলেও, তাদের ব্যবহারের ক্ষেত্র আলাদা।

কখন কোনটি ব্যবহার করবেন

content-visibility: auto কীভাবে প্রয়োগ করতে হয়

অফ-স্ক্রিন কন্টেন্ট বেছে নেওয়া

বাধ্যতামূলক: কোন কোন এলিমেন্ট content-visibility: auto পায় তা আপনাকে অবশ্যই যত্ন সহকারে শনাক্ত করতে হবে।

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

প্রয়োগ করার বিভিন্ন ধাপ

1. বাধ্যতামূলক: প্রাথমিক লোডে অফ-স্ক্রিন হিসেবে কনফার্ম করা হয়েছে এমন ভারী বিভাগ শনাক্ত করুন।
2. বাধ্যতামূলক: এই প্রতিটি অফ-স্ক্রিন এলিমেন্টে content-visibility: auto প্রয়োগ করুন।
3. বাধ্যতামূলক: প্রতিটি এলিমেন্টে contain-intrinsic-size ব্যবহার করে আনুমানিক লেআউট স্ট্রাকচার সাইজ প্রদান করুন।

contain-intrinsic-size কীভাবে ব্যবহার করবেন

বাধ্যতামূলক: আপনাকে অবশ্যই contain-intrinsic-size-এর সাথে content-visibility: auto পেয়ার করতে হবে। এটি না করলে, অফ-স্ক্রিন থাকাকালীন ব্রাউজার এলিমেন্টটিকে 0px উচ্চতায় সঙ্কুচিত করতে বাধ্য হয়, যার ফলে ব্যবহারকারী স্ক্রল করার সময় গুরুতর লেআউট শিফটিং এবং স্ক্রলবার জাম্পিং হয়।

contain-intrinsic-size CSS শর্টহ্যান্ড প্রপার্টি প্লেসহোল্ডার ডাইমেনশন হিসেবে কাজ করে। auto কীওয়ার্ড ব্যবহার করলে, এলিমেন্টটি শেষ পর্যন্ত রেন্ডার হওয়ার পরে ব্রাউজার সেটির সঠিক সাইজ "মনে রাখতে" পারে। এলিমেন্টটি আবার অফ-স্ক্রিন হয়ে গেলে, প্লেসহোল্ডারের পরিবর্তে সেই হিসেব করা সাইজ ব্যবহার করা হয়।

কোডের উদাহরণ

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

content-visibility: hidden কীভাবে প্রয়োগ করতে হয়

1. ভারী বিভাগ শনাক্ত করুন: লেআউট ব্লকগুলি খুঁজুন যা প্রাথমিকভাবে লুকানো থাকে (যেমন, একটি বড় ডেটা টেবিলে অতিরিক্ত সারি)।
2. CSS প্রয়োগ করুন: এলিমেন্টে content-visibility: hidden যোগ করুন।
3. এলিমেন্ট প্রকাশ করুন: এলিমেন্ট কখন প্রকাশ করা উচিত, content-visibility প্রপার্টি visible বা auto-এ পরিবর্তন করুন।

কোডের উদাহরণ

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

যেহেতু content-visibility: hidden অ্যাক্সেসিবিলিটি ট্রি এবং পৃষ্ঠায়-খুঁজুন সার্চ থেকে এলিমেন্ট এবং তার চাইল্ডকে বাদ দেয়, তাই কন্টেন্ট লুকানো থাকলেও যদি তা খুঁজে পাওয়ার যোগ্য রাখতে হয়, তাহলে এটি ব্যবহার করবেন না। নেটিভ Find-in-page-এর মাধ্যমে লুকানো কন্টেন্ট সার্চ করার সুবিধা চালু রাখতে চাইলে, লুকানো কন্টেন্ট সার্চ করুন নিবন্ধে যেভাবে বর্ণনা করা হয়েছে সেইভাবে hidden="until-found" ব্যবহার করুন।

পেশাদার পদ্ধতি

• content-visibility: auto-এর সাথে contain-intrinsic-size ব্যবহার করুন। এটি না করলে, স্ক্রল করার সময় উচ্চতা আবার গণনা করতে হয়, যার ফলে ভিউপোর্ট লে-আউট জাম্পিং বা ভিজ্যুয়াল গ্লিচ হয়।
• প্রাথমিক ফোল্ড ভিউপোর্টের মধ্যে থাকা এলিমেন্টে content-visibility: auto প্রয়োগ করবেন না, কারণ এটি গুরুত্বপূর্ণ পৃষ্ঠা রেন্ডারিং প্রসেসকে স্লো করে।
• বাধ্যতামূলক অ্যাক্সেসিবিলিটি যাচাইকরণ: content-visibility: auto প্রয়োগ করার সময়, আপনাকে অবশ্যই সিকোয়েন্সিয়াল কীবোর্ড রিচেবিলিটি যাচাই করতে হবে। কিছু নির্দিষ্ট সহায়ক প্রযুক্তি কনফিগারেশনে, content-visibility: auto ব্যবহার করা অফ-স্ক্রিন নোড অ্যাক্সেসিবিলিটি ট্রি বা সিকোয়েন্সিয়াল নেভিগেশন রুট থেকে বাদ দেওয়া হতে পারে, যতক্ষণ না সেগুলির মধ্যে জোর করে ফোকাস সরানো হচ্ছে। শুধু কীবোর্ড ব্যবহার করে অফ-স্ক্রিন সীমানা জুড়ে লিনিয়ার নেভিগেশন পরীক্ষা করুন।

ফলব্যাক স্ট্র্যাটেজি

content-visibility ফলব্যাক

content-visibility কাজ না করলে, ব্রাউজার সেটি উপেক্ষা করবে। বেশিরভাগ ক্ষেত্রে content-visibility: auto-এর জন্য কোনও ফলব্যাক প্রয়োজন হবে না, তবে এটি ছাড়া পারফর্ম্যান্সের উন্নতি হবে না। কাজ করে না এমন ব্রাউজার content-visibility: hidden এলিমেন্ট সম্পূর্ণভাবে দৃশ্যমান রাখবে। ফলব্যাক প্রয়োগ করতে ফিচার শনাক্তকরণ ব্যবহার করুন।

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}