عند تجميع CSS في ملف واحد، حتى بعد عملية الـ tree-shaking، فإنه لا يزال يحتوي على الكثير من CSS غير المستخدم بسبب سياقات @media المختلفة (الهاتف المحمول، الجهاز اللوحي، سطح المكتب، الثيمات الداكنة/الفاتحة/أخرى، إلخ).
هذا سيء لمقاييس Core Web Vitals: تأخير الإدخال الأول (FID)، أكبر محتوى مرئي (LCP)، تغيير التخطيط التراكمي (CLS)، بالإضافة إلى مقاييس الأداء وقابلية الاستخدام الحيوية الأخرى: أول محتوى مرئي (FCP)، إجمالي وقت الحظر (TBT)، وقت التفاعل (TTI)، وحدث DOMContentLoaded.
توجد طريقة لتحسين تحميل وعرض CSS بشكل كبير عن طريق فصل CSS إلى ملفات مختلفة، حيث يحتوي كل ملف فقط على الكود المطلوب في ذلك السياق.
قسّم ملفات CSS الخاصة بك إلى ملفات مختلفة:
📄main.css - يحتوي على CSS اللازم لجميع شروط @media
📄screen.css - يحتوي على CSS اللازم فقط لشرط @media الشاشة
📄print.css - يحتوي على CSS اللازم فقط لشرط @media الطباعة
📂breakpoints
📄x-small.css - يحتوي على CSS اللازم فقط لنقطة توقف X-Small
📄sm.css - يحتوي على CSS اللازم فقط لنقطة توقف Small
📄md.css - يحتوي على CSS اللازم فقط لنقطة توقف Medium
📄lg.css - يحتوي على CSS اللازم فقط لنقطة توقف Large
📄xl.css - يحتوي على CSS اللازم فقط لنقطة توقف Extra large
📄xxl.css - يحتوي على CSS اللازم فقط لنقطة توقف Extra extra large
📂themes
📄light.css - يحتوي على CSS اللازم فقط للثيم الفاتح
📄dark.css - يحتوي على CSS اللازم فقط للثيم الداكنثم، قم بتضمين ملفات 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 مجمعة في ملف واحد ولا تحدد شروطًا في سمات الوسائط لعلامات link، ينتظر المتصفح تحميل المجموعة الكاملة من CSS قبل البدء في عرض الصفحة. مما يبطئ عرض الصفحة بشكل كبير.
تعتمد نقاط التوقف في هذا المثال على Bootstrap 5. سيصبح هذا النهج أكثر أهمية بالنسبة لـ Bootstrap قريبًا نظرًا لأنهم سيضيفون دعمًا للثيمات الفاتحة/الداكنة/الأخرى.
إذا كنت ترغب في جعل الويب أفضل وأسرع، يرجى:
- مشاركة هذا المقال،
- إرسال هذا المقال إلى مطوري الأطر التي تستخدمها،
- تطبيق فصل CSS هذا على مواقعك.
شارك على وسائل التواصل الاجتماعي أو احفظه لوقت لاحق:
إذا كنت ترغب في قراءة المزيد عن هذا التحسين وسلوك المتصفح، يرجى الاطلاع على ما يلي:
- المقال “CSS تكيفية شرطية. سلوك المتصفح الذي قد يحسن أداءك” بواسطة Vadim Makeev. لقطة الشاشة للغلاف لهذا المقال مأخوذة من مقاله الممتاز، حيث لديه المزيد من لقطات الشاشة والتجارب.
- MDN Web Docs: تحسين أداء CSS.