عملت منذ فترة على تحسين سرعة موقع ووردبريس لأحد العملاء، حيث كان هناك بطء شديد فيه لدرجة أن بعض الصفحات تستغرق أكثر من 8 ثواني لتحمل، الأمر الذي أثر سلبًا على تجربة الزوار. أخبرني العميل أنه جرب الحلول المعتادة مثل تفعيل التخزين المؤقت وتقليل أحجام الصور، حتى أنه قام بترقية الاستضافة لكن المشكلة ما زالت موجودة.
بعد تفحص الموقع، بدأت أشك بأن إحدى الإضافات هي السبب، إذ كانت قاعدة البيانات نظيفة، واستجابة الخادم على مواقع أخرى على نفس الاستضافة جيدة، ولهذا بدلًا من الطريقة التقليدية المتمثلة بتعطيل الإضافات واحدة تلو الأخرى لمعرفة الإضافة المسببة، استخدمت إضافة Code Profiler، وهنا أشرح لك كيف استخدمتها لمعرفة الإضافة المسببة.
لماذا لم أستخدم أدوات فحص السرعة العادية؟
أدوات قياس السرعة الشهيرة مثل GTmetrix أو Google PageSpeed Insights قوية، لكنها تقيس الأداء والسرعة كمراقب خارجي أي من وجهة نظر المتصفح، فهي توضح حجم الصور وعدد الطلبات والوقت المستغرق لتحميل ملفات CSS و JavaScript.
أي أن هذه الأدوات تخبرنا أن هناك استجابة بطيئة من الخادم، لكنها لا تستطيع أن توضح لنا سبب هذا البطء من الداخل، فهي لا تعرف كم تستهلك كل إضافة من الموارد، أو أي كود برمجي يستغرق وقتًا أطول من اللازم.
وهنا يبرز دور إضافة Code Profiler التي تعمل داخل موقع ووردبريس وتقيس الأداء على مستوى PHP، فبدلًا من أن تعلمنا بوجود مشكلة عامة، توضح بدقة كم استهلكت كل إضافة من موارد الخادم التي لزمت لتوليد الصفحة.
خطوات استخدام إضافة Code Profiler
لاستخدام Code Profiler لتحديد الإضافة أو الإضافات المسؤولة عن البطء، اتبعت الخطوات التالية:
1. تنصيب وتفعيل إضافة Code Profiler
في لوحة تحكم ووردبريس، توجهت إلى إضافات > أضف إضافة جديدة، ثم أدخلت اسم الإضافة في حقل البحث (Code Profiler)، ونقرت على زر التنصيب الخاص بها، ثم فعلتها.
2. تشغيل الفحص
انتقلت إلى تبويب Code Profiler، ثم من خيارات الفحص التي ظهرت، اخترت فحص واجهة الموقع الأمامية (Website Frontend)، وتركت باقي الإعدادات على وضعها الافتراضي، ثم نقرت على زر Start Profiling لبدء الفحص.
فبدأت عملية الفحص، واستغرقت العملية بضع ثوانٍ حيث قامت Code Profiler بمحاكاة تحميل الصفحة وحساب أداء كل مكون يعمل في الخلفية، وأظهرت رسمًا بيانيًا يوضح الوقت المستغرق لتشغيل كود كل إضافة.
3. قراءة التقرير
أظهر الرسم البياني بشكل واضح أن هناك إضافات تستهلك من موارد الخادم لتعمل أكثر من إضافات أخرى بكثير، إذ كان وقت التنفيذ الكلي لكود PHP لجميع الإضافات والقالب هو 5.5 ثانية منها أكثر من 3 ثوانٍ خاصة بإضافة Elementor، إذ استهلكت هذه الإضافة حوالي 55% من وقت المعالجة الكلي، تلتها إضافة Jetpack التي استهلكت تقريبًا 25%.
وهذه الأرقام كلها ليست أوقات تحميل الصفحة، بل هي فقط أوقات معالجة أكواد PHP، أي أن هذا الوقت مستغرق قبل أن يبدأ المتصفح حتى بتحميل الصور والنصوص.
وبناء عليها توضحت المشكلة تمامًا، حيث أن هناك إضافتان تتسببان ببطء الموقع، الأولى هي Elementor، والثانية هي Jetpack، ويجب فحصمهما أو إزالتهما إذا لم تكونا مستخدمتين، أو استبدالهما إذا كان ذلك ممكنًا.
4. حل المشكلة
بعد أن عرفت الإضافات الأكثر استهلاكًا لموارد الخادم، اتبعت التالي لكل إضافة لحل المشكلة:
- في Elementor: قمت بتعطيل كافة الميزات والأدوات التي لا يستخدمها العميل، وفعلت خيارات الأداء المحسنة وقللت عدد الخطوط الخارجية المحملة.
- في Jetpack: أزلت الإضافة بالكامل لأن العميل لم يكن يستخدمها، وكانت موجودة منذ أن أنشأ موقعه.
3. إعادة الفحص للتأكد من حل المشكلة
للتأكد من فعالية الحلول التي طبقتها، قمت بتشغيل الفحص مرة أخرى على نفس الصفحة، فظهر في التقرير الجديد تحسن عالٍ جدًا، حيث انخفض وقت معالجة Elementor إلى 0.2 ثانية، واختفى وقت معالجة إضافة Jetpack لأنها لم تعد موجودة.
ختامًا، باستخدام إضافة Code Profiler، تمكنت من تشخيص مشكلة بطء موقع العميل، الأمر الذي مكنني من حلها بسرعة، فبعد وقت قصير من العمل أصبح وقت تحميل الصفحة الفعلي في الموقع أقل من 4 ثوانٍ، ما وفر الكثير من الوقت والمال الذي كان سينفقه العميل على ترقيات غير ضرورية.
