تجنب CSS "المهدر" في مشاريعك

يبدو أن مصممي الويب يسعون باستمرار لتحسين إبداعاتهم. على المدى القصير ، هذا يفيد الأداء. على المدى الطويل يمكن أن تبسط الصيانة أيضًا.

في كثير من الأحيان ، يعني هذا تحسين الصور وتنفيذ التخزين المؤقت للصفحة وخدمة الملفات عبر شبكة توصيل المحتوى (CDN). هذه كلها تدابير فعالة. لكن العنصر الوحيد الذي لا يحظى باهتمام كافٍ هو النفاخ المحتمل في CSS لموقع الويب.

بينما يمكنك تصغير أوراق الأنماط الخاصة بك أو تقديمها عبر شبكة توصيل المحتوى ، يمكن عمل المزيد. على وجه التحديد ، التخلص من العلامات المهدرة التي لا يتم استخدامها وتشديد الأنماط التي لا تزال ذات صلة.

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

التعامل مع Bloat المدمج في المظاهر والأطر

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

بالطبع ، هناك عدد من الأسباب التي أدت إلى تخلي الكثير منا عن هذه الممارسة. إنه ببساطة غير فعال من حيث الوقت وقيود الميزانية.

غالبًا ما يتم إنشاء مواقع الويب الحديثة فوق منتج تم إنشاؤه مسبقًا. يمكن أن يكون هذا إطار عمل CSS مثل Bootstrap أو سمة WordPress معقدة. في بعض الحالات ، قد تتضمن سمة CMS إطار عمل.

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

إذن ، ما الذي يمكن عمله لتحسين الوضع؟

استخدم أطر عمل تعتمد على المكونات أو خفيفة الوزن ، حيثما أمكن ذلك

من الناحية النظرية ، من الممكن الحصول على مزايا إطار العمل مع تجنب الانتفاخ. يمكن تحقيق ذلك باستخدام الحزم المستندة إلى المكونات التي تمكنك من تحميل ميزات معينة مع ترك الآخرين خارجًا. يسمح Bootstrap المذكور أعلاه بهذا النوع من التخصيص - إلى حد ما.

بديل آخر هو Tailwind CSS ، والذي يوفر أنماطًا أساسية ويفترض أنك ستبني عليها. إذا كنت تبحث عن نقطة بداية رائعة ، على عكس المنتج النهائي ، فقد يكون هذا مناسبًا.

لا حرج في استخدام إطار العمل. لكن ابحث عن واحد إما: أ) يتيح لك انتقاء واختيار المكونات المراد تحميلها ، أو ؛ ب) يقدم ورقة أنماط مجردة يمكن تخصيصها بسهولة. في كلتا الحالتين ، سيستفيد مشروعك من الحمل المنخفض.

ماذا تفعل مع ثيمات CMS؟

يمكن أن تكون المنتجات مثل قوالب WordPress التجارية صعبة ، لأنها غالبًا ما تتضمن الكثير من الأنماط - سواء كنت في حاجة إليها أم لا.

من الممكن أن يكون موضوعًا معينًا منظمًا جيدًا لدرجة أنه من السهل بما يكفي لإلغاء ترتيب أوراق الأنماط التي لا تريدها. قد تكون هناك أيضًا لوحة خيارات سمة تتيح لك القيام بذلك ببضع نقرات. ومع ذلك ، فمن المرجح أن هذا هو الاستثناء من القاعدة.

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

Declutter الأنماط الموجودة

تغيير تركيزنا إلى موقع ويب موجود ، يمكن إجراء إعادة هيكلة وإعادة بناء CSS بإحدى طريقتين:

مراجعة الأنماط يدويًا

يعد تشغيل محرر الكود المفضل لديك وفتح أوراق أنماط موقعك دائمًا مكانًا جيدًا للبدء. نعم ، يمكن أن تكون تجربة مملة. لكنها أيضًا طريقة فعالة للعناية بالفاكهة المتدلية.

ليس من الضروري فحص كل سطر من CSS. بدلاً من ذلك ، تكمن الفكرة في العثور على أي عناصر تعرف أنها لا يتم استخدامها أو أنها ليست فعالة كما ينبغي.

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

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

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

إذا كان عمر تصميم موقعك أكثر من عامين ، فقد تندهش من مقدار التصميم الزائد الذي يمكنك العثور عليه.

استخدم أداة آلية

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

مثل الكثير من أدوات الوصول الآلية ، يمكن أن تمنحك ماسحات CSS غير المستخدمة الكثير من المعلومات فقط. لذلك ، من الأفضل أن تأخذ النتائج بحذر وتستخدمها كدليل - وليست إجابة نهائية لسؤالك.

كتب Chris Coyier من CSS-Tricks مقالة رائعة حول هذه المشكلة بالذات تستحق المراجعة. إنه لا يختبر بعض هذه الأدوات فحسب ، بل يبحث أيضًا في القضايا الأكبر المطروحة ، مثل استفسارات وسائل الإعلام.

ومع ذلك ، إذا كنت مهتمًا بتجربة واحدة أو أكثر من هذه الأدوات ، فإن بعض الخيارات الأكثر شيوعًا هي:

• جيتبيت
• تطهير CSS
• PurifyCSS
• CSS غير مستخدمة

من المحتمل أن يكون الجمع بين الأداة الآلية والمراجعة اليدوية هو أفضل مسار للعمل. يمنحك القيام بالأمرين صورة أكثر اكتمالاً لتحسينات الأداء المحتملة. قد لا تتمكن من التقاط كل عنصر ، ولكن لا تزال هناك فرصة لإحداث تأثير ملموس. يمكنك القيام ببعض قبل الاختبار وبعده باستخدام أداة مثل GTmetrix لمشاهدة النتائج.

عندما يتعلق الأمر بـ CSS: لا تضيع ، لا تريد

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

هذا شيء يستحق الاهتمام به منذ بداية المشروع. من خلال النظر إلى تقليل وزن ورقة الأنماط ، فأنت تساعد في انتزاع كل قطرة من التحسين من موقعك.

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

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