যখন CSS একটি ফাইলে বান্ডেল করা হয়, ট্রি-শেকিংয়ের পরেও, বিভিন্ন @media কনটেক্সটের (মোবাইল, ট্যাবলেট, ডেস্কটপ, ডার্ক/লাইট/অন্যান্য থিম ইত্যাদি) কারণে এটিতে এখনও প্রচুর অব্যবহৃত CSS থাকে।
এটি কোর ওয়েব ভাইটালসের জন্য খারাপ: ফার্স্ট ইনপুট ডিলে (FID), লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP), কিউমুলেটিভ লেআউট শিফট (CLS), সেইসাথে অন্যান্য গুরুত্বপূর্ণ পারফরম্যান্স এবং ব্যবহারযোগ্যতা মেট্রিক্স: ফার্স্ট কনটেন্টফুল পেইন্ট (FCP), টোটাল ব্লকিং টাইম (TBT), টাইম টু ইন্টারেক্টিভ (TTI), এবং DOMContentLoaded ইভেন্ট।
CSS লোডিং এবং রেন্ডারিং উল্লেখযোগ্যভাবে উন্নত করার একটি উপায় আছে CSS কে বিভিন্ন ফাইলে বিভক্ত করে, যেখানে প্রতিটি ফাইলে শুধুমাত্র সেই কনটেক্সটে প্রয়োজনীয় কোড থাকে।
আপনার CSS কে বিভিন্ন ফাইলে বিভক্ত করুন:
📄main.css - contains CSS needed for all @media conditions
📄screen.css - contains CSS needed only for screen @media condition
📄print.css - contains CSS needed only for print @media condition
📂breakpoints
📄x-small.css - contains CSS needed only for X-Small breakpoint
📄sm.css - contains CSS needed only for Small breakpoint
📄md.css - contains CSS needed only for Medium breakpoint
📄lg.css - contains CSS needed only for Large breakpoint
📄xl.css - contains CSS needed only for Extra large breakpoint
📄xxl.css - contains CSS needed only for Extra extra large breakpoint
📂themes
📄light.css - contains CSS needed only for light theme
📄dark.css - contains CSS needed only for dark themeতারপর, CSS ফাইলগুলি এভাবে অন্তর্ভুক্ত করুন:
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">এই পদ্ধতির মাধ্যমে, আধুনিক ব্রাউজারগুলি বর্তমান @media কন্ডিশনের জন্য CSS লোডিংকে অগ্রাধিকার দেয়, তাই পেজ রেন্ডারিং অনেক দ্রুত শুরু হয় কারণ ব্যবহারকারীদের CSS-এর অব্যবহৃত অংশ লোড হওয়ার জন্য অপেক্ষা করতে হয় না।
এমন ক্ষেত্রে যেখানে আপনার সমস্ত CSS একটি ফাইলে বান্ডেল করা আছে এবং link ট্যাগের মিডিয়া অ্যাট্রিবিউটে কন্ডিশন উল্লেখ করেন না, ব্রাউজার পেজ রেন্ডারিং শুরু করার আগে CSS-এর পুরো সেট লোড হওয়ার জন্য অপেক্ষা করে। যা পেজ রেন্ডারিং মারাত্মকভাবে ধীর করে দেয়।
এই উদাহরণে ব্রেকপয়েন্টগুলি বুটস্ট্র্যাপ ৫ এর উপর ভিত্তি করে তৈরি। এই পদ্ধতিটি শীঘ্রই বুটস্ট্র্যাপের জন্য আরও গুরুত্বপূর্ণ হয়ে উঠবে কারণ তারা লাইট/ডার্ক/অন্যান্য থিমের সমর্থন যোগ করবে।
আপনি যদি ওয়েবকে আরও উন্নত এবং দ্রুত করতে চান, তাহলে দয়া করে:
- এই নিবন্ধটি শেয়ার করুন,
- আপনি যে ফ্রেমওয়ার্কগুলি ব্যবহার করেন তার ডেভেলপারদের কাছে এই নিবন্ধটি পাঠান,
- আপনার সাইটে এই CSS বিভাজন প্রয়োগ করুন।
Share on social media or save for later:
আপনি যদি এই অপটিমাইজেশন এবং ব্রাউজারের আচরণ সম্পর্কে আরও পড়তে চান, তাহলে নিম্নলিখিতগুলি দেখুন:
- ভাদিম মাকিভের “Conditionally adaptive CSS. Browser behavior that might improve your performance” নিবন্ধটি। এই নিবন্ধের কভার স্ক্রিনশটটি তার চমৎকার নিবন্ধ থেকে নেওয়া হয়েছে, যেখানে তার আরও স্ক্রিনশট এবং পরীক্ষা-নিরীক্ষা রয়েছে।
- MDN ওয়েব ডক্স: CSS পারফরম্যান্স অপটিমাইজেশন।