شريط اخباري

رفع سرعة مدونة بلوجر من خلال تحسين ملفات 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 برابط ملف خط الايقونات الموجود بالقالب.
والأن عليك قياس سرعة مدونتك مرة أخرى وستلحظ الفرق الكبير في سرعة المدونة بلا شك
تابع الجزء التالي من الشرح

جديد قسم : PageSpeed Insights

إرسال تعليق

اعلان خاصية تقسيم المواضيع
اعلان اول الموضوع
اعلان اخر الموضوع
اعلان فوق مقالات ذات صله
اعلان بعد الفقرة الاولي