تحسين تسليم CSS: فهم تقنية تحميل CSS المؤجل

لتحسين أداء موقع الويب، غالبًا ما يقوم المطورون بتحسين تسليم CSS. تتضمن إحدى الإستراتيجيات المذكورة في وثائق Google Developers تضمين CSS المهم في قسم

ومع ذلك، يتركنا هذا مع السؤال: كيف يمكننا تحميل ملف CSS كبير بعد تحميل الصفحة؟

الحل: تأجيل تحميل ملفات CSS الكبيرة

لتأجيل تحميل ملف CSS كبير، يمكننا استخدام كود jQuery بسيط مقتطف:

    function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='" src " />"));
    }
};

من خلال استدعاء هذه الوظيفة داخل الدالة $(document).ready() أو window.onload، يمكننا تحميل ملف CSS ديناميكيًا بعد انتهاء تحميل الصفحة.

التحقق من الطريقة

للتحقق من نجاح هذه الطريقة، حاول تعطيل JavaScript في متصفحك ثم أعد تحميل الصفحة. إذا استمرت الصفحة في التحميل بشكل صحيح باستخدام أوراق الأنماط المطبقة، فهذا يوضح التأجيل الناجح لتحميل CSS.

طرق بديلة

هناك طرق بديلة لتأجيل تحميل CSS، مثل مثل استخدام عنصر