اذهب إلى المحتوى

زيادة سرعة WordPress: طرق زيادة السرعة للمطورين


kinan mawed

سنتحدث في هذا القسم من هذه السلسلة حول زيادة سرعة WordPress عن طرق زيادة سرعة الموقع الخاصّة بالمطورين.

speeding-wordpress-for-developpers.png

زيادة السرعة المرتبطة بالتطوير

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

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

ها هي بعض الأشياء التي يستطيع المطورون فعلها لضمان عمل مواقع ووردبريس بسلاسة وتساعد على الحفاظ على الأداء لأطول فترة ممكنة.

1. معرفة الأدوات التي بين يديك

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

على سبيل المثال هل احتجت يومًا ما إلى استرجاع عدد كبير من الحقول الوصفية meta fields لمنشور؟ ربّما باستخدام ()get_post_meta تقريبًا 20 مرة؟ قد تعتقد أنّ هذا مضيعة للوقت، حيث يبدو أنّنا نقوم بـ 20 طلب قاعدة بيانات.

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

ففي أول مرّة نستخدم فيها ()get_post_meta تقوم هذه الدالة بسحب كافّة البيانات الوصفية للمنشور بنفسها وتخزين النتيجة بشكل مؤقّت، وبالتالي تستخدم أي استدعاءات لاحقة لنفس المنشور البيانات المخزنة مؤقتًا بدلًا من قاعدة البيانات بشكل مباشر.

تأكد قبل اتخاذ أي قرارات مثل القرار السابق أن تُلقي نظرة على توثيق WordPress Codex.

2. تقليل الطلبات

نعود لموضوع تقليل الطلبات، فهذا هو واجبك كمطوّر، إن كان قالبك أو إضافتك تستخدم الكثير من ملفّات Javascript وCSS فمن فضلك قم بتجميعها. تقسيم التنسيقات والـسكربات إلى الكثير من الملفّات مُفيد أثناء التطوير، لكن غير مفيد بعد الفراغ منه.

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

stitches.png

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

وعندما نحتاج sprites نستخدم معها الأداة الرائعة Stitches الموجودة على الإنترنت، حيث تسمح هذه الأداة لنا بتحميل الصور وترتيبها على النحو الأمثل لنا، وتوليد التنسيقات التي نحتاجها تلقائيًّا.

3. تصغير حجم الملفات

يعمل التجميع Concatenation وتصغير الحجم minification جنبًا إلى جنب، فبعد أن نقوم بعمل ملفاتنا النهائية يجب علينا تصغير حجمها قدر الإمكان، ففي النهاية لن يحتاج المتصفح إلى التعليقات الجميلة، المسافات، الفراغات بين الأسطر، والمسافات البادئة، فهو سعيد جدًّا مع كتلة الشيفرة غير المقروءة.

نستخدم أيضًا Gulp  من أجل هذا ولكن هناك أدوات أخرى مثل Grunt وأدوات معتمدة على الويب من أجل مهام محدّدة مثل تحسين الصور، التصغير، إلخ.

احرص على تحميل الـ scripts في التذييل footer ما لم يتوجب عليك استخدامها في الترويسة header، وعند استخدام الدالة ()wp_enqueue_script قم بتعيين المُعامِل الخامس إلى true ليتم تحميل السكربت في التذييل.

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

5. أعط الأولية للمحتوى الأساسي

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

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

6. استخدام أحجام الصور المناسبة

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

بإمكاننا باستخدام الدالّة ()add_image_size تحديد أحجام هذه الصور، يعني هذا أنّه عندما يتم تحميل صورة سيقوم WordPress بإنشاء نسخة من الصورة المحملة بذلك الحجم.

الفكرة هنا هي أنّه إذا كنّا نحتاج صورة بقياس 600×320 يجب علينا الحصول على صورة بذلك الحجم تحديدًا وذلك لسببين:

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

7. تقليل وتحسين الاستعلامات

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

يمكن أن نستخدم استراتيجيتين هنا، تقليل وتحسين الاستعلامات، قد يعني تحسين الاستعلامات زيادة عددها لاستبدال تلك التي تستهلك الموارد خاصّة.

يجب علينا في البداية تجنب استخدام استعلامات قاعدة البيانات الخام raw في WordPress، توجد الكثير من الدالات تحت تصرفنا للحصول على كل شيء من المنشورات إلى التعليقات، أنواع التصنيفات المخصّصة custom taxonomies، والبيانات الوصفية metadata.

codex.png

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

توجد الكثير من الأدوات لمعرفة إذا ما كانت استعلاماتنا مكتوبة بشكل جيّد، ولمشاهدة كافّة الاستعلامات التي تعمل خلال طلب ما.

نستطيع استخدام الإضافة Query Monitor أو استخدام:

define('SAVEQUERIES', true) 

في ملف الإعدادات لطباعة كل الاستعلامات عبر:

 $wpdb->queries

نمتلك أيضًا الخيار لتسجيل استعلامات MySQL البطيئة، تعمل هذه الميزة تلقائيًّا للعديد من الاستضافات أو بإمكاننا تشغيلها بأنفسنا أو نطلب من الاستضافة تشغيلها.

8. استخدام تفعيل، تعطيل، وإزالة الخطافات Hooks

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

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

من ناحية أخرى يجب أن نتأكد من إزالتها عند تعطيل الإضافة وإزالتها بشكل تام باستخدام خُطافات hooks التعطيل والإزالة.

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

9. تثقيف العملاء

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

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

الخاتمة: السرعة هي ليست كل شيء

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

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

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

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

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

نأمل أن يساعد هذا الدرس على جعل موقعك أسرع وأفضل.

ترجمة -وبتصرّف- لـ The Ultimate Mega Guide To Speeding Up Wordpress لصاحبه Daniel Pataki.


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...