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

Demián Renzulli

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

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

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

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

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

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

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

পরিমাপ

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

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

লাইটহাউস রিপোর্ট আপনার পৃষ্ঠাটি দ্রুত লোড করতে আপনার স্টাইল শীটকে সহজ করার পরামর্শ দেয়৷

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

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

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

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

অপ্টিমাইজ করা ডেমো পৃষ্ঠায়, CSS লোডিং শেষ না হওয়া পর্যন্ত FCP ঘটতে পারে না।

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

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

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

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

কভারেজ রিপোর্ট দেখায় যে প্রাথমিক পৃষ্ঠা লোডে আপনার CSS কতটা ব্যবহার করা হয়েছে।

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

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

এই তথ্যের সাহায্যে, আপনার 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 উপাদানের ভিতরে স্টাইল শীটের রেফারেন্সটি জাভাস্ক্রিপ্ট চালানো না এমন ব্রাউজারগুলির জন্য একটি ফলব্যাক প্রদান করে।

দ্রষ্টব্য:

একটি বাস্তব উত্পাদনের পরিস্থিতিতে, আমরা লোডসিএসএস -এর মতো CSS-বিলম্বিত ফাংশনগুলি ব্যবহার করার পরামর্শ দিই যা এই আচরণকে এনক্যাপসুলেট করতে পারে এবং ব্রাউজার জুড়ে ভালভাবে কাজ করতে পারে এবং একটি বিষয়বস্তু সুরক্ষা নীতি সমর্থন করে যা ইনলাইন onload জাভাস্ক্রিপ্টকে অনুমতি নাও দিতে পারে৷

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

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

মনিটর

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

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

অপ্টিমাইজ করা পৃষ্ঠায়, স্টাইল শীট লোড হওয়ার আগে FCP শুরু হতে পারে।

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

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

নতুন, কমে যাওয়া FCP।

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

পৃষ্ঠাটি এখন ব্লকিং রিসোর্স অডিট পাস করে।

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

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