كيف ترفع سرعة موقعك من خلال تحسين كود CSS ؟
أعزائي مطوري المواقع، لاشك أن سرعة موقعك شيئ ضروري جدا ، اذا تعتبره Google من أحد المعايير المتعلقة بتقييم المواقع.
جبتلكم اليوم ثريد 👇 يشرح أهم الخطوات المتبعة لتحسين سرعة موقعك قدر الامكان، عن طريق تحسين كود CSS.
ركز معي☕️.
أعزائي مطوري المواقع، لاشك أن سرعة موقعك شيئ ضروري جدا ، اذا تعتبره Google من أحد المعايير المتعلقة بتقييم المواقع.
جبتلكم اليوم ثريد 👇 يشرح أهم الخطوات المتبعة لتحسين سرعة موقعك قدر الامكان، عن طريق تحسين كود CSS.
ركز معي☕️.
في مجال تصميم و تطوير المواقع دائماً مايحتلّ موضوع سرعة الموقع حيّزاً لا بأس به من الاهتمام، كما أنّه أحد المعايير التي تعتمدها غوغل لتقييم المواقع، وهذا الأمر طبيعي جدّاً
فجميعنا كمستخدمين لا نرغب أبداً بالتعامل مع المواقع البطيئة ومعظمنا يبتعد عنها ويبحث ويستخدم البدائل الأفضل و الأسرع، لذا وجب العمل على زيادة السرعة قدر الإمكان.
طبعاً الأمر شائك جدّاً ويحمل الكثير و الكثير من الأمور الأخرى التي يجب معالجتها وأخذها بعين الاعتبار، بعضها يحتاج جهداً و تكلفةً ليست بالقليلة، وبعضها على العكس يمكن اعتمادها كخطوات اعتيادية روتينية عند العمل على أيّ موقع لتحدث زيادةً حقيقيةً و واضحة في سرعة الموقع.
فإذا كنت أحد المصمّمين المهتمين بتقديم أفضل الأعمال والمشاريع، فأنت بالطبع تعلم أنّ تحميل الموقع يتطلّب تحميل الملفات الموجودة على السيرفر كملفّات HTML وJavaScript وCSS،
وكلما ازداد حجم هذه الملفات كلّما ازداد زمن تحميل الموقع وهذا يعني بطء في سرعة الموقع، لذا العمل على تحسين هذه الملّفات أمر بالغ الأهميّة لتقليل زمن التأخير إلى الحدّ الأدنى.
في هذا الثريد سأقدّم لك مجموعة خطوات سهلة جدّاً وبسيطة لتحسين ملفات CSS، التي ستحسّن أعمالك وسرعة المواقع التي تعمل على تصميمها بشكل ملحوظ! ربّما ليست جميعها قابلة للتطبيق في كل المشاريع لكن من المهمّ أن تبقى حاضرةً في ذهنك أثناء العمل.
⬅️ اعتمد الاختصار دوماً
كما ذكرنا سابقاً ازدياد طول ملف CSS يعني ازدياداً في حجمه وهذا ما لانريده هنا، لكن مشكلة تعليمات CSS دائماً ماتكون مفصّلة بشكل مبالغ ودقيق جداً، فمثلاً التعليمات لتعديل الهوامش لفقرة ما بشكل صريح كالتالي:
كما ذكرنا سابقاً ازدياد طول ملف CSS يعني ازدياداً في حجمه وهذا ما لانريده هنا، لكن مشكلة تعليمات CSS دائماً ماتكون مفصّلة بشكل مبالغ ودقيق جداً، فمثلاً التعليمات لتعديل الهوامش لفقرة ما بشكل صريح كالتالي:
يتطلّب الأمر أربعة أسطر، وهذا كثير من أجل فقرة واحدة!! لتعديل هوامش كل فقرة نحتاج 4 أسطر سيتضاعف حجم الملف بلا طائل، لذا كان الحل باستخدام الاختصار التالي:
ببساطة تمّ اختزال التعليمات إلى تعليمة واحدة واضحة معبّرة ومختصرة وهذا هو المطلوب.
استخدام مثل هذه الاختصارات سيقلّل حجم ملف CSS بشكل هائل ومؤثّر بشكل فعّال على زيادة سرعة الموقع.
استخدام مثل هذه الاختصارات سيقلّل حجم ملف CSS بشكل هائل ومؤثّر بشكل فعّال على زيادة سرعة الموقع.
⬅️ تخلّص من كل شيء غير مستخدم!
الأجزاء الزائدة من كود CSS غير المستخدمة لأيّ غرض كان، هي إضافة غير لازمة في حجم الملفّ، و هذا يضيف أعباء إضافية عند التحميل، ببساطة تخلّص ممّا هو زائد!
السؤال هنا كيف ستتمكّن من معرفة ماهو مستخدم وماهو ليس مستخدم؟
الأجزاء الزائدة من كود CSS غير المستخدمة لأيّ غرض كان، هي إضافة غير لازمة في حجم الملفّ، و هذا يضيف أعباء إضافية عند التحميل، ببساطة تخلّص ممّا هو زائد!
السؤال هنا كيف ستتمكّن من معرفة ماهو مستخدم وماهو ليس مستخدم؟
لا تقلق الأمر بسيط،فمتصفحات الانترنت توفّر لك الأداة المناسبة لذلك.
Developer -> Developer tools -> Source tap -> Command menu -> Show Coverage
ستظهرنافذة تحوي قائمة بالأجزاء غير المستخدمة من التعليمات وحجمها بالبايت byte، في الصفحة الحالية التي تختبرها وليس كامل الموقع بالطبع.
Developer -> Developer tools -> Source tap -> Command menu -> Show Coverage
ستظهرنافذة تحوي قائمة بالأجزاء غير المستخدمة من التعليمات وحجمها بالبايت byte، في الصفحة الحالية التي تختبرها وليس كامل الموقع بالطبع.
⬅️ اجعل التعليمات مرتبةً قدر الإمكان
جعل التعليمات مرتبة وسهلة القراءة له العديد من الفوائد، إضافةً إلى انه يسهّل عملية الصيانة سواء كنت أنت من يقوم بها أو أي شخص آخر، فقراءة التعليمات الكثيرة المتتالية خطاً خطاً لاكتشاف كل الثغرات ليس بالأمر السهل،
جعل التعليمات مرتبة وسهلة القراءة له العديد من الفوائد، إضافةً إلى انه يسهّل عملية الصيانة سواء كنت أنت من يقوم بها أو أي شخص آخر، فقراءة التعليمات الكثيرة المتتالية خطاً خطاً لاكتشاف كل الثغرات ليس بالأمر السهل،
لكن الحلّ موجود أيضاً من خلال متصفح الانترنت كالتالي:
Developer -> Developer tools -> Audits
هذا التحليل سيعطيك تقريراً مفصّلاً بكلّ العناصر الإشكالية و مدى خطورتها -خطرة ويمكن اعتبارها خطأ أم متوسطة الخطورة أم آمنة وصحيحة.
Developer -> Developer tools -> Audits
هذا التحليل سيعطيك تقريراً مفصّلاً بكلّ العناصر الإشكالية و مدى خطورتها -خطرة ويمكن اعتبارها خطأ أم متوسطة الخطورة أم آمنة وصحيحة.
⬅️ لا تغفل عن أي مشكلة موجودة أو قد تقع!
التحليل المعتمد للمواقع وملفات CSS هو التحليل الآلي بالطبع لأنه أسرع و أدق، لكنّ للأسف ليس مثالياً، فقد يؤدي في كثير من الأحيان إلى أخطاء جديدة؛ قد لا يخطر في بالك صديقي أنها قد تحدث!!
التحليل المعتمد للمواقع وملفات CSS هو التحليل الآلي بالطبع لأنه أسرع و أدق، لكنّ للأسف ليس مثالياً، فقد يؤدي في كثير من الأحيان إلى أخطاء جديدة؛ قد لا يخطر في بالك صديقي أنها قد تحدث!!
لذلك احرص دوماً على التحقّق من كل ملفّات CSS المعدّلة و ذلك من خلال تحليل الموقع كاملاً بعد التعديل وتأكّد من عدم وجود الأخطاء قبل تثبيت التعديلات.
⬅️ الأجزاء المهمّة من CSS اجعلها من نوع Internal
لإضافة CSS إلى الموقع توجد عدّة طرق أحدها هو النوع internal؛ أي إضافة كود CSS داخل ملف HTML في قسم <head> باستخدام وسم <style>، طبعاً بما أنّه مضمّن داخل HTML فهذا يعني أنه لا يحتاج لتحميله بشكل خاصّ من السيرفر،
لإضافة CSS إلى الموقع توجد عدّة طرق أحدها هو النوع internal؛ أي إضافة كود CSS داخل ملف HTML في قسم <head> باستخدام وسم <style>، طبعاً بما أنّه مضمّن داخل HTML فهذا يعني أنه لا يحتاج لتحميله بشكل خاصّ من السيرفر،
فقط ملف HTML ممّا يزيد من سرعة الموقع بشكل ملحوظ جدّاً.
لكن كن حذراً ولا تبالغ، فكلا طرفي الأمر ذميم، لا تبالغ في حشر كل كود CSS داخل ملف HTML فهذا سيضاعف حجمه، وكذلك لاتفصله بشكل كامل في ملفّ خاصّ، فقط الأجزاء المهمّة الضرورية واللّازم تحمليها بسرعة اجعلها Internal.
لكن كن حذراً ولا تبالغ، فكلا طرفي الأمر ذميم، لا تبالغ في حشر كل كود CSS داخل ملف HTML فهذا سيضاعف حجمه، وكذلك لاتفصله بشكل كامل في ملفّ خاصّ، فقط الأجزاء المهمّة الضرورية واللّازم تحمليها بسرعة اجعلها Internal.
⬅️ تجنّب الترجمة التسلسلية لملفّات CSS
عند كتابة ملفّ CSS، قد تحتاج إلى مجموعة من التعليمات المكرّرة المكتوبة مسبقاً في ملف آخر، لذلك الحلّ ممكن باستيراده باستخدام التعليمة import@، حيلة جميلة وسريعة لكنّها ليست مجانية! فعند استخدامها الملفات المطلوب
عند كتابة ملفّ CSS، قد تحتاج إلى مجموعة من التعليمات المكرّرة المكتوبة مسبقاً في ملف آخر، لذلك الحلّ ممكن باستيراده باستخدام التعليمة import@، حيلة جميلة وسريعة لكنّها ليست مجانية! فعند استخدامها الملفات المطلوب
استيرادها ستجلب واحداً تلو الآخر، وتترجم على التسلسل، وفي هذا كلفة زمنية كبيرة هي سيئة تتغلّب على فائدة هذه التعليمة.
الحل باستخدام سلاسل من الروابط إلى ملفات CSS المطلوبة باستخدام وسم <link>، والمتصفح يقوم بجلب هذه الروابط معاً على التوازي دفعة واحدة.
الحل باستخدام سلاسل من الروابط إلى ملفات CSS المطلوبة باستخدام وسم <link>، والمتصفح يقوم بجلب هذه الروابط معاً على التوازي دفعة واحدة.
⬅️ استبدل الصور بتعليمات CSS
سابقاً كان شائعاً استخدام صور لإضافة الشفافية على الموقع وتدرجات الرمادي، حالياً لست بحاجة لهذه الصور فالفلاتر موجود مسبقاً ضمن تعليمات CSS ويمكنك استخدامها ببساطة وتوفّر الموارد المكلفة!
سابقاً كان شائعاً استخدام صور لإضافة الشفافية على الموقع وتدرجات الرمادي، حالياً لست بحاجة لهذه الصور فالفلاتر موجود مسبقاً ضمن تعليمات CSS ويمكنك استخدامها ببساطة وتوفّر الموارد المكلفة!
⬅️ استخدم اختصارات الألوان
طبعاً استخدام 6 أرقام للتعبير عن اللّون سيعطي نتيجة دقيقة حتماً، لكن هذا يضيف عبئاً على ملف CSS، تجنّب استخدام هذه الطريقة للتعبير عن الألوان
طبعاً استخدام 6 أرقام للتعبير عن اللّون سيعطي نتيجة دقيقة حتماً، لكن هذا يضيف عبئاً على ملف CSS، تجنّب استخدام هذه الطريقة للتعبير عن الألوان
واستخدم الطرق المختصرة كاستخدام اسم اللّون بشكل صريح، في الحالات التي لا تحتاج فيها إلى ألوان من تدرجات غريبة جداً قد لا تعرف لها اسماً.
هذه 8 نقاط ذكرناها لتحسين سرعة موقعك باستعمال كود CSS، اذا وصلت الى هنا الى القراءة فأهنئك ، وانا مهتم برأيك اذا كنت تريد 🌟جزء ثاني🌟 لهذا الموضوع لأنه لازال هناك 8 نقاط مهمة أخرى، اذا كنت تريد مني أذكرها في ثريد ثاني فأترك تعليق من فضلك حتى أعرف اذا كان الأمر مهم لك.
جاري تحميل الاقتراحات...