বিষয়বস্তু-দৃশ্যমানতা: নতুন CSS প্রপার্টি যা আপনার রেন্ডারিং কর্মক্ষমতা বাড়ায়

অফস্ক্রিন সামগ্রীর রেন্ডারিং এড়িয়ে গিয়ে প্রাথমিক লোড সময় উন্নত করুন৷

Jeremy Wagner

Una Kravets

Vladimir Levin

ক্রোমিয়াম 85-এ লঞ্চ হওয়া content-visibility বৈশিষ্ট্য, পৃষ্ঠা লোড কর্মক্ষমতা উন্নত করার জন্য সবচেয়ে প্রভাবশালী নতুন CSS বৈশিষ্ট্যগুলির মধ্যে একটি হতে পারে। content-visibility ব্যবহারকারী এজেন্টকে প্রয়োজন না হওয়া পর্যন্ত লেআউট এবং পেইন্টিং সহ একটি উপাদানের রেন্ডারিং কাজ এড়িয়ে যেতে সক্ষম করে। কারণ রেন্ডারিং বাদ দেওয়া হয়েছে, যদি আপনার সামগ্রীর একটি বড় অংশ অফ-স্ক্রিন হয়, content-visibility বৈশিষ্ট্যটি ব্যবহার করা প্রাথমিক ব্যবহারকারীকে অনেক দ্রুত লোড করে। এটি অন-স্ক্রীন সামগ্রীর সাথে দ্রুত মিথস্ক্রিয়া করার অনুমতি দেয়। বেশ ঝরঝরে.

ব্রাউজার সমর্থন

content-visibility CSS কন্টেনমেন্ট স্পেকের মধ্যে আদিম বিষয়গুলির উপর নির্ভর করে। যদিও content-visibility আপাতত শুধুমাত্র Chromium 85-এ সমর্থিত (এবং Firefox-এর জন্য "প্রোটোটাইপ করার মূল্য" বলে মনে করা হয়), কন্টেনমেন্ট স্পেক বেশিরভাগ আধুনিক ব্রাউজারে সমর্থিত।

CSS কন্টেনমেন্ট

CSS কন্টেনমেন্টের মূল এবং অত্যধিক লক্ষ্য হল পৃষ্ঠার বাকি অংশ থেকে একটি DOM সাবট্রির পূর্বাভাসযোগ্য বিচ্ছিন্নতা প্রদান করে ওয়েব বিষয়বস্তুর পারফরম্যান্সের উন্নতি সাধন করা।

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

চার ধরনের সিএসএস কন্টেনমেন্ট আছে, প্রতিটিতে contain সিএসএস প্রপার্টির সম্ভাব্য মান, যা মানের একটি স্থান-বিচ্ছিন্ন তালিকায় একত্রিত করা যেতে পারে:

• size : একটি উপাদানের আকারের কন্টেনমেন্ট নিশ্চিত করে যে উপাদানটির বাক্সটি তার বংশধর পরীক্ষা না করেই বিছিয়ে রাখা যেতে পারে। এর মানে হল আমরা সম্ভাব্যভাবে বংশধরদের লেআউট এড়িয়ে যেতে পারি যদি আমাদের যা প্রয়োজন তা হল উপাদানের আকার।
• layout : লেআউট কন্টেনমেন্ট মানে হল যে বংশধর পৃষ্ঠার অন্যান্য বাক্সের বাহ্যিক বিন্যাসকে প্রভাবিত করে না। এটি আমাদের সম্ভাব্যভাবে বংশধরদের লেআউট এড়িয়ে যাওয়ার অনুমতি দেয় যদি আমরা যা করতে চাই তা হল অন্য বাক্সগুলি রাখা।
• style : স্টাইল কন্টেনমেন্ট নিশ্চিত করে যে বৈশিষ্ট্যগুলি যা কেবলমাত্র এর বংশধরদের চেয়ে বেশি প্রভাব ফেলতে পারে উপাদানটি (যেমন কাউন্টার) এড়াতে পারে না। এটি আমাদের সম্ভাব্যভাবে বংশধরদের জন্য শৈলী গণনা এড়িয়ে যেতে দেয় যদি আমরা কেবলমাত্র অন্যান্য উপাদানগুলিতে শৈলী গণনা করতে চাই।
• paint : পেইন্ট কন্টেনমেন্ট নিশ্চিত করে যে ধারণ করা বাক্সের বংশধরগুলি তার সীমার বাইরে প্রদর্শিত হবে না। কিছুই দৃশ্যমানভাবে উপাদানটিকে উপচে পড়তে পারে না এবং যদি একটি উপাদান অফ-স্ক্রীন হয় বা অন্যথায় দৃশ্যমান না হয় তবে এর বংশধরগুলিও দৃশ্যমান হবে না। উপাদানটি অফস্ক্রিন হলে এটি আমাদের বংশধরদের পেইন্টিং এড়িয়ে যেতে দেয়।

content-visibility সাথে রেন্ডারিং কাজ এড়িয়ে যাওয়া

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

বিষয়বস্তু-দৃশ্যমান বৈশিষ্ট্যটি বেশ কয়েকটি মান গ্রহণ করে, তবে auto একটি যা তাত্ক্ষণিক কর্মক্ষমতা উন্নতি প্রদান করে। একটি উপাদান যার content-visibility: auto গেইন layout , style এবং paint কন্টেনমেন্ট। যদি উপাদানটি অফ-স্ক্রিন হয় (এবং ব্যবহারকারীর সাথে অন্যথায় প্রাসঙ্গিক নয় - প্রাসঙ্গিক উপাদানগুলি হবে যেগুলি তাদের সাবট্রিতে ফোকাস বা নির্বাচন আছে), এটি size নিয়ন্ত্রণও লাভ করে (এবং এটি এর বিষয়বস্তু পেইন্টিং এবং হিট-টেস্টিং বন্ধ করে)।

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

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

অ্যাক্সেসযোগ্যতার উপর একটি নোট

content-visibility: auto হল যে অফ-স্ক্রীন বিষয়বস্তু ডকুমেন্ট অবজেক্ট মডেলে উপলব্ধ থাকে এবং তাই, অ্যাক্সেসিবিলিটি ট্রি ( visibility: hidden )। এর অর্থ হল, সেই বিষয়বস্তুটি পৃষ্ঠায় অনুসন্ধান করা যেতে পারে, এবং নেভিগেট করা যেতে পারে, এটি লোড হওয়ার জন্য অপেক্ষা না করে বা রেন্ডারিং কার্যকারিতা ত্যাগ না করে।

যাইহোক, এর ফ্লিপ-সাইড হল যে ল্যান্ডমার্ক উপাদানগুলি শৈলী বৈশিষ্ট্যগুলির সাথে যেমন display: none বা visibility: hidden অ্যাক্সেসিবিলিটি ট্রিতে প্রদর্শিত হবে যখন অফ-স্ক্রীন থাকবে, যেহেতু ব্রাউজার এই শৈলীগুলিকে রেন্ডার করবে না যতক্ষণ না তারা ভিউপোর্টে প্রবেশ করে। . এগুলিকে অ্যাক্সেসিবিলিটি ট্রিতে দৃশ্যমান হওয়া থেকে প্রতিরোধ করতে, সম্ভাব্য বিশৃঙ্খলা সৃষ্টি করতে, aria-hidden="true" যোগ করতে ভুলবেন না।

উদাহরণ: একটি ভ্রমণ ব্লগ

একটি ভ্রমণ ব্লগে সাধারণত কয়েকটি ছবি এবং কিছু বর্ণনামূলক পাঠ্য সহ গল্পের একটি সেট থাকে। এখানে একটি সাধারণ ব্রাউজারে যা ঘটে যখন এটি একটি ভ্রমণ ব্লগে নেভিগেট করে:

1. পৃষ্ঠার একটি অংশ নেটওয়ার্ক থেকে ডাউনলোড করা হয়, যেকোনো প্রয়োজনীয় সংস্থান সহ।
2. বিষয়বস্তু ব্যবহারকারীর কাছে দৃশ্যমান কিনা তা বিবেচনা না করেই ব্রাউজারটি পৃষ্ঠার সমস্ত বিষয়বস্তু শৈলী করে এবং সাজায়৷
3. সমস্ত পৃষ্ঠা এবং সংস্থান ডাউনলোড না হওয়া পর্যন্ত ব্রাউজারটি 1 ধাপে ফিরে যায়।

ধাপ 2-এ, ব্রাউজার সমস্ত বিষয়বস্তু প্রসেস করে যা পরিবর্তিত হতে পারে এমন জিনিসগুলির সন্ধান করে৷ এটি নতুন আপডেটের ফলে স্থানান্তরিত হতে পারে এমন উপাদানগুলির সাথে যেকোনো নতুন উপাদানের শৈলী এবং বিন্যাস আপডেট করে। এই কাজ রেন্ডারিং হয়. এই সময় লাগে.

এখন বিবেচনা করুন যদি আপনি content-visibility: auto । সাধারণ লুপ একই: ব্রাউজার পৃষ্ঠার অংশগুলি ডাউনলোড এবং রেন্ডার করে। যাইহোক, পার্থক্য হল কাজের পরিমাণ যা এটি ধাপ 2 এ করে।

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

এই পৃষ্ঠাটি লোড করার কার্যকারিতা এমন হবে যেন এতে সম্পূর্ণ অন-স্ক্রীন গল্প এবং প্রতিটি অফ-স্ক্রীন গল্পের জন্য খালি বাক্স রয়েছে। লোড করার রেন্ডারিং খরচ থেকে 50% বা তার বেশি প্রত্যাশিত হ্রাস সহ এটি অনেক ভালো পারফর্ম করে। আমাদের উদাহরণে, আমরা 232ms রেন্ডারিং টাইম থেকে 30ms রেন্ডারিং টাইমে একটি বুস্ট দেখতে পাই। এটি একটি 7x কর্মক্ষমতা বুস্ট.

এই সুবিধাগুলি কাটার জন্য আপনাকে কী কাজ করতে হবে? প্রথমত, আমরা বিষয়বস্তুকে ভাগে ভাগ করি:

তারপর, আমরা বিভাগগুলিতে নিম্নলিখিত শৈলী নিয়ম প্রয়োগ করি:

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

contain-intrinsic-size সহ একটি উপাদানের প্রাকৃতিক আকার নির্দিষ্ট করা

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

এটি আদর্শ নাও হতে পারে, যেহেতু স্ক্রলবারের আকার পরিবর্তন হবে, প্রতিটি গল্পের উপর নির্ভর করে অ-শূন্য উচ্চতা।

সৌভাগ্যক্রমে, CSS অন্য একটি সম্পত্তি প্রদান করে, contain-intrinsic-size , যা কার্যকরভাবে উপাদানটির প্রাকৃতিক আকার নির্দিষ্ট করে যদি উপাদানটি আকার ধারণ দ্বারা প্রভাবিত হয় । আমাদের উদাহরণে, আমরা বিভাগগুলির উচ্চতা এবং প্রস্থের অনুমান হিসাবে এটিকে 1000px এ সেট করছি।

এর অর্থ হল এটি এমনভাবে সাজানো হবে যেন এটির "অভ্যন্তরীণ-আকার" মাত্রার একটি একক সন্তান রয়েছে, এটি নিশ্চিত করে যে আপনার আকারবিহীন ডিভগুলি এখনও স্থান দখল করে। contain-intrinsic-size রেন্ডার করা বিষয়বস্তুর পরিবর্তে স্থানধারক আকার হিসাবে কাজ করে।

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

content-visibility: hidden

ক্যাশড রেন্ডারিং স্টেটের সুবিধাগুলি ব্যবহার করার সময় আপনি যদি অন-স্ক্রীনে থাকুক বা না থাকুক না কেন বিষয়বস্তুকে রেন্ডার না করে রাখতে চান? লিখুন: content-visibility: hidden ।

content-visibility: hidden সম্পত্তি আপনাকে অনুপস্থিত সামগ্রী এবং ক্যাশে রেন্ডারিং অবস্থার সমস্ত একই সুবিধা দেয় যা content-visibility: auto অফ-স্ক্রিন করে। যাইহোক, auto থেকে ভিন্ন, এটি স্বয়ংক্রিয়ভাবে অন-স্ক্রীনে রেন্ডার হতে শুরু করে না।

এটি আপনাকে আরও নিয়ন্ত্রণ দেয়, আপনাকে একটি উপাদানের বিষয়বস্তু লুকিয়ে রাখতে এবং পরে সেগুলিকে দ্রুত প্রকাশ করতে দেয়৷

উপাদানের বিষয়বস্তু লুকানোর অন্যান্য সাধারণ উপায়ে এটি তুলনা করুন:

• display: none : উপাদানটি লুকিয়ে রাখে এবং এর রেন্ডারিং অবস্থাকে ধ্বংস করে। এর অর্থ হল উপাদানটি লুকানো একই বিষয়বস্তু সহ একটি নতুন উপাদান রেন্ডার করার মতো ব্যয়বহুল।
• visibility: hidden : উপাদানটিকে লুকিয়ে রাখে এবং এর রেন্ডারিং অবস্থা রাখে। এটি দস্তাবেজ থেকে উপাদানটিকে সত্যই সরিয়ে দেয় না, কারণ এটি (এবং এটি সাবট্রি) এখনও পৃষ্ঠায় জ্যামিতিক স্থান নেয় এবং এখনও ক্লিক করা যেতে পারে। এটি লুকিয়ে থাকা অবস্থায়ও প্রয়োজন হলে রেন্ডারিং অবস্থা আপডেট করে।

content-visibility: hidden , অন্যদিকে, উপাদানটিকে তার রেন্ডারিং অবস্থা সংরক্ষণ করার সময় লুকিয়ে রাখে, তাই, যদি কোনো পরিবর্তন ঘটতে হয়, তবে সেগুলি তখনই ঘটে যখন উপাদানটি আবার দেখানো হয় (যেমন content-visibility: hidden সম্পত্তি মুছে ফেলা).

content-visibility: hidden হয়। এগুলি একক-পৃষ্ঠার অ্যাপ্লিকেশনগুলির জন্যও দুর্দান্ত (SPA)৷ নিষ্ক্রিয় অ্যাপ্লিকেশান ভিউগুলিকে content-visibility: hidden প্রয়োগ করা হয় কিন্তু তাদের ক্যাশে করা অবস্থা বজায় রাখা হয়৷ এটি আবার সক্রিয় হয়ে গেলে দৃশ্যটিকে দ্রুত রেন্ডার করে তোলে।

নেক্সট পেইন্টে ইন্টারঅ্যাকশনের উপর প্রভাব (INP)

INP হল একটি মেট্রিক যা ব্যবহারকারীর ইনপুটের জন্য নির্ভরযোগ্যভাবে প্রতিক্রিয়াশীল হওয়ার জন্য একটি পৃষ্ঠার ক্ষমতা মূল্যায়ন করে। রেন্ডারিং কাজ সহ মূল থ্রেডে যে কোনও অতিরিক্ত পরিমাণ কাজের দ্বারা প্রতিক্রিয়াশীলতা প্রভাবিত হতে পারে।

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

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

উপসংহার

content-visibility এবং CSS কন্টেনমেন্ট স্পেক মানে আপনার CSS ফাইলে কিছু উত্তেজনাপূর্ণ পারফরম্যান্স বুস্ট আসছে। এই বৈশিষ্ট্য সম্পর্কে আরও তথ্যের জন্য, চেক আউট করুন:

• CSS কন্টেনমেন্ট স্পেসিক
• CSS কন্টেনমেন্টে MDN ডক্স
• CSSWG খসড়া