مصغر CSS

ما هو CSS minifier؟

يهدف CSS minifier إلى تقليص ملفات CSS على مواقع الويب. يتضمن هذا المفهوم ، الذي يستخدم كمكافئ باللغة الإنجليزية (CSS Minifier) ​​، ترتيبًا في ملفات CSS. عندما يتم إعداد CSSs ، فإن الهدف الرئيسي هو أن يقوم مسؤولو مواقع الويب أو المبرمجون بتحليل الخطوط بشكل صحيح. لذلك ، فهو يتكون من العديد من الخطوط. هناك سطور تعليق غير ضرورية ومسافات بين هذه السطور. هذا هو السبب في أن ملفات CSS تصبح طويلة جدًا. يتم التخلص من كل هذه المشاكل باستخدام أداة تصغير CSS.

ماذا يفعل Minifier CSS؟

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

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

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

لماذا يجب تقليص ملفات CSS الخاصة بك؟

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

تذكر أن 40٪ من الأشخاص لا ينتظرون حتى 3 ثوانٍ حتى يتم تحميل صفحتك الرئيسية ، وتوصي Google بتحميل المواقع في غضون 2-3 ثوانٍ على الأكثر.

للضغط باستخدام أداة CSS minifier فوائد عديدة ؛

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

كيف يعمل مصغر CSS؟

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

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

يمكنك تحليل أداء سرعة صفحتك باستخدام GTmetrix و Google PageSpeed ​​Insights و YSlow ، وهي أداة اختبار أداء مفتوحة المصدر.

الآن دعنا نرى كيفية القيام بعملية التخفيض ؛

1. دليل CSS minifier

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

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

JSCompress ، JSCompress هو ضاغط JavaScript عبر الإنترنت يسمح لك بضغط وتقليل ملفات JS الخاصة بك حتى 80٪ من حجمها الأصلي. انسخ الكود الخاص بك والصقه أو حمّله وادمج عدة ملفات لاستخدامها. ثم انقر فوق "ضغط JavaScript - ضغط JavaScript".

2. مصغر CSS مع ملحقات PHP

هناك بعض المكونات الإضافية الرائعة ، المجانية والمتميزة ، والتي يمكنها تقليص ملفاتك دون الحاجة إلى القيام بخطوات يدوية.

• دمج،
• تصغير
• تحديث،
• إضافات ووردبريس.

هذا البرنامج المساعد يفعل أكثر من تصغير الكود الخاص بك. فهو يجمع بين ملفات CSS و JavaScript الخاصة بك ثم يقوم بتصغير الملفات التي تم إنشاؤها باستخدام Minify (لـ CSS) و Google Closure (لجافا سكريبت). يتم إجراء التصغير عبر WP-Cron بحيث لا يؤثر على سرعة موقعك. عندما يتغير محتوى ملفات CSS أو JS الخاصة بك ، يتم إعادة عرضها حتى لا تضطر إلى إفراغ ذاكرة التخزين المؤقت الخاصة بك.

يحتوي JCH Optimize على بعض الميزات الجيدة جدًا لمكوِّن إضافي مجاني: فهو يجمع بين CSS و JavaScript ويصغرهما ، ويصغر HTML ، ويوفر ضغط GZip لدمج الملفات ، وعرض الرموز المتحركة لصور الخلفية.

CSS Minify ، ما عليك سوى التثبيت والتنشيط لتقليل CSS الخاص بك باستخدام CSS Minify. انتقل إلى الإعدادات> CSS تصغير وقم بتمكين خيار واحد فقط: تحسين كود CSS وتصغيره.

Fast Velocity Minify مع أكثر من 20000 عملية تثبيت نشطة وتصنيف خمس نجوم ، يعد Fast Velocity Minify أحد أكثر الخيارات شيوعًا المتاحة لتقليص الملفات. لاستخدامه ، ما عليك سوى التثبيت والتفعيل.

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

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

3. مصغر CSS مع ملحقات WordPress

يعد CSS minifier ميزة قياسية ستجدها عادةً في مكونات التخزين المؤقت.

• صاروخ الفسفور الابيض
• W3 إجمالي ذاكرة التخزين المؤقت ،
• WP SuperCache ،
• WP Fastest Cache.

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