منذ أن أصبح WPML منتجاً تجارياً، يتعامل موقع wpml.org مع زيارات أكثر بكثير. قبل أسبوعين، كان خادمنا يعمل بحمل يبلغ 95% وكان وقت الاستجابة يتجاوز 10 ثوانٍ. باستخدام W3TC، عاد الحمل إلى 5% وأصبح وقت الاستجابة حوالي 300 ms.
إذا لم تكن على دراية بها، فإن W3TC هي إضافة لتحسين أداء الموقع. تتضمن الإضافة التخزين المؤقت للصفحات ولكن هذه مجرد البداية. فبالإضافة إلى التخزين المؤقت الأساسي للصفحات، تقوم أيضاً بتصغير ملفات JS و CSS، وضغط كل شيء، وتشغيل شبكة توصيل المحتوى (CDN). مجتمعة، يمكن لهذه الوظائف تسريع الموقع بشكل كبير، مما يتيح لمواقع WordPress المعقدة التعامل مع حجم الزيارات الكبير.
لماذا تعتبر مهمة جداً لمواقع WordPress؟
صورة تغني عن ألف كلمة. هكذا يتم تحميل موقعنا دون أي تخزين مؤقت (تم إنشاؤه بواسطة Pingdom Tools):
إذا كنت تعتقد أن هذا مخيف، فتذكر أن الواقع كان أسوأ. تم أخذ مخطط وقت التحميل هذا عندما كان خادمنا يعمل فعلياً بحمل يبلغ 5%. عندما كان يعمل حقاً دون تخزين مؤقت، كان الخادم يعاني من حمل يبلغ 95% وكان وقت المعالجة أطول بكثير. استغرق خروج البايت الأول 5 ثوانٍ وليس 1/2 ثانية كما ترى في هذا المخطط.
لعرض صفحتنا الرئيسية بالكامل، كان على خادمنا إرسال 77 ملفاً. حتى هذا المخطط، الذي يعمل بحمل خادم يبلغ 5%، ينتهي بمهلة عند 30 ثانية (انظر الخطوط الحمراء).
هل يعود ذلك إلى برمجة غير متقنة وممارسات تصميم سيئة؟ لا.
تأتي قوة WordPress من النمطية. يمكنك اختيار أي قالب يعجبك، مع أي مجموعة من الإضافات. هذا يعني أن كل منها يتم تطويره بشكل مستقل ويعمل بموارده الخاصة. تتضمن معظم الإضافات التي تقوم بتمكينها عدة ملفات CSS و Javascript وتساهم في جهود معالجة PHP و MySQL. يمكنك تحسين ذلك يدوياً، ولكنك ستفقد حينها كل هذه النمطية الرائعة ونعود إلى نقطة الصفر.
اختبر موقعك باستخدام أدوات Pingdom، أو أي أداة أخرى لقياس وقت تحميل الصفحة (هناك ملحق لـ Firefox لهذا الغرض). انظر إلى الملفات التي يتم تحميلها وترتيبها. ستلاحظ أن ملفات CSS تقوم بتحميل صور وملفات CSS أخرى، وأن هناك أكواماً من ملفات Javascript يتم تحميلها لكل صفحة.
لإثارة حماسك، إليك ما حققناه باستخدام جميع الميزات والإضافات من W3TC:
الأرقام التي تراها هنا صحيحة. يتم جلب إجمالي 28 ملفاً لعرض الصفحة. تأتي 5 ملفات من wpml.org (خادمنا الخاص) وتأتي البقية من شبكة توصيل المحتوى (CDN). بالكاد تحتاج PHP إلى القيام بأي شيء لتقديم هذه الصفحة، باستثناء التحقق من وجودها في ذاكرة التخزين المؤقت وبعض الفحوصات الصغيرة الأخرى.
يتم تحميل الصفحة بالكامل في أقل من 2 ثانية وتسبب حملاً بالكاد يمكننا قياسه على الخادم. نحن سعداء، والزوار سعداء، وحتى Google سعيد.
الخطوة 1) التخزين المؤقت للصفحة
أول وأهم شيء ترغب في القيام به هو تمكين التخزين المؤقت للصفحة. اذهب إلى Performance، ومكّن W3TC واضبط إعدادات قسم Page Caching.
بالنسبة للتخزين المؤقت للصفحة، بقينا على الإعدادات الأساسية. الشيء الوحيد الذي أضفناه كان استبعاد قسمي حساب العميل والتنزيل من التخزين المؤقت للصفحة، حتى لا يتداخل W3TC مع حسابات عملاء WPML وتنزيلات WPML.
إذا كنت تستخدم ذاكرة تخزين مؤقت لرمز التشغيل (opcode cache)، فسيستفيد W3TC من ذلك لزيادة سرعة موقعك. نحن لا نستخدمها، لكنها مفيدة إذا كنت تقوم بتشغيل معالجة PHP معقدة غير مخزنة مؤقتاً.
الخطوة 2) التصغير – حزم وضغط CSS و JavaScript
هل تتذكر كل ملفات CSS و JS التي يضيفها القالب والإضافات؟ حان الوقت الآن لإصلاح الحمل الذي تسببه.
تقوم ميزة التصغير (Minify) بجمع ملفات موارد متعددة، وحزمها في ملف واحد وضغطها. النتيجة هي ملف واحد أكبر بدلاً من عشرات الملفات الصغيرة.
على الرغم من أن الحجم الإجمالي قد يتقلص بنسبة 50% فقط، إلا أن الحمل الذي يوفره هذا الإجراء هائل. فبدلاً من أن يضطر المتصفح إلى إصدار طلبات HTTP متعددة والحصول على العديد من الملفات الصغيرة، فإنه يصدر طلباً واحداً ويحصل عليها جميعاً معاً. ربما يكون هذا التغيير هو المساهم الأكبر في تحسين استجابة موقعك – خاصة للزوار الجدد (الذين ليس لديهم ملفات CSS و JS مخزنة مؤقتاً بالفعل).
انقر على زر Help في أعلى الصفحة. سيقوم W3TC بالمرور عبر موقعك بالكامل والبحث عن ملفات الموارد. بعد ذلك، سيتيح لك اختيار الملفات التي تريد دمجها. عادةً، يمكنك تحديد الكل، ولكنك تحتاج إلى الانتباه لما تفعله، حيث يمكن أن يغير ذلك ترتيب التحميل.
بمجرد تحديدك لملفات CSS و JS المراد تصغيرها، تحتاج إلى التأكد من أن ترتيبها صحيح.
بالنسبة لملفات CSS، اسحب الملفات لأعلى ولأسفل في القائمة.
يجب أن يتطابق الترتيب الذي تراه في هذه القائمة مع الترتيب الذي يتم به تحميل ملفات CSS بدون تصغير. يمكنك رؤية ذلك في مصدر صفحة HTML الخاصة بك.
تعتبر ملفات Javascript أكثر تعقيداً بعض الشيء. هنا، يكون ترتيب التحميل أكثر أهمية لأن الترتيب الخاطئ سيؤدي إلى أخطاء في JS وتعطل الوظائف.
يتيح لك W3TC اختيار ملفات JS التي تذهب إلى قسم الترويسة (header) والتي تذهب إلى نص الصفحة (body). على سبيل المثال، ستذهب نصوص Google Analytics البرمجية قبل النهاية، بينما يذهب jQuery إلى الترويسة، لأنه يحتاج إلى التشغيل أولاً (وخارج قائمة التصغير).
الخطوة 3) شبكة توصيل المحتوى (CDN)
بالنسبة لنا، مسك الختام يأتي في شكل شبكة توصيل محتوى (CDN) تعمل بشكل رائع.
يقع تكوين وتشغيل شبكة CDN خارج نطاق هذه المقالة، حيث يتطلب إعداد حساب في خدمة تابعة لجهة خارجية.
بالنسبة لمواقعنا الخاصة، نستخدم Amazon S3 للتخزين و CloudFront للتوصيل. هناك خيارات ممتازة أخرى متاحة يمكنك استكشافها ومقارنتها.
بمجرد إعداد حساب CDN الخاص بك، يرسل W3TC ملفاتك المحلية إلى CDN ويستبدل الروابط من خادمك إلى الملفات الموجودة في CDN. بعد ذلك، يرسل خادمك ملفات HTML فقط وتتولى CDN الباقي.
بينما يكون خادمك عبارة عن جهاز واحد، فإن CDN هي في الواقع شبكة من الخوادم. ستقوم بإرسال الملفات من أقرب خادم لكل زائر. يمكن لشبكات CDN تقديم الملفات الثابتة بشكل أسرع بكثير من أي خادم فردي. باستخدام شبكة CDN، يمكنك تحسين تجربة زوارك وتقليل استهلاك النطاق الترددي والشبكة لخادمك بشكل كبير.
يجب عليك اتباع معالج إعداد CDN في W3TC. سيساعدك على نقل مكتبة الوسائط وموارد القالب والإضافات إلى CDN.
هل تستمتع بتحسين أداء الموقع؟ أخبرنا بذلك من خلال ترك تعليق هنا!
