সমালোচনামূলক CSS কৌশলের সাহায্যে রেন্ডারের সময় কীভাবে উন্নত করা যায় তা শিখুন।
পৃষ্ঠাটি দেখানোর আগে ব্রাউজারটিকে অবশ্যই CSS ফাইলগুলি ডাউনলোড এবং পার্স করতে হবে, যা CSSকে একটি রেন্ডার-ব্লকিং সংস্থান করে তোলে। যদি CSS ফাইলগুলি বড় হয়, বা নেটওয়ার্কের অবস্থা খারাপ হয়, CSS ফাইলগুলির জন্য অনুরোধগুলি একটি ওয়েব পৃষ্ঠার রেন্ডার করার সময়কে উল্লেখযোগ্যভাবে বৃদ্ধি করতে পারে।
HTML নথির <head> এ নিষ্কাশিত শৈলী ইনলাইন করা এই শৈলীগুলি আনার জন্য একটি অতিরিক্ত অনুরোধ করার প্রয়োজনীয়তা দূর করে। সিএসএসের অবশিষ্টাংশ অ্যাসিঙ্ক্রোনাসভাবে লোড করা যেতে পারে।
রেন্ডারের সময় উন্নত করা অনুভূত কর্মক্ষমতাতে একটি বিশাল পার্থক্য আনতে পারে, বিশেষ করে দুর্বল নেটওয়ার্ক অবস্থার অধীনে। মোবাইল নেটওয়ার্কে, ব্যান্ডউইথ নির্বিশেষে উচ্চ লেটেন্সি একটি সমস্যা।
আপনার যদি দুর্বল ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) থাকে এবং লাইটহাউস অডিটে "রেন্ডার-ব্লকিং রিসোর্স নির্মূল" সুযোগটি দেখেন তাহলে সমালোচনামূলক CSSকে যেতে দেওয়া একটি ভাল ধারণা।
প্রথম রেন্ডার করার জন্য রাউন্ডট্রিপের সংখ্যা কমাতে, 14 KB (সংকুচিত) এর নিচে ভাঁজ-এর উপরে কন্টেন্ট রাখার লক্ষ্য রাখুন।
এই কৌশলটি দিয়ে আপনি যে পারফরম্যান্সের প্রভাব অর্জন করতে পারেন তা আপনার ওয়েবসাইটের ধরণের উপর নির্ভর করে। সাধারণভাবে বলতে গেলে, একটি সাইটে যত বেশি CSS থাকবে, ইনলাইন্ড CSS-এর সম্ভাব্য প্রভাব তত বেশি হবে।
সরঞ্জামের ওভারভিউ
অনেকগুলি দুর্দান্ত সরঞ্জাম রয়েছে যা স্বয়ংক্রিয়ভাবে একটি পৃষ্ঠার জন্য সমালোচনামূলক CSS নির্ধারণ করতে পারে। এটি ভাল খবর কারণ ম্যানুয়ালি এটি করা একটি ক্লান্তিকর প্রক্রিয়া হবে। ভিউপোর্টের প্রতিটি উপাদানে প্রয়োগ করা শৈলীগুলি নির্ধারণ করার জন্য এটি সম্পূর্ণ DOM বিশ্লেষণের প্রয়োজন৷
সমালোচনামূলক
ক্রিটিকাল এক্সট্রাক্ট, মিনিফাই এবং ইনলাইন-এর উপরে সিএসএস এবং এনপিএম মডিউল হিসাবে উপলব্ধ। এটি Gulp (সরাসরি) বা Grunt (একটি প্লাগইন হিসাবে) এর সাথে ব্যবহার করা যেতে পারে এবং একটি ওয়েবপ্যাক প্লাগইনও রয়েছে।
এটি একটি সহজ টুল যা প্রক্রিয়াটির বাইরে অনেক চিন্তাভাবনা করে। এমনকি আপনাকে স্টাইলশীটগুলি নির্দিষ্ট করতে হবে না, ক্রিটিক্যাল স্বয়ংক্রিয়ভাবে সেগুলি সনাক্ত করে। এটি একাধিক স্ক্রীন রেজোলিউশনের জন্য সমালোচনামূলক CSS নিষ্কাশনকেও সমর্থন করে।
criticalCSS
ক্রিটিকালসিএসএস হল আরেকটি এনপিএম মডিউল যা ভাঁজের উপরে CSS বের করে। এটি একটি CLI হিসাবেও উপলব্ধ।
এটিতে সমালোচনামূলক CSS ইনলাইন এবং ছোট করার বিকল্প নেই, তবে এটি আপনাকে এমন নিয়মগুলিকে জোর করে-অন্তর্ভুক্ত করতে দেয় যা আসলে সমালোচনামূলক CSS-এর অন্তর্গত নয় এবং @font-face ঘোষণা সহ আপনাকে আরও দানাদার নিয়ন্ত্রণ দেয়।
পেন্টহাউস
পেন্টহাউস একটি ভাল পছন্দ যদি আপনার সাইট বা অ্যাপে প্রচুর সংখ্যক শৈলী বা শৈলী থাকে যা DOM-এ (কৌণিক অ্যাপে প্রচলিত) গতিশীলভাবে ইনজেক্ট করা হচ্ছে। এটি হুডের নীচে পুপেটিয়ার ব্যবহার করে এবং এমনকি একটি অনলাইন হোস্ট করা সংস্করণও রয়েছে৷
পেন্টহাউস স্বয়ংক্রিয়ভাবে স্টাইলশীট সনাক্ত করে না, আপনাকে HTML এবং CSS ফাইলগুলি নির্দিষ্ট করতে হবে যেগুলির জন্য আপনি সমালোচনামূলক CSS তৈরি করতে চান৷ উল্টো দিকটি হল এটি সমান্তরালভাবে অনেক কাজ চালানোর ক্ষেত্রে ভাল।