اكتشفنا منذ فترة أن تصغير ملفات CSS وJavaScript يقلل بشكل كبير من أوقات التحميل. بعد اختباره على بعض مواقع ووردبريس، أذهلتنا النتائج. الصفحات التي كانت تستغرق 5-6 ثوانٍ للتحميل انخفضت فجأةً إلى 2-3 ثوانٍ.

في الحقيقة، كل ثانية إضافية من وقت التحميل تكلفك زوار وعملاء محتملين. عندما تكون ملفات CSS وJavaScript مكتظة بالمسافات والتعليقات والتنسيقات غير الضرورية، فإنها تبطئ عملك فعليًا.

تؤدي عملية التصغير إلى إزالة كل هذا الكود الإضافي دون تغيير طريقة عمل موقعك.

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

ما هو التصغير ومتى تحتاجه؟

يستخدم مصطلح ‘التصغير’ لوصف طريقة تقلل حجم ملفات موقع ووردبريس الخاص بك. يتم ذلك عن طريق إزالة المسافات البيضاء والأسطر والأحرف غير الضرورية من الكود المصدر.

فيما يلي مثال على كود CSS عادي:

body {
margin:25px;
padding:25px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

بعد تصغير الكود سوف يبدو مثل هذا:

body{margin:25px;padding:25px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

عادة، ينصح بتصغير الملفات المرسلة إلى متصفحات المستخدم فقط. يشمل ذلك ملفات HTML وCSS وJavaScript.

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

تكمن ميزة تصغير الملفات في تحسين سرعة وأداء ووردبريس، حيث أن الملفات المضغوطة أسرع في التحميل.

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

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

إذا كنت تسعى لتحقيق نتيجة 100/100 في Google PageSpeed ​​Insights أو أداة GTMetrix، فإن تصغير حجم CSS وJavaScript سيحسن نتيجتك بشكل ملحوظ.

بعد ذلك، دعونا نلقي نظرة على كيفية تصغير حجم CSS/JavaScript بسهولة على موقع ووردبريس الخاص بك. سنستعرض ثلاثة خيارات مختلفة يمكنك الاختيار من بينها:

• الطريقة 1: تصغير حجم ملفات CSS/JavaScript في ووردبريس باستخدام WP Rocket
• الطريقة 2: تصغير CSS/JavaScript في ووردبريس باستخدام SiteGround
• الطريقة 3. تصغير CSS/JavaScript باستخدام Autoptimize
• الأسئلة الشائعة حول التصغير

هل أنت مستعد؟ لنبدأ بأفضل الطرق الموصى بها.

الطريقة 1: تصغير حجم ملفات CSS/JavaScript في ووردبريس باستخدام WP Rocket

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

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

تعد WP Rocket أفضل إضافة تخزين مؤقت ووردبريس. فهي تمكنك من إضافة التخزين المؤقت بسهولة إلى ووردبريس، مما يحسن سرعة موقعك وأوقات تحميل الصفحات بشكل ملحوظ.

لمزيد من التفاصيل، راجع دليلنا التعليمي حول كيفية تثبيت وإعداد WP Rocket في ووردبريس.

عند التنشيط، تحتاج إلى زيارة صفحة الإعدادات » WP Rocket والتبديل إلى علامة التبويب ‘File Optimization’.

من هنا، تحتاج إلى التحقق من خيار تصغير ملفات CSS.

سيظهر لك WP Rocket تحذير يفيد بأن هذا قد يسبب مشاكل في موقعك. انقر على زر ‘Activate Minify CSS’. يمكنك دائمًا تعطيل هذا الخيار إذا تسبب في أي مشاكل بموقعك.

بعد ذلك، ستحتاج إلى التمرير لأسفل إلى قسم ملفات JavaScript أدناه.

هنا، ما عليك سوى تحديد المربع بجوار خيار ‘Minify JavaScript files’.

مرة أخرى، سوف ترى تحذيرًا يفيد بأن هذا قد يؤدي إلى تعطل بعض الأشياء على موقعك. قم بالمضي قدمًا وانقر على زر ‘Activate Minify JavaScript’.

بعد ذلك، لا تنس النقر على زر ‘حفظ التغييرات’ لحفظ إعداداتك.

سيبدأ WP Rocket الأن بتصغير ملفات CSS وJavaScript. يمكنك مسح ذاكرة التخزين المؤقت في إعدادات الإضافة لضمان بدء استخدام ملفات CSS وJavaScript المصغرة للزائر التالي.

الطريقة 2: تصغير CSS/JavaScript في ووردبريس باستخدام SiteGround

إذا كنت تستخدم SiteGround كمزود استضافة ووردبريس، فيمكنك تصغير ملفات CSS باستخدام Speed Optimizer (SiteGround Optimizer سابقًا).

Speed Optimizer هي إضافة لتحسين الأداء تعمل على منصتها الخاصة. تعمل بكفاءة مع PHP فائق السرعة لتحسين أوقات تحميل موقعك.

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

بعد ذلك، تحتاج إلى النقر فوق قائمة Speed Optimizer في الشريط الجانبي لإدارة ووردبريس الخاص بك.

سيؤدي هذا إلى نقلك إلى إعدادات Speed Optimizer.

من هنا، تحتاج إلى النقر فوق الزر ‘Go To Frontend’ ضمن ‘Other Optimizations’.

في الشاشة التالية، سوف تكون قادرًا على إدارة واجهة CSS الأمامية.

يجب عليك تشغيل التبديل بجوار خيار ‘Minify CSS files’.

بعد ذلك، ستحتاج إلى التبديل إلى علامة التبويب JavaScript وتشغيل التبديل بجوار خيار ‘Minify JavaScript Files’.

هذا كل شيء! يمكنك الأن إفراغ ذاكرة التخزين المؤقت في ووردبريس وزيارة موقعك الكتروني لتحميل نسخ مصغرة من ملفات CSS وJS.

الطريقة 3. تصغير CSS/JavaScript باستخدام Autoptimize

يوصى بهذه الطريقة للمستخدمين الذين ليسوا على SiteGround ولا يستخدمون WP Rocket.

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

بعد التفعيل، انتقل إلى صفحة الإعدادات » Autoptimize لضبط إعدادات الإضافة.

من هنا، عليك أولاً تحديد خيار ‘Optimize JavaScript Code’ ضمن خيارات JavaScript.

بعد ذلك، عليك التمرير للأسفل إلى خيارات CSS.

بمجرد وصولك إلى هناك، يجب عليك تحديد المربع بجوار خيار ‘Optimize CSS code’.

لا تنس النقر على زر ‘حفظ التغييرات’ لحفظ إعداداتك.

ثم يمكنك النقر على زر ‘Empty Cache’ لبدء استخدام ملفاتك المصغرة. يمكن استخدام الإضافة أيضًا لـ إصلاح render-blocking جافا سكريبت وCSS في ووردبريس.

الأسئلة الشائعة حول التصغير

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

1. ما هو التصغير بالضبط؟

التصغير هو عملية تصغر حجم ملفات أكواد موقعك الإلكتروني عن طريق إزالة جميع الأحرف غير الضرورية دون تغيير آلية عمل الكود. يشمل ذلك إزالة المسافات البيضاء والتعليقات وفواصل الأسطر من ملفات HTML وCSS وJavaScript.

بما أن الملفات الناتجة أصغر حجمًا وأكثر إحكامًا، فهي أسرع في التنزيل والمعالجة بالنسبة لمتصفح الزائر، مما يحسن سرعة موقعك الإلكتروني بشكل عام.

2. هل سيؤدي تصغير ملفات CSS وJavaScript إلى إتلاف موقعي الإلكتروني؟

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

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

3. هل التصغير يصنع فرق كبير حقًا؟

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

ومع ذلك، إذا كان هدفك الرئيسي هو تحقيق نتيجة مثالية 100/100 في أدوات اختبار السرعة مثل Google PageSpeed ​​Insights أو GTMetrix، فإن تصغير ملفات CSS وJavaScript يعد خطوة مهمة ستحسن نتيجتك بشكل ملحوظ.

هل أحتاج إلى اضافة لتصغير الملفات في ووردبريس؟

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

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

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

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