كيفية تصغير ملفات WordPress (CSS و HTML و JavaScript)

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

لكن قبل ذلك ، دعونا نناقش ما هو التصغير وما هي مزايا التصغير. هيا بنا نبدأ.

ما هو التصغير؟

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

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

على سبيل المثال ، سيبدو كود CSS العادي كما يلي:

 هيئة {
 الهامش: 25 ​​بكسل ؛
 الحشو: 25 بكسل ؛
 اللون: # 000000 ؛
 الخلفية: # f5f5f5 ؛
 }
 h1 {
 حجم الخط: 32 بكسل ؛
 اللون # ff6200 ؛
 الهامش السفلي: 15 بكسل ؛
 }

لكن بعد التصغير ، يمكننا أن نجعله على هذا النحو:

 الجسم {margin: 25px؛ padding: 25px؛ color: # 000000؛ background: # f5f5f5؛} h1 {font-size: 32px؛ color # ff6200؛ margin-bottom: 15px؛}

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

على غرار CSS ، يمكن لتقنية التحسين أيضًا ضغط HTML و JavaScript.

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

لماذا يجب علينا تصغير HTML و CSS و Javascript في WordPress

إلى جانب تقنيات التحسين الأخرى مثل التخزين المؤقت والتحميل البطيء وما إلى ذلك ، يجب عليك تصغير HTML و CSS وجافا سكريبت في WordPress لجعل موقع الويب الخاص بك أسرع.

وفقًا للإحصاءات ، يستخدم WordPress أكثر من 64٪ من مواقع الويب في جميع أنحاء العالم. لذلك ، من الآمن القول أنك تنافس مدونات WordPress أخرى في نفس المجال.

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

لذلك ، من خلال تنفيذ التصغير وتقنيات التحسين الأخرى ، فإنك تجعل موقع الويب / المدونة الخاصة بك أسرع. سيؤدي ذلك إلى مزيد من التحويل والمبيعات (إذا كنت تستخدم متجر WooCommerce) والإيرادات. ومع ذلك ، لن يمنحك التصغير دفعة كبيرة في الأداء إذا كان لديك عدد محدود فقط من الملفات الثابتة على الموقع.

من ناحية أخرى ، إذا كان موقع الويب الخاص بك يتعامل مع الكثير من ملفات CSS و JS و HTML ، فيمكن أن يكون التصغير أحد أفضل الأشياء التي يمكنك القيام بها.

الآن ، أنت تعرف التصغير ولماذا تحتاج إلى تصغير الملفات. بعد ذلك ، دعنا ننتقل إلى الموضوع الرئيسي: كيفية تصغير HTML و CSS و JS في WordPress.

كيفية تصغير HTML و CSS وجافا سكريبت في WordPress

يمكنك تصغير HTML و CSS وجافا سكريبت في WordPress بطريقتين.

• يدويا
• باستخدام مكون إضافي مخصص

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

تصغير ملفات WordPress يدويًا

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

إذا قمت بفحص موقع الويب ، فسترى مربع إرسال.

هناك ، تحتاج إلى لصق الرمز الذي تريد تصغيره.

يمكنك تصغير كود CSS أو JS أو HTML. بمجرد لصق الرمز ، انقر فوق Minify .

في الصفحة التالية ، ستحصل على النسخة المصغرة من CSS.

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

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

الأداة سهلة الاستخدام. لكن العيب الرئيسي هو أنه يجب عليك تصغير كل ملف WordPress يدويًا. يمكن أن تستغرق هذه العملية وقتًا طويلاً ومملة. ماذا لو كان بإمكانك أتمتة العملية برمتها لجميع الملفات على الخادم الخاص بك؟

هذا هو المكان الذي تدخل فيه إضافات WordPress minification. دعنا نرى كيف يمكننا تصغير CSS و HTML و JavaScript في WordPress.

تصغير CSS و HTML و JavaScript باستخدام إضافات WordPress

اثنان من أفضل ملحقات WordPress التي يمكنك استخدامها لتقليل الملفات الثابتة هما:

• صاروخ الفسفور الابيض
• التحسين التلقائي

قبل الانتقال إلى البرنامج التعليمي ، دعنا نرى ما يقدمه كل مكون إضافي.

1) صاروخ الفسفور الابيض

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

الميزة الرئيسية لـ WP Rocket هي واجهة سهلة الاستخدام. يحتوي المكون الإضافي على لوحة تحكم سهلة الاستخدام تساعد الجميع على فهم أفضل الميزات ومتى يتم تشغيلها. باستخدام هذا المكون الإضافي ، يمكنك فعل الكثير إلى جانب تصغير ملفات CSS و HTML و JavaScript في WordPress.

الميزات الشائعة التي أحببناها في المكون الإضافي WP Rocket هي تكامل CDN وتكامل WooCommerce وتكامل قاعدة البيانات.

نظرًا لأنها توفر تكاملًا مع CDN ، يمكنك دمج المكون الإضافي مع أي خدمة CDN تريدها. يتم إنشاء خدمات CDN (شبكة توصيل المحتوى) لجعل الملف يخدم بشكل أسرع. يمكنك استخدام BunnyCDN أو Cloudflare أو Stackpath أو أي شيء تريده.

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

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

سمات

• وزن خفيف
• سهل الاستخدام
• تكامل CDN
• تكامل WooCommerce
• تحسين قواعد البيانات
• تحسين الملف

التسعير

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

2) التحسين التلقائي

إذا كنت تفضل استخدام مكون WordPress خفيف الوزن لإدارة تصغير ملف WordPress ، فيجب أن تجرب Autoptimize .

يعد Autoptimize مكونًا إضافيًا شائعًا يعمل على تسريع أي موقع ويب WordPress أو WooCommerce. يستخدم البرنامج المساعد أكثر من مليون موقع WordPress حول العالم. علاوة على ذلك ، تأتي مع ميزات فريدة أيضًا.

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

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

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

سمات

• تحميل كسول
• تصغير
• تحسين خطوط جوجل
• وزن خفيف

التسعير

Autoptimize هو مكون إضافي مجاني لبرنامج WordPress متاح للتنزيل عبر مستودع ملحقات WordPress.

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

بعد ذلك ، سنوضح لك كيفية استخدام هذه المكونات الإضافية لتقليل الملفات.

كيفية تصغير ملفات WordPress باستخدام WP Rocket

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

نظرًا لأنه مكون إضافي مميز ، فلن تتمكن من تثبيته مباشرة من مستودع WordPress. بدلاً من ذلك ، يجب عليك شرائه من الموقع الرسمي وتنزيله من هناك.

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

بعد التثبيت ، قم بتنشيط المكون الإضافي.

داخل إعدادات WordPress ، سترى تكوين WP Rocket.

سترى جميع خيارات التكوين التي يمكنك استخدامها على الجانب الأيسر.

الخيارات الرئيسية هي:

• لوحة القيادة
• مخبأ
• تحسين الملف
• وسائل الإعلام
• التحميل المسبق
• قواعد متقدمة
• قاعدة البيانات
• CDN

إلخ.

كل ما عليك فعله هو الانتقال إلى علامة التبويب "تحسين الملفات" . سترى إعدادات لتصغير ملفات JS و CSS هناك.

من هناك ، قم بتصغير الملفات التي تريدها.

تصغير CSS

قم بتمكين الخيار داخل قسم تصغير CSS ، وستكون جاهزًا.

يمكنك أيضًا استبعاد ملفات CSS المخصصة من التصغير.

تصغير جافا سكريبت

قم بالتمرير لأسفل إلى علامة تبويب تصغير JavaScript وقم بتمكين التصغير من هناك.

بعد إجراء هذه التغييرات ، تحتاج إلى حفظ الإعدادات. اعتبارًا من الآن ، لا يدعم WP Rocket تصغير ملف HTML.

بهذه الطريقة ، يمكنك استخدام WP Rocket لتصغير WordPress. بعد ذلك ، سنرى كيف يمكننا استخدام المكون الإضافي Autoptimize للتقليل.

كيفية تصغير ملفات WordPress بالتحسين التلقائي

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

بمجرد تثبيت المكون الإضافي ، يمكنك رؤيته ضمن إعدادات WordPress.

أضاف فريق التطوير أربعة خيارات تخصيص إلى المكون الإضافي.

• JS و CSS و HTML
• الصور
• CSS الحرجة
• إضافي

يجب اتباع هذه الخطوات لتقليل ملفات CSS و HTML و JavaScript.

تحسين جافا سكريبت

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

تحسين CSS

أسفل خيارات JavaScript مباشرة ، يمكنك رؤية تحسين CSS. قم بتمكين ملفات CSS المجمعة وقم أيضًا بتجميع خيارات CSS المضمنة لتقليل جميع ملفات CSS على الخادم الخاص بك.

تحسين HTML

لتحسين ملفات HTML ، انتقل إلى خيارات HTML.

هناك ، قم بتمكين خيار تحسين كود HTML .

بمجرد إجراء جميع التغييرات المطلوبة ، يجب عليك حفظ إعدادات المكون الإضافي.

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

هذا هو.

هذه هي الطريقة التي يمكنك بها تصغير ملفات WordPress باستخدام Autoptimize.

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

اختبار / مقارنة نتائج التصغير

لقد نجحت الآن في تصغير ملفات WordPress أو WooCommerce الثابتة (CSS و HTML و JavaScript). بعد ذلك ، دعونا نرى ما قبل وبعد النتائج. هناك العديد من الأدوات المتاحة لاختبار سرعة الموقع ، مثل:

• بينغدوم
• GTmetrix
• PageSpeed ​​Insights

في هذا الاختبار ، سنستخدم GTmetrix . إنها أداة شائعة متاحة لاختبار سرعة موقع الويب. حتى هنا هي النتائج.

ملاحظة: لقد أنشأنا موقع WordPress جديدًا واستوردنا بعض المحتوى الوهمي للاختبار. لا ينصح باختبار سرعة موقع ويب جديد بدون محتوى.

قبل

• الأداء - 88٪
• الهيكل - 97٪
• وقت التحميل الكامل - 3.3 ثانية

بعد، بعدما

• الأداء - 98٪
• الهيكل - 98٪
• وقت التحميل الكامل - 1.4 ثانية

كما ترى ، قمنا بتقليل وقت تحميل الموقع إلى 1.4 ثانية من 3.3 ثانية. إنه تحسن كبير.

استنتاج

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

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

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

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

ما الطريقة التي ستستخدمها؟ اسمحوا لنا أن نعرف في التعليقات!

مقالات مماثلة قد ترغب في قراءتها:

• الإضافات لتحسين سرعة WordPress: أفضل 5 ملحقات لزيادة سرعة موقع الويب!
• أفضل ملحقات ووردبريس للتخزين المؤقت لتسريع موقع WordPress الخاص بك
• كيفية إصلاح متجر WooCommerce بطيء وتسريع ذلك؟