CSS বিষয়বস্তু-দৃশ্যমান বৈশিষ্ট্য এখন বেসলাইন নতুনভাবে উপলব্ধ

প্রকাশিত: 30 অক্টোবর, 2024

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

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

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

নেটওয়ার্ক ফলাফলের প্রতিনিধিত্বকারী পরিসংখ্যান সহ ডেমো
আমাদের নিবন্ধের ডেমোতে, content-visibility: auto প্রাথমিক লোডের উপর 7x রেন্ডারিং কর্মক্ষমতা বৃদ্ধি করে। আরও জানতে পড়ুন।

অফ-স্ক্রিন উপাদানগুলির জন্য এই অপ্টিমাইজেশন সক্ষম করতে, আপনার ওয়েবসাইটের CSS-এ তাদের জন্য content-visibility: auto নিয়ম প্রয়োগ করুন:

.render-me-later {
  content-visibility: auto;
}

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

যখন content-visibility: auto প্রয়োগ করা হয়, তখন তারা স্বয়ংক্রিয়ভাবে contain বৈশিষ্ট্য দ্বারা প্রদত্ত কিছু বৈশিষ্ট্য গ্রহণ করে। ফলাফল হল যে প্রভাবিত উপাদানগুলি প্রাথমিকভাবে 0px উচ্চতার সাথে রেন্ডার করা হবে, কার্যকরভাবে এর অর্থ হল যে সেগুলি রেন্ডার করা হয়নি

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

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

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