وقتی CSS در یک فایل واحد بسته‌بندی می‌شود، حتی پس از درخت‌تکانی، همچنان به دلیل وجود زمینه‌های @media مختلف (موبایل، تبلت، دسکتاپ، تم‌های روشن/تیره/سایر تم‌ها و غیره) حاوی CSS بلااستفاده زیادی است.
این برای شاخص‌های حیاتی وب (Core Web Vitals) بد است: تأخیر ورودی اول (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)">با این رویکرد، مرورگرهای مدرن بارگذاری CSS را برای شرایط @media فعلی اولویت‌بندی می‌کنند، بنابراین رندر صفحه بسیار سریع‌تر شروع می‌شود زیرا کاربران نیازی به منتظر ماندن برای بارگذاری بخش بلااستفاده CSS ندارند.
در مواردی که شما تمام CSS را در یک فایل واحد بسته‌بندی کرده‌اید و شرایط را در ویژگی‌های media تگ‌های link مشخص نمی‌کنید، مرورگر قبل از شروع رندر صفحه منتظر می‌ماند تا کل مجموعه CSS بارگیری شود. که رندر صفحه را به شدت کند می‌کند.
نقاط شکست (Breakpoints) در این مثال بر اساس Bootstrap 5 هستند. این رویکرد به زودی برای بوت‌استرپ حتی مهم‌تر هم خواهد شد، با توجه به اینکه آنها پشتیبانی از تم‌های روشن/تیره/سایر تم‌ها را اضافه خواهند کرد.
اگر می‌خواهید وب را بهتر و سریع‌تر کنید، لطفاً:
- این مقاله را به اشتراک بگذارید،
- این مقاله را برای توسعه‌دهندگان فریم‌ورک‌هایی که استفاده می‌کنید ارسال کنید،
- این تفکیک CSS را در سایت‌های خود پیاده‌سازی کنید.
در شبکه‌های اجتماعی به اشتراک بگذارید یا برای بعد ذخیره کنید:
اگر می‌خواهید در مورد این بهینه‌سازی و رفتار مرورگر بیشتر بخوانید، لطفاً موارد زیر را ببینید:
- مقاله “CSS تطبیقی مشروط. رفتار مرورگر که ممکن است عملکرد شما را بهبود بخشد” نوشته وادیم ماکیف. تصویر روی جلد این مقاله از مقاله عالی او گرفته شده است، که در آن او تصاویر و آزمایش‌های بیشتری دارد.
- MDN Web Docs: بهینه‌سازی عملکرد CSS.