Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

كيف تسرع من الووردبريس: أستخدام CDNSs , ضغط البيانات و التصغير لتسريع الووردبريس

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Speeding Up WordPress.
Speed Up WordPress: Caching and Database Optimization
Speeding Up WordPress: Image Optimization

Arabic (العربية/عربي) translation by Abu Bakr Soliman (you can also view the original English article)

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

لنبدأ

ضغط Compression و تصغيرMinification  الملفات المساعدة Assets

إنها مسألة رياضية بسيطة: لو أن حجم صفحتك هو 1 ميجابايت, فإن الزائر المستخدم لشبكة اتصال بسرعة 10 ميجابت/الثانية سيستطيع تحميل الصفحة في 800 ميلي ثانية. و لذا, إذا إستطعت تقليل حجم صفحتك إلى 600 كيلوبايت, فإن هذا من شأنه أن يستغرق فقط نصف ثانية ليتمكن الزائر من تحميل الصفحة.

لحسن الحظ, فإنه هنالك العديد من الطرق لضغط و تصغير أكواد الـ HTML , CSS و الجافاسكربت لصفحاتك. دعونا نستعرض كيف ذلك:

الطريقة الأولى: تفعيل نظام ضغط HTTP Compression

صيغ الضغط الخاصة بالـ HTTP Compression مثل الـ gzip و الـ deflate مستخدمة تقريباً في كل منصات السيرفرات (بما فيها الأباتشي و المايكروسوفت IIS) و مقبولة تقريباً من كل المتصفحات, لذا فإن ضغط الـ HTTP Compression متوافر على كل الأجهزة و السيرفرات. و لربما يكون سيرفرك قد فعله تلقائياً لتتأكد من ذلك, ابحث عن "فحص الضغط http compression check", و إضغط على واحدة من النتائج, و أكتب رابط موقعك.

إذن, كيف يمكننا أن نقوم بتفعيل نظام HTTP compression ؟ هنالك العديد من الطرق لإنجاز ذلك, و لكنني أظن أن هاتين الطريقتين كافيتين لأي شخص.

1. تفعيل الضغط عبر ملف .htaccess إن لم يكن سيرفرك قد فعل نظام الضغط تلقائياً, يمكنك فعل ذلك عبر لصق الكود التالي في ملف الـ .htaccess (الكود مقتبس من مشروع HTML5 Boilerplate)

2. تفعيل نظام الضغط عبر الإضافات Plugins: إن لم تكن تعلم طريقة تعديل ملف الـ .htaccess (أو ببساطة لا تريد فعل ذلك), يمكنك تفعيل الـ HTTP compression بإستخدام الإضافتين المشهورتين في التخزين المؤقت: WP Super Cache و W3 Total Cache. كلا من هاتين الإضافتين, يمكنها تقديم خدمة الـ HTTP compression من خلال صفحة الإعدادت الخاصة بهن.

الطريقة الثانية: تصغير و تجميع ملفات الـ CSS  و الجافاسكربت

تصغير الملفات المساعدة (أو ملفات الأصول Assets) أمر لا يقل أهمية عن الضغط. في ملفات الـ PHP, المسافات الزائدة whitespaces أمر ليس بالأهمية حيث أن الأكواد يتم تحليلها و تجميعها في النهاية; و لكنها في الـ HTML و الـ CSS  و الجافاسكربت, تزيد من حجم الملف. مما يعني أن الزائر يضطر لتحميل ملفات أكبر. لتجنب ذلك, يمكنك حذف كل المسافات و الحروف الزائدة غير الضرورية في ملفات الـ HTML و الـ CSS و الجافاسكربت.

و بالإضافة لذلك, يمكنك تجميع الملفات العديدة للـ CSS أو الجافاسكربت في ملف واحد للـ CSS و آخر للجافاسكربت. بفعل ذلك, فإنك تقلل من طلبات الفحص المطلوبة الخاصة بالـ DNS. و المتصفح لن يضطر لتحميل كل ملف على حدة.

و لكن تصغير و تجميع ملفات الأصول يدوياً, أمر مرهق و يستحيل إنجازة في بعض الأحيان. و لحسن الحظ, فإنك يمكنك أن تنجز ذلك تلقائياً بإستخدام الإضافات. لو كنت من مستخدمي الإضافة W3 Total Cache, يمكنك ان تفعل خيار تصغير ملفات الـ CSS و الجافاسكريت minifying and combining your CSS and JavaScript files من صفحة الإعدادات. و لو كنت لا تستخدم الإضافة, يمكنك ان تنصب إضافة أخرى, و هي إضافتي المفضلة Autoptimize. Autoptimize يمكنها إنجاز الأمر ببراعة, و تقدم العديد من الخيارات النافعة التي تستطيع إدارتها. أنا شخصياً أستخدمها بجانب الإضافة WP Super Cache, و سعيد بالنتائج.

إستخدام شبكات إيصال المحتوى CDN في الووردبريس

إذا كانت مدونتك يتم زيارتها أكثر من المعتاد, و صفحاتك تمتلئ بالصور, أو حتى لديك مدونة عادية و لكنك تريد أن تظهر الصور بشكل أسرع, ربما تسطيع (أو يتوجب عليك) أن تستخدم "شبكات أيصال محتوى content delivery networks" (و التي يشار إليها بالمصطلح CDNs)

لماذا نستخدم الـ CDN لموقع ؟

المنطق وراء شبكات إيصال المحتوى, هو تقديم المحتويات بشكل أكبر كفاءة بإستخدام "سيرفرات المحتوى edge servers" حول العالم. هذه السيرفرات قد تحتوي على المحتوياتك القابلة للتحميل المباشر (مثل الصور, ملفات الـ CSS و غيرهم), و حين يدخل الى صفحتك زائر, فإن أقرب سيرفر محتوى للزائر, سوف يقدم له الملفات. بأسعار بسيطة على حجم الإستهلاك Bandwidth (و أحيانا بشكل مجاني) و سيرفرات سريعة للغاية, توصيل المحتويات للزوار سيكون أسرع مما كان.

أضافات الـ CDN للووردبريس

هناك العديد من الإضافات و التي توفر لك التزامن لملفات الأصول مع أكثر من CDN مختلف, و لكني هنا سأورد القليل من الإضافات:

  • Jetpack's Photon: يعتبر واحد من أشهر إضافات الووردبريس على المستودع الرسمي, و تقدم لك عدد من الخصائص على هيئة addons. (فكر على أنه إضافة تقدم العديد من الإضافات) و واحدة من تلك الإضافات المساعدة هو "Photon", و هو خدمة CDN بسيطة و مجانية لإستخدامها لموقعك. Photon سيقوم بسحب الصور و الصور المميزة للتدوينات و الصفحات, و يرفعهم على سيرفرات الـ WP.com , و يقوم بتغيير الروابط القديمة بالروابط الجديدة من سيرفر الـ CDN.  هو فقط سيقوم بترشيح filter تدويناتك ليغير راوبط الصور, (أي انه لن يقوم بتعديل للتدوينات بالفعل), و لذا يمكنك في أي وقت أن تقوم بإبطاله لو لم يعجبك الأمر. و لكني متأكد أنه سيعجبك بشدة — حيث أنه واحد من أفضل الخيارات المجانية لأي موقع ووردبريس,
  • CloudFlare: يمكن اعتباره كـسيرفر بروكسي يمتلك CDN و يعمل كجدار ناري لحماية موقعك من الهجمات. و بما أنك تستخدم نظاقات الـ DNS Zones الخاصة بهم, فإن روابط الصور ستظل كما هي, و لكنها سيتم تخزينها مؤقتاً cached على سيرفرات الـ CloudFlare. و لكن إحذر, فتنصيب الـ CloudFlare يحتاج بعض التمرس. إطلع على المقال WPBeginner's article للمزيد من المعلومات حول تنصيب الـ CloudFlare و إستخدام خصائص الـ CDN الخاص بهم.
  • W3 Total Cache: بالتأكيد لم يدعونه "W3 Total Cache" من فراغ. و في الأخير, هذه الإضافة المميزة للتخزين المؤقت, تتضمن خاصية التكامل مع أي CDN من إختيارك. واحد من أشهر مزودي خدمات الـ CDN هو MaxCDN , و يمكنك الإطلاع على درس تعريفي حول كيفية تنصيبه مع إعدادات إضافة W3 Total Cache.

نهاية الجزء الثاني

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

و أنت ماذا تعتقد حول تسريع الووردبريس ؟ شارك أفكارك بالأسفل في قسم التعليقات. و إذا أعجيتك المقالة, لا تنسى مشاركتها.

ألقاك في الدرس القادم !

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.