অ-সমালোচনামূলক CSS স্থগিত করুন

Demián Renzulli

CSS ফাইলগুলি হল রেন্ডার-ব্লকিং রিসোর্স : ব্রাউজার পৃষ্ঠাটি রেন্ডার করার আগে সেগুলি অবশ্যই লোড এবং প্রক্রিয়া করা হবে৷ যে ওয়েব পৃষ্ঠাগুলিতে অপ্রয়োজনীয়ভাবে বড় স্টাইল শীট রয়েছে সেগুলি রেন্ডার হতে বেশি সময় নেয়।

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

উদাহরণ: সাবঅপ্টিমাল CSS লোডিং

নিম্নলিখিত উদাহরণে পাঠ্যের তিনটি লুকানো অনুচ্ছেদ সহ একটি অ্যাকর্ডিয়ন রয়েছে, যার প্রতিটি একটি ভিন্ন শ্রেণীর সাথে স্টাইল করা হয়েছে:

এই পৃষ্ঠাটি আটটি ক্লাস সহ একটি CSS ফাইলের অনুরোধ করে, তবে "দৃশ্যমান" সামগ্রী রেন্ডার করার জন্য তাদের সবগুলি প্রয়োজনীয় নয়৷

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

পরিমাপ করা

পৃষ্ঠায় বাতিঘর চালান এবং পারফরম্যান্স বিভাগে নেভিগেট করুন।

প্রতিবেদনটি "1s" এর মান সহ প্রথম বিষয়বস্তুযুক্ত পেইন্ট মেট্রিক দেখায় এবং style.css ফাইলের দিকে নির্দেশ করে রেন্ডার-ব্লকিং রিসোর্স বাদ দেওয়ার সুযোগ:

এই CSS কিভাবে রেন্ডারিং ব্লক করে তা কল্পনা করতে:

1. Chrome এ পৃষ্ঠাটি খুলুন।
2. DevTools খুলতে Control+Shift+J (বা Mac-এ Command+Option+J ) টিপুন।
3. পারফরমেন্স ট্যাবে ক্লিক করুন।
4. পারফরম্যান্স প্যানেলে, রিলোড ক্লিক করুন।

ফলস্বরূপ ট্রেসে, আপনি দেখতে পাবেন যে CSS লোডিং শেষ হওয়ার সাথে সাথে FCP মার্কার স্থাপন করা হয়েছে:

এর মানে ব্রাউজারটিকে সমস্ত CSS লোড হওয়ার জন্য অপেক্ষা করতে হবে এবং স্ক্রিনে একটি একক পিক্সেল পেইন্ট করার আগে প্রক্রিয়া করতে হবে।

অপ্টিমাইজ করুন

এই পৃষ্ঠাটি অপ্টিমাইজ করার জন্য, আপনাকে জানতে হবে কোন ক্লাসগুলিকে সমালোচনামূলক বিবেচনা করা হয়। এটি নির্ধারণ করতে, কভারেজ টুল ব্যবহার করুন:

1. DevTools-এ, Control+Shift+P বা Command+Shift+P (Mac) চেপে কমান্ড মেনু খুলুন।
2. "কভারেজ" টাইপ করুন এবং কভারেজ দেখান নির্বাচন করুন।
3. পৃষ্ঠাটি পুনরায় লোড করতে পুনরায় লোড ক্লিক করুন এবং কভারেজটি ক্যাপচার করা শুরু করুন৷

বিস্তারিত দেখতে প্রতিবেদনটিতে ডাবল ক্লিক করুন:

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

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

1. কভারেজ রিপোর্টে সবুজ দিয়ে চিহ্নিত শ্রেণির সংজ্ঞাগুলি বের করুন এবং সেই ক্লাসগুলিকে পৃষ্ঠার মাথায় একটি <style> ব্লকে রাখুন:

   <style type="text/css">
   .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
   </style>
   

2. নিম্নলিখিত প্যাটার্ন প্রয়োগ করে অসিঙ্ক্রোনাসভাবে বাকি ক্লাস লোড করুন:

   <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="styles.css"></noscript>
   

এটি সিএসএস লোড করার আদর্শ উপায় নয়। এখানে কিভাবে এটা কাজ করে:

• link rel="preload" as="style" অ্যাসিঙ্ক্রোনাসভাবে স্টাইল শীটকে অনুরোধ করে। আপনি preload সম্পর্কে আরও শিখতে পারেন প্রিলোড ক্রিটিক্যাল অ্যাসেট গাইডে ।
• link onload বৈশিষ্ট্যটি ব্রাউজারকে CSS প্রক্রিয়া করতে দেয় যখন স্টাইল শীট লোড করা শেষ হয়।
• onload হ্যান্ডলারটি ব্যবহার করার পরে "নুল করা" কিছু ব্রাউজার যখন rel অ্যাট্রিবিউট পরিবর্তন করে তখন হ্যান্ডলারটিকে পুনরায় কল করা এড়াতে সহায়তা করে।
• noscript উপাদানের ভিতরে স্টাইল শীটের রেফারেন্সটি জাভাস্ক্রিপ্ট চালানো না এমন ব্রাউজারগুলির জন্য একটি ফলব্যাক প্রদান করে।

বেশিরভাগ স্টাইল অ্যাসিঙ্ক্রোনাসভাবে লোড হওয়ার পরেও ফলাফলের পৃষ্ঠাটি আগের সংস্করণের মতোই দেখায়। এইচটিএমএল ফাইলে সিএসএস ফাইলের ইনলাইনযুক্ত শৈলী এবং অ্যাসিঙ্ক্রোনাস অনুরোধগুলি কেমন দেখায় তা এখানে:

মনিটর

অপ্টিমাইজ করা পৃষ্ঠায় অন্য পারফরম্যান্স ট্রেস চালানোর জন্য DevTools ব্যবহার করুন।

পৃষ্ঠাটি CSS-এর অনুরোধ করার আগে FCP মার্কার উপস্থিত হয়, যার মানে পৃষ্ঠাটি রেন্ডার করার আগে ব্রাউজারকে CSS লোড হওয়ার জন্য অপেক্ষা করতে হবে না:

একটি চূড়ান্ত পদক্ষেপ হিসাবে, অপ্টিমাইজ করা পৃষ্ঠায় Lighthouse চালান।

প্রতিবেদনে, আপনি দেখতে পাবেন যে FCP পৃষ্ঠাটি 0.2s দ্বারা হ্রাস করা হয়েছে (একটি 20% উন্নতি!):

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

পরবর্তী পদক্ষেপ এবং রেফারেন্স

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