00:23 ربط ملف أنماط خارجي
يستخدم المثال link بعلاقة stylesheet وhref لملف داخل مجلد CSS. قد يُستضاف محلياً أو عبر CDN. تعرض الأمثلة ملفات لأقسام وأنواع صفحات مختلفة، قبل تحديد ما تحتاج إليه الصفحة الحالية.
02:00 كتابة الأنماط داخل المستند
يضيف المثال style في head ويغير الخلفية وحجم الخط. يصل هذا CSS مع HTML، بينما يحتاج الملف الخارجي إلى طلب مستقل. افحص النتيجة لتفهم الفرق قبل مقارنة تعدد الموارد.
03:25 توقيت الموارد وHTTP/2
اعرض البروتوكول وWaterfall في Network. توضح التجربة تداخل التحميل عبر HTTP/2 بدلاً من تنزيل كل ملف بعد الآخر. يرتبط تحليل CSS الحاجبة للعرض وسرعة الصفحة بالحجم والتوقيت والاستخدام، وليس بعدد الطلبات وحده.
05:16 تحميل الأنماط اللازمة للصفحة
قارن ملف المقال بملف الرئيسية. لا يلزم تحميل ملف يخص قالباً آخر في كل مكان. كما لا يحل دمج جميع الملفات كل مشكلات الأداء. حدد الموارد التي تحتاجها الصفحة ودورها الفعلي.
06:06 غرض CSS الحرجة
تغطي الأنماط الحرجة التخطيط الأولي، وتوضع داخل المستند في المثال، مع بقاء بقية الأنماط في ملفات. قارن الطريقتين وافحص التخطيط والطلبات في Network. يعتمد التقسيم المناسب على متطلبات الصفحة.