كيفية تصغير معلومات CSS / JavaScript في WordPress (3 استراتيجيات)
نشرت: 2022-04-26هل تريد تصغير المستندات على صفحة الويب الخاصة بك على WordPress؟
يمكن أن يؤدي تصغير معلومات WordPress CSS و JavaScript إلى جعلها يتم تحميلها بشكل أسرع وتسريع موقع WordPress الخاص بك.
في هذا الدليل ، سنوضح لك كيفية تصغير ملفات CSS / JavaScript في WordPress لإدخال تحسينات على الأداء والسرعة.
ما هو التصغير ومتى تحتاجه؟
يتم استخدام تعبير "تصغير" لوصف نظام يجعل أبعاد ملف موقع الإنترنت الخاص بك أقل. يقوم بذلك عن طريق التخلص من المسافات البيضاء والخطوط والأشخاص غير المرغوب فيهم من كود المورد.
فيما يلي مثال لرمز CSS القياسي:
human body
margin:20px
padding:20px
colour:#333333
history:#f7f7f7
h1
font-dimension:32px
coloration#222222
margin-base:10px
بعد تصغير الكود سيبدو كالتالي:
entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px
بشكل عام ، يُقترح تصغير المستندات التي يتم إرسالها إلى مستعرضات المستخدم فقط. هذا يتميز بملفات HTML و CSS و JavaScript.
يمكنك تصغير طريقة مستندات PHP أيضًا ، لكن تصغيرها لن يعزز سرعة تحميل الصفحة لعملائك. نظرًا لأن PHP هي لغة برمجة من جانب الخادم ، فهذا يعني أنها تعمل على خوادم قبل إرسال شيء ما إلى متصفح الإنترنت الخاص بالزائر.
يتم تحسين مكاسب تصغير ملفات البيانات وتيرة WordPress والأداء العام ، مع الأخذ في الاعتبار أن المعلومات المدمجة يتم تحميلها بشكل أسرع.
ومع ذلك ، يعتقد بعض المعلمين أن تقدم الوظائف قليل جدًا لمعظم مواقع الويب ولا يستحق الصعوبة. يؤدي التقليل إلى التخلص من عدة كيلوبايت من البيانات في معظم مواقع الويب الخاصة بـ WordPress. يمكنك تقليل وقت تحميل الموقع بشكل كبير عن طريق تحسين الصور لشبكة الويب العالمية.
إذا كنت تحاول الحصول على تصنيف 100/100 على Google Pagespeed أو برنامج GTMetrix ، فإن تصغير CSS و JavaScript سيزيد من درجاتك بشكل ملحوظ.
للإشارة إلى ذلك ، دعنا نلقي نظرة على كيفية تصغير CSS / JavaScript بسهولة على صفحة الويب الخاصة بك على WordPress.
سنذهب إلى ما يزيد عن 3 خيارات مميزة يمكنك الاختيار من بينها:
كل مجموعة؟ دعونا نبدأ بأفضل عملية مقترحة.
العملية 1. قلل CSS / JavaScript في WordPress باستخدام WP Rocket
هذه التقنية أسهل وهي مقترحة لجميع المستهلكين. إنه يعمل بغض النظر عن استضافة WordPress التي تستخدمها.
في البداية ، تحتاج إلى تثبيت وتفعيل المكون الإضافي WP Rocket. للحصول على تفاصيل إضافية ، راجع مرحلتنا عن طريق نقل الدليل حول كيفية إعداد مكون WordPress الإضافي.
WP Rocket هو أفضل مكون إضافي للتخزين المؤقت في WordPress في السوق. يسمح لك بإدخال التخزين المؤقت في WordPress بسهولة كبيرة وزيادة سرعة موقع الويب وحظات تحميل موقع الويب بشكل كبير.
لمزيد من المعلومات ، راجع البرنامج التعليمي الخاص بنا حول كيفية تثبيت وإنشاء WP Rocket في WordPress.
عند التنشيط ، تريد التحقق من الإعدادات »صفحة ويب WP Rocket والتبديل إلى علامة التبويب" تحسين الملفات ".
من هنا ، سوف تحتاج إلى إلقاء نظرة على حل مستندات Minify CSS.
سيعرض لك WP Rocket بعد ذلك تحذيرًا من أن هذا قد يؤدي إلى تقسيم النقاط على موقع الويب الخاص بك. انطلق وانقر ببساطة على زر "تنشيط تصغير CSS". يمكنك إلغاء تنشيط هذا التحديد باستمرار إذا تسبب في حدوث أي مشاكل مع موقع الإنترنت الخاص بك.
بعد ذلك ، يجب عليك التمرير لأسفل إلى جزء مستندات JavaScript لأسفل أدناه.
هنا ، ما عليك سوى اختبار المربع المجاور لإمكانية "تصغير ملفات JavaScript".
مرة أخرى ، سترى تحذيرًا من أن هذا قد يؤدي إلى كسر الأشياء على موقع الويب الخاص بك. انطلق وانقر ببساطة على الزر "تنشيط تصغير JavaScript".
بعد ذلك مباشرة ، لا تتجاهل أبدًا النقر فوق الزر الاحتفاظ بالتعديلات للحفاظ على التكوينات الخاصة بك.
سيبدأ WP Rocket الآن في تصغير معلومات CSS و JavaScript الخاصة بك. يمكنك مسح ذاكرة التخزين المؤقت الخاصة بك في إعدادات البرنامج المساعد للتأكد من أنها تبدأ في استخدام CSS المصغر وجافا سكريبت لزائر صفحة الويب في المستقبل.
تقنية 2. تصغير CSS / JavaScript في WordPress توظيف SiteGround
إذا كنت تقوم بتطبيق SiteGround كمزود خدمة استضافة ويب WordPress الخاص بك ، فيمكنك تقليل ملفات CSS التي تعمل مع SiteGround Optimizer.
SiteGround Optimizer هو مكون إضافي لتحسين الأداء يعمل على نظامهم. يعمل بشكل جيد مع Ultrafast PHP لتقوية فترات تحميل موقعك.
ما عليك سوى إعداد وتنشيط المكون الإضافي SiteGround Optimizer على موقع WordPress الخاص بك على الإنترنت. للحصول على تفاصيل إضافية ، راجع إرشاداتنا خطوة بخطوة حول كيفية إضافة مكون WordPress الإضافي.
بعد ذلك ، تحتاج إلى النقر فوق قائمة SG Optimizer في الشريط الجانبي لمسؤول WordPress.
سينقلك هذا فقط إلى إعدادات SG Optimizer.
من هذه المقالة ، تحتاج إلى النقر فوق الزر "الانتقال إلى الواجهة الأمامية" أقل من "التحسينات الأخرى".
في الشاشة التالية ، تحتاج إلى التبديل بين التبديل القادم لحل "Minify CSS files".
في المستقبل ، يجب عليك التبديل إلى علامة تبويب JavaScript والوجه على التبديل القادم لاختيار "Minify JavaScript Files".
هذا كل شيء! يمكنك الآن إفراغ ذاكرة التخزين المؤقت لـ WordPress وإلقاء نظرة على موقعك لتحميل إصدارات مصغرة من مستندات CSS و JS.
الطريقة الثالثة: تصغير CSS / JavaScript باستخدام التحسين التلقائي
هذه الطريقة مقترحة للمستهلكين الذين ليسوا على SiteGround ولا يعملون مع WP Rocket.
في البداية ، تحتاج إلى إعداد وتنشيط المكون الإضافي Autoptimize. للحصول على تفاصيل إضافية ، راجع إرشادات المرحلة تلو العملية الخاصة بنا حول كيفية تثبيت مكون WordPress الإضافي.
عند التنشيط ، يجب عليك إلقاء نظرة على صفحة الخيارات »تحسين تلقائي على الويب لتهيئة خيارات البرنامج المساعد.
من هذه المقالة ، تحتاج في البداية إلى التحقق من الخيار "تحسين كود JavaScript" ضمن خيارات JavaScript.
بعد ذلك ، تحتاج إلى التمرير لأسفل إلى خيارات CSS وفحص المربع الموجود بجوار خيار "تحسين كود CSS".
لا تهمل أبدًا النقر على زر حفظ التعديلات لتخزين تكويناتك.
ثم يمكنك ببساطة النقر فوق الزر Vacant Cache لبدء العمل مع ملفات البيانات المصغرة. يمكن أيضًا استخدام المكون الإضافي للتعامل مع حظر عرض JavaScript و CSS في WordPress.
نأمل أن يكون هذا المنشور قد ساعدك في تصغير CSS و JavaScript على صفحة الويب الخاصة بك على WordPress. قد ترغب أيضًا في مشاهدة برنامجنا التعليمي حول تحسين الأساسيات الأساسية للشبكة في WordPress والامتثال لأعظم برنامج تعليمي للأداء العام في WordPress.
إذا أعجبك هذا المنشور ، فتأكد من الاشتراك في قناتنا على YouTube لدروس أفلام WordPress. يمكنك أيضًا أن تصادفنا على Twitter و Facebook.