كيف ترفع سرعة موقعك من خلال تحسين كود CSS ؟
8 د
في مجال تصميم و تطوير المواقع دائماً مايحتلّ موضوع سرعة الموقع حيّزاً لا بأس به من الاهتمام، كما أنّه أحد المعايير التي تعتمدها غوغل لتقييم المواقع، وهذا الأمر طبيعي جدّاً فجميعنا كمستخدمين لا نرغب أبداً بالتعامل مع المواقع البطيئة ومعظمنا يبتعد عنها ويبحث ويستخدم البدائل الأفضل و الأسرع، لذا وجب العمل على زيادة السرعة قدر الإمكان.
طبعاً الأمر شائك جدّاً ويحمل الكثير و الكثير من الأمور الأخرى التي يجب معالجتها وأخذها بعين الاعتبار، بعضها يحتاج جهداً و تكلفةً ليست بالقليلة، وبعضها على العكس يمكن اعتمادها كخطوات اعتيادية روتينية عند العمل على أيّ موقع لتحدث زيادةً حقيقيةً و واضحة في سرعة الموقع.
فإذا كنت أحد المصمّمين المهتمين بتقديم أفضل الأعمال والمشاريع، فأنت بالطبع تعلم أنّ تحميل الموقع يتطلّب تحميل الملفات الموجودة على السيرفر كملفّات HTML وJavaScript وCSS، وكلما ازداد حجم هذه الملفات كلّما ازداد زمن تحميل الموقع وهذا يعني بطء في سرعة الموقع، لذا العمل على تحسين هذه الملّفات أمر بالغ الأهميّة لتقليل زمن التأخير إلى الحدّ الأدنى.
اقرأ أيضًا: فن تصميم رسائل الخطأ.. بطريقة صحيحة جداً
في هذا المقال سأقدّم لك مجموعة خطوات سهلة جدّاً وبسيطة لتحسين ملفات CSS، التي ستحسّن أعمالك وسرعة المواقع التي تعمل على تصميمها بشكل ملحوظ! ربّما ليست جميعها قابلة للتطبيق في كل المشاريع لكن من المهمّ أن تبقى حاضرةً في ذهنك أثناء العمل.
اعتمد الاختصار دوماً
كما ذكرنا سابقاً ازدياد طول ملف CSS يعني ازدياداً في حجمه وهذا ما لانريده هنا، لكن مشكلة تعليمات CSS دائماً ماتكون مفصّلة بشكل مبالغ ودقيق جداً، فمثلاً التعليمات لتعديل الهوامش لفقرة ما بشكل صريح كالتالي:
يتطلّب الأمر أربعة أسطر، وهذا كثير من أجل فقرة واحدة!! لتعديل هوامش كل فقرة نحتاج 4 أسطر سيتضاعف حجم الملف بلا طائل، لذا كان الحل باستخدام الاختصار التالي:
ببساطة تمّ اختزال التعليمات إلى تعليمة واحدة واضحة معبّرة ومختصرة وهذا هو المطلوب.
استخدام مثل هذه الاختصارات سيقلّل حجم ملف CSS بشكل هائل ومؤثّر بشكل فعّال على زيادة سرعة الموقع، وللاطلاع على مختلف الاختصارات الأخرى المتاحة من هنا.
تخلّص من كل شيء غير مستخدم!
الأجزاء الزائدة من كود CSS غير المستخدمة لأيّ غرض كان، هي إضافة غير لازمة في حجم الملفّ، و هذا يضيف أعباء إضافية عند التحميل، ببساطة تخلّص ممّا هو زائد!
السؤال هنا كيف ستتمكّن من معرفة ماهو مستخدم وماهو ليس مستخدم؟ لا تقلق الأمر بسيط، فمتصفحات الانترنت توفّر لك الأداة المناسبة لذلك.
Developer -> Developer tools -> Source tap -> Command menu -> Show Coverage
ستظهر نافذة تحوي قائمة بالأجزاء غير المستخدمة من التعليمات وحجمها بالبايت byte، في الصفحة الحالية التي تختبرها وليس كامل الموقع بالطبع.
اجعل التعليمات مرتبةً قدر الإمكان
جعل التعليمات مرتبة وسهلة القراءة له العديد من الفوائد، إضافةً إلى انه يسهّل عملية الصيانة سواء كنت أنت من يقوم بها أو أي شخص آخر، فقراءة التعليمات الكثيرة المتتالية خطاً خطاً لاكتشاف كل الثغرات ليس بالأمر السهل، لكن الحلّ موجود أيضاً من خلال متصفح الانترنت كالتالي:
Developer -> Developer tools -> Audits
هذا التحليل سيعطيك تقريراً مفصّلاً بكلّ العناصر الإشكالية و مدى خطورتها -خطرة ويمكن اعتبارها خطأ أم متوسطة الخطورة أم آمنة وصحيحة.
لا تغفل عن أي مشكلة موجودة أو قد تقع!
التحليل المعتمد للمواقع وملفات CSS هو التحليل الآلي بالطبع لأنه أسرع و أدق، لكنّ للأسف ليس مثالياً، فقد يؤدي في كثير من الأحيان إلى أخطاء جديدة؛ قد لا يخطر في بالك صديقي أنها قد تحدث!! لذلك احرص دوماً على التحقّق من كل ملفّات CSS المعدّلة و ذلك من خلال تحليل الموقع كاملاً بعد التعديل وتأكّد من عدم وجود الأخطاء قبل تثبيت التعديلات.
الأجزاء المهمّة من CSS اجعلها من نوع Internal
لإضافة CSS إلى الموقع توجد عدّة طرق أحدها هو النوع internal؛ أي إضافة كود CSS داخل ملف HTML في قسم <head> باستخدام وسم <style>، طبعاً بما أنّه مضمّن داخل HTML فهذا يعني أنه لا يحتاج لتحميله بشكل خاصّ من السيرفر، فقط ملف HTML ممّا يزيد من سرعة الموقع بشكل ملحوظ جدّاً.
لكن كن حذراً ولا تبالغ، فكلا طرفي الأمر ذميم، لا تبالغ في حشر كل كود CSS داخل ملف HTML فهذا سيضاعف حجمه، وكذلك لاتفصله بشكل كامل في ملفّ خاصّ، فقط الأجزاء المهمّة الضرورية واللّازم تحمليها بسرعة اجعلها Internal.
تجنّب الترجمة التسلسلية لملفّات CSS
عند كتابة ملفّ CSS، قد تحتاج إلى مجموعة من التعليمات المكرّرة المكتوبة مسبقاً في ملف آخر، لذلك الحلّ ممكن باستيراده باستخدام التعليمة import@، حيلة جميلة وسريعة لكنّها ليست مجانية! فعند استخدامها الملفات المطلوب استيرادها ستجلب واحداً تلو الآخر، وتترجم على التسلسل، وفي هذا كلفة زمنية كبيرة هي سيئة تتغلّب على فائدة هذه التعليمة.
الحل باستخدام سلاسل من الروابط إلى ملفات CSS المطلوبة باستخدام وسم <link>، والمتصفح يقوم بجلب هذه الروابط معاً على التوازي دفعة واحدة.
استبدل الصور بتعليمات CSS
سابقاً كان شائعاً استخدام صور لإضافة الشفافية على الموقع وتدرجات الرمادي، حالياً لست بحاجة لهذه الصور فالفلاتر موجود مسبقاً ضمن تعليمات CSS ويمكنك استخدامها ببساطة وتوفّر الموارد المكلفة!
استخدم اختصارات الألوان
طبعاً استخدام 6 أرقام للتعبير عن اللّون سيعطي نتيجة دقيقة حتماً، لكن هذا يضيف عبئاً على ملف CSS، تجنّب استخدام هذه الطريقة للتعبير عن الألوان واستخدم الطرق المختصرة كاستخدام اسم اللّون بشكل صريح، في الحالات التي لا تحتاج فيها إلى ألوان من تدرجات غريبة جداً قد لا تعرف لها اسماً.
أزل الأصفار والواحدات غير الضرورية
الأصفار والواحدات غير الضرورية لا فائدة ترجى من وجودها، فهي زيادة في حجم الملفّ دون جدوى، مثلاً كتابة 2.0 بدلاً من 2، أو إضافة الواحدة الافتراضية، لماذا؟!!! اكتب بطريقة أكثر ديناميكية وسلاسة.
أمّا بالنسبة للواحدات units، فقواعد CSS تفترض الواحدة الافتراضية لأي رقم بلا واحدة البكسل px، لذلك عندما لا تريد استخدام واحدات أخرى فلا حاجة للتصريح عن واحدة البكسل، فكل px تزيلها توفّر 2 بايت من حجم الملف!
أزل الفواصل الزائدة
بالتأكيد الفاصلة المنقوطة أمر مهمّ جدّاً، وغيابها يؤدي لأعداد كبيرة جداً من الأخطاء، لكن من خصائص CSS أنّ الفاصلة المنقوطة في نهاية التعليمة الأخيرة من كل خاصية property غير ضرورية ولا حاجة لها، لذا يمكن تجاهلها.
ربّما هذا الأمر قد لا يؤثّر تأثيراً كبيراً في تحسين سرعة الموقع، لكنّه حتماً مفيد عند استخدام المحسّن الآلي Automated optimizer، لأن مهمّته زيادة أداء CSS بشكل آلي، فهو سيقوم بإزالة كل الفواصل المنقوطة الزائدة، ممّا يستغرق وقتاً إضافياً لانتهاء عملية التحسين، لذلك لا حاجة لإضاعة هذ الوقت ولا تضف فواصل زائدة.
لكن احذر، فقط الفاصلة المنقوطة بعد التعليمة الأخيرة من كل خاصية.
استخدم Texture atlas
Texture atlas تعني صورة كبيرة مؤلفة من مجموعة صور أخرى أصغر، لتقليل الحجم الإجمالي لهذه الصور جميعها.
هذه الصور تستخدم لإضفاء التأثيرات والنقوش وغيرها، يمكن إنشاء مثل هذه الصور المجملة من خلال برامج خاصة مثل TexturePacker، بشكل سهل وبسيط.
تجنّب الخصائص المكلفة والغالية
عند تحليل ملفّات CSS ظهر أن بعض الخوّاص مكلفة أكثر من غيرها وتؤثّر على الأداء بشكل سلبي، لذلك عليك بتجنّبها كلّما سنحت لك الفرصة ذلك، لا تستخدم هذه الخواص المكلفة إلا عند الضرورة والحاجة الملحّة.
كما في هذه التعليمات كمثال:
استعن بالضغط الألي للملفات
بدايةً إضافة المساحات البيضاء والفراغات وكذلك التعليقات يجعل الملفّ أكثر سهولة للقراءة والفهم، لكنّه في المقابل يزيد العبء على المترجم، وبالتالي يسبّب تأخيراً في التحميل وبطء الموقع.
كما أنّ إزالة التعليقات تجعل من الصعب على المخترقين والمتطفلين فهم الكود وآلية التفكير الكامنة خلفه!
لذلك تخلّص من كل هذه الأمور الزائدة بعد الانتهاء من كتابة كامل الملفّ قبل نشره. يمكن القيام بذلك يدويّاً من خلال أي برنامج نصيّ Shell script أو أي تطبيق آخر مشابه، لكن ذلك غير ضروري جداً فالضغط الآلي يتكفّل بالأمر.
فقد أنشأ فريق Yahoo الموجّه لتجربة المستخدم، تطبيقاً مسؤولاً عن الكثير من عمليات الضغط المطلوبة كإزالة التعليقات والفراغات والمساحات البيضاء وغيرها، إذ يحقّق نسبة ضغط تصل إلى 20%.
يمكن الاستفادة منه بالاستعانة بملف jar، يمكنك تحميله من هنا، ويمكن تشغيله على آلة جافا الافتراضية JVM بشكل اختياري.
حافظ على اختبار Sass وكلّ أطر العمل الأخرى
Sass هو ببساطة أحد المعالجات المسبقة لـ CSS، يضيف إلى لغة CSS الأساسية ميزات خاصّة مثل المتغيرات والقواعد المتداخلة – يسمّى أحياناً المجمّل اللغوي لـ CSS- بهدف جعل عملية البرمجة باستخدام CSS أكثر سهولة و فاعلية.
لكن مثل هذه الأطر لا تعطي دائماً النتائج الأفضل، فقد تؤدي في بعض الأحيان إلى أكواد صعبة ومعقّدة، لذا يجب إلقاء النظر على الملفات الناتجة من وقت لآخر والعمل على تحسينها نحو الأفضل.
اعتمد التخزين المؤقت Cache، لكن بطريقة صحيحة
“الملفّات الأسرع هي التي لا تُنقَل عبر أيّ من الوسائل“، فاحرص دائماً على الاستفادة من الكاش بأفضل طريقة ممكنة وبأكبر كفاءة، بحيث تحافظ على بقاء الملفّات المهمّة وتحميلها يتطلّب وقتاً، بعد تحميلها لأوّل مرّة في الكاش المحلية لجهاز المستخدم.
لكن للأسف، ضبط هذا الأمر يجب أن يتمّ من خلال السيرفر، كما أنّه على الرغم من فائدته الكبيرة إلّأ أنّ الملفات المخزّنة في الكاش تبقى لفترة طويلة فيها قبل انتهاء صلاحيتها، في حين أنّ هذه الملفّات قد تُعدّل أو تُحدّث، وهذا يجعل المستخدم الذي يحتفظ بنسخة مؤقتة من الموقع بعيداً عن هذه التغييرات والتحديثات، وهذا مايجعل المصمّمين يحاولون تجنّب الأمر برمته، لا تكن مثلهم فالحل موجود.
فهو متاح من خلال مايسمّى Bust، أيّ استخدام رقم معرّف إصدار للملف وهو رقم فريد، لإخبار المتصفّح أن هنالك إصداراً جديداً متاحاً من الملفّ، بالتالي الطلب الجديد يعالج في السيرفر وليس في الكاش، للحصول على النسخة الجديدة المحدّثة.
هذا الأمر يتمّ باستخدام الCSS من خلال تضمين علامات باسم الملف لجعل المسار ديناميكياً، كما في التعليمة التالية، رغم أنّها وللأسف لا تعمل في كل مكان، فبعض البروكسي proxies ترفض تخزين الملفات التي تحوي مسارات “ديناميكية”.
و أخيراً وليس آخراً، و بمكان ليس ببعيد عن تحسين CSS، يوجد أمر إضافيّ آخر مهمّ وهو إذا كان المخدّم لا يستخدم HTTP/2 وضغط gzip، هذا الأمر سيسبّب وقتاً كبيراً ضائعاً أثناء نقل الملفّات.
لكن لا بأس فلا توجد مشكلة من دون حلّ! والحلّ يكون بتعديل آلية عمل السيرفر، يمكنك أن تجد طريقة التعديل في التوثيق الخاصّ بالمخدم الذي تستخدمه، إذ يختلف الأمر حسب النظام لديك.
الخطوات سهلة وبسيطة وفي متناول يد الجميع، فاحرص دائماً صديقي المصمّم على إتقان عملك بالشكل الأمثل، ولا تتوانى أبداً عن التعلّم باستمرار، فكلّ يوم يحمل لك خبرات جديدة…
أحلى ماعندنا ، واصل لعندك! سجل بنشرة أراجيك البريدية
بالنقر على زر “التسجيل”، فإنك توافق شروط الخدمة وسياسية الخصوصية وتلقي رسائل بريدية من أراجيك
عبَّر عن رأيك
إحرص أن يكون تعليقك موضوعيّاً ومفيداً، حافظ على سُمعتكَ الرقميَّةواحترم الكاتب والأعضاء والقُرّاء.
