طريقة تأجيل تحميل اكواد CSS و JS للحصول على تحميل اسرع

السؤال

يوجد الكثير من العمليات التي يمكنك القيام بها لاننا نفترض انك تحتاج الى الحصول على نتيجة كاملة 100% من تعديلات الاكواد التي يتكون منها موقعك لكي يكون التصميم متجاوب مع الكمبيوتر والجوال وهذا سوف يعطيك تقدم ملحوظ يساعدك في الحصول على ترتيب أفضل لنتائجك على الويب.

كيف يمكن تأجيل تحميل الملفات أو الشفرات البرمجية بلغتي CSS و جافا سكريبت بحيث يمكننا ازالة هذه المشكلة نهائيا عند فحص سرعة تحميل صفحات الموقع ؟

تم الحل 1
ali 5 أشهر 2020-12-31T10:30:09+03:00 1 إجابة 37 مشاهدات 1

إجابة ( 1 )

    0
    2021-05-21T17:34:57+03:00
    هذه الإجابة تم تعديله.

    خطوات تأجيل Defer تحميل كل اكواد CSS و JS المتضمنة ضمن ملفات HTML والحصول على نتيجة عالية في اختبار سرعة تحميل صفحات الموقع وكالاتي :

    التوجه الى هذه الصفحة sitelocity.com وعمل استخلاص لكل أكواد CSS وجافا سكريبت المتضمنة داخل اكواد HTML في صفحات الموقع وكما في الصورة التالية.

    Critical Path CSS Generator

    بعد الضغط على Critical Path CSS Generate التي تعني توليد مسار حرج لاكواد CSS المتضمنة داخل أكواد HTML ستظهر كما في الصورة ادناه.

    الاكواد الحرجة

    يتم تحميل الاكواد في الصندوق اعلاه ويمكن تحميلها من نفس الصفحة على شكل ملف تم تجميع كل الشفرات البرمجية الخاصة بلغة Css واختيار الكود في الصندوق أسفله مع وضع مسار الملف الموجود بدلا من PATH_TO_COMBINED_CSS_FILE الموجود بين علامتي التنصيص كما نشاهد في الصورة ليكون الشكل قبل عملية التأجيل لهذه الملفات وتجميعها كما في الصورة.

    Setup example for the critical path css - step 1

    ليكون بالشكل التالي :

    Setup example for the critical path css - step 2

    أو يمكن اختصار ذلك عبر اضافة WP Rocket عبر الخيار File Optimization ووضعه في الصندوق الموجود بعد تفعيل الخيار Optimize CSS Delivery لكي يتم انشاؤه تلقائيا عبر الاضافة ويتم الحصول على سرعة كبيرة لانها سوف تقوم بتحميل الملفات بعد تحميل الصفحة مباشرة.

    أفضل إجابة

‫أضف إجابة