إغلاق القائمة
رفع سرعة مدونة بلوجر من خلال تحسين ملفات CSS

رفع سرعة مدونة بلوجر من خلال تحسين ملفات CSS

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

    ماهي أكواد CSS ؟!

    CSS هي إختصار لجملة Cascading Style Sheets وهي أحد لغات برمجة المواقع وهي تختص بتحديد شكل الموقع والتأثيرات المرئية والبصرية والالوان والخطوط له وما إلى ذلك.
    ولا يمكن الإستغناء عن أكواد CSS في قوالب بلوجر وأحيانا قد تصبح مدونة بلوجر بطيئة بسبب تلك الأكواد وبما أنه لا يمكن الإستغناء عنها ولا عن سرعة المدونة فهناك عدد من الطرق والحيل التي نلجأ لها من اجل تسريع مدونة بلوجر بدون التأثير على أكواد CSS الخاصه بالقالب.

    أين توجد اكواد CSS في قالب مدونة بلوجر؟

    توجد اكواد CSS في مدونات بلوجر بعدة اشكال مختلفة كما يلي:
    الشكل العام والأساسي لها يكون كذلك
    اكواد CSS في مدونات بلوجر

    ولكنها لابد وأن تأتي بين وسمين للفتح والإغلاق كما في تلك الصورة
    اكواد CSS في مدونات بلوجر
    اكواد CSS في مدونات بلوجر

    هذا هو الشكل العادي التي تبدو به الأكواد داخل قالب مدونة بلوجر ولكن هناك بعد الأكواد التي يتم تضمينها داخل ملف بصيغة css. ومنها مكتبات الخطوط المختلفه ومكتبة خط الأيقونات Font Awesome التي ماعاد قالب لبلوجر إلا ويحتوى عليها وهذه الملفات تظهر داخل القالب غالبا بأحد هذه الأشكال.
    شكل ملف الخط داخل مدونة بلوجر
    شكل ملف الخط داخل مدونة بلوجر
    أو
    مكتبة خط الأيقونات Font Awesome
    مكتبة خط الأيقونات Font Awesome
    والمشكلة تكمن في هذه الملفات التي تتسبب في بطء القالب

    مشكلة التخلص من عناصر جافا سكريبت وCSS التي تحظر عرض المحتوى في الجزء العلوي:

    التخلص من عناصر جافا سكريبت وCSS التي تحظر عرض المحتوى في الجزء العلوي
    التخلص من عناصر جافا سكريبت وCSS التي تحظر عرض المحتوى في الجزء العلوي
    عندما تقوم بقياس سرعة مدونتك من خلال أداة PageSpeed Insights يظهر لك ذلك الخطأ وهو يخبرك بأن هناك ملفات بلغة CSS تتسبب في إبطاء القالب وتقف عائقا امام قراءة صفحات موقعك حيث أن المتصفح يقرأ أكواد قالبك سطرا تلو الاخر وإذا وجدت تلك الملفات في الجزء العلوي فإن المتصفح يضطر للإنتظار حتى طلبها من الطرف الثالث الذي يقوم بإستضافتها على خوادمه وقرائتها ثم يكمل قراءة باقى أكواد قالبك، ولمعرفة هذه الملفات عليك بالضغط على عرض كيفية الحل وستظهر لك الروابط 
    إقرأ أيضا:

    لماذا تتسبب ملفات CSS في إبطاء القالب؟!

    السبب الأساسي التي يجعل ملفات سي إس إس تقلل من سرعة القالب أنها تكون مقدمة من طرف ثالث وبالتالى فعندما يقوم المتصفح بتحميل صفحة من مدونتك فهو يقوم بقراءة أكواد القالب الخاص بك و طلب وقراءة أكواد ملف CSS الموجوده لدى طرف ثالث ورابع وخامس إذاا ما تعددت ملفات الCSS الخارجية في قالبك، ويجب أن ينتهي من طلب الملفات الخارجية وقرائتها ثم قراءة أكواد موقعك وذلك يتسبب في بطىء المدونة كلما زادت الملفات الخارجية وهذا يختلف بالطبع عن إذا ماكان يقرأ أكواد من موقعك فقط بدون طلب ملفات من أطراف خارجيه

    تحسين ملفات CSS المستضافه لدى أطراف خارجية

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

    تحسين ملفات CSS الخاصه بخطوط المدونة

    كل مدونة قد تحتوي على خط أو إثنان وهي تبدو بهذا الشكل
     وهنا نرى أن رابط الملف الخارجي للخط موضوع بين علامتي تنصيص ’’ 
    الأن قم بنسخ رابط الملف الخارجي وضعه في المتصفح وإضغط Enter وسيظهر لك كل ماداخل الملف من أكواد قم بنسخها جميعا وضعها بين وسمي 
    <style> css content </style>
    
    مع إستبدال عبارة css content بالأكواد التي قمت بنسخها من ملف الخط والأن ضع الكود بعد وسم
    <head>
    
    ويجب تطبيق تلك الخطوه مع جميع ملفات الخطوط بالقالب لحل المشكله وسيحدث ذلك فرقا كبيرا في سرعة المدونة

    تحسين ملفات خطوط الايقونات Font Awesome

    الحل السابق يمكن إستخدامه مع ملفات الخطوط العادية ولكن لا يمكن إستخدامه مع ملفات خط الأيقونات Font Awesome  لأن حجم الملف عادة ما يكون كبير وإذا إستخدمنا تلك الطريقه معه سيصبح القالب أبطأ ولذلك فالحل هو تأخير قراءة ملف الخط وذلك بوضعه في أسفل القالب وذلك من خلال نقل ملف Font Awesome إلى فوق ذلك الوسم مباشرة وهو يكون في نهاية القالب عادة
    </body>
    
    كما يمكن تحسين الملف أكثر بنسخ رابط ملف خط Font Awesome ووضعه داخل هذا الكود
    مع إستبدال Font/Awesome.css برابط ملف خط الايقونات الموجود بالقالب.
    والأن عليك قياس سرعة مدونتك مرة أخرى وستلحظ الفرق الكبير في سرعة المدونة بلا شك
    تابع الجزء التالي من الشرح
    المحتوى الموجود بهذه الصفحه من مدونة مقال تك هو محتوى تعليمي بحت تم نشره لأغراض تعليميه وتثقيفيه خالصه وفريق عمل الموقع غير مسؤل إطلاقا عن سوء إستخدام هذا المحتوى بأي شكل من الأشكال، ولا يجوز نسخ أو نقل أي جزء من هذا المحتوى إلا مع ذكر المصدر ورابط المدونة وإلا سيتم إتخاذ الإجراء المناسب لمنع سرقة محتوى الموقع.

    مقالات متعلقة

    إرسال تعليق