من النصائح الاساسية في إدارة مواقع ووردبرس هي التقليل من إستخدام الإضافات قدر الإمكان، فكلما زاد عدد الإضافات، إنعكس ذلك بالسلب على أداء الموقع، إذ أن بعض الإضافات قد لا تضيف أثراً يذكر على أداء الموقع (عادة ما تكون الإضافات المستخدمة في لوحة تحكم ووردبرس Back-End)، بينما البعض الآخر يستدعي ملفات CSS وJavaScript خارجية مما يزيد من استدعاءات الملفات HTTP Requests وبالتالي يقلل من سرعة تحميل الموقع. سنتحدث في هذه المقالة عن طرق التقليل من أثر الإضافات، حتى نستطيع الاستفادة مما تضيفه لنا من سهولة واختصار للوقت في إدارة الموقع، ستحتاج معرفة بسيطة للغة php لتستطيع تنفيذ الطرق القادمة.
1-إزاحة ملفات جافاسكريبت إلى خاتمة الموقع Footer بدلاً من <Head>
إذا وُضعت ملفات الجافا سكريبت قبل بقية المحتويات من نصوص وصور وCSS فإنها تعطل تحميلهم إلى أن يتم تحميلها (إلا إذا تم تحميلها بطريقة غير متزامنة async وهذا ما سيتم تفصيله لاحقاً)، بالتالي يُنصح بنقلها إلى خاتمة الموقع قبل وسم </body> حتى تصبح آخر ما يتم تحميله من صفحة الموقع، في هذه الحالة لن تعمل وظائف الجافاسكريبت قبل انتهاء تحميل الصفحة فإذا كانت هناك عناصر حيوية تستخدم الجافاسكريبت مثل القوائم مثلاً يحبذ ألا تستخدم هذه الطريقة. هذة الطريقة سهله ويمكن تنفيذها يدوياً لتعديل استدعاءات قالب ووردبرس من خلال التعديل في header.php و footer.php عن طريق Themes>Editor، لكن الأمر يختلف في حالة الإضافات التي تضع استدعاءات الملفات تلقائياً في خاصية:
يمكن تعديله عن طريق إضافة ووردبرس، لكننا طبعاً نحاول تجنب استخدام الإضافات في حالة وجود بدائل سهلة، وهو ما يتوفر هنا. الطريقة اليدوية: افتح ملف الخصائص لقالب الوودربرس functions.php عن طريق Themes > Editor، واضف في نهايته الكود التالي قبل علامة ?> ثم احفظ الملف.
2
3
4
5
6
7
8
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
الثلاث أسطر الأولى تحذف استدعاءات الإضافات للملفات من wp_head(); التي توضع في وسم الموقع، بينما الثلاث أسطر الأخيرة تعيد إضافتهم إلى خاتمة الموقع ?php wp_footer(); التي توضع قبل نهاية الوسم ننوه أن الطريقة السابقة لا تنطبق على جميع الإضافات، بل تنطبق فقط على الإضافات التي تستخدم
وهي نسبة كبيرة عموماً، أما باق الاضافات التي لا تستخدم تلك الطرق (ويمكنك التأكد من ذلك عن طريق البحث عن أحد الطرق السابقة في ملف php الرئيسي للإضافة من خلال Plugins>Editor) فيمكن دمج ملفات جافاسكريبت الخاصة بها وسنفصل هذا لاحقاً.
2- حصر استدعاءات ملفات CSS وJS للإضافات على صفحات معينة من الموقع
هناك بعض الإضافات التي لا نحتاجها إلا في صفحات معينة مثل إضافة إتصل بنا في صفحة التواصل، ولكن مع ذلك يتم استدعاء ملفاتها في كل صفحات الموقع مثل الرئيسية وصفحات التدوينات، وهذا حمل زائد لا ضرورة له، بالتالي سننفذ كوداً يمنع استدعاء الملفات إلا في صفحات معينة وهي التي نستعمل فيها الإضافات.
افتح ملف functions.php الخاص بقالب موقعك، من خلال Themes>Editor وأدخل النص التالي قبل علامة ?>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
add_action( 'wp_print_scripts', 'gawd_deregister_javascript', 100 );
function gawd_deregister_javascript() {
/* يمكنك التعديل في التالي خسب احتياجاتك */
/* في حالة صفحات المدونة الإضافية مثل صفحة عن المدونة واتصل بنا، يمكن كتابة اسم الصفحة بين القوسين أو تركه خالياً ليعمم على جميع الصفحات ما عدا الرئيسية والتدوينات */
if ( !is_page('insert page name') ) {
wp_deregister_style( 'insert plugin name' ); /* لإلغاء استدعاء ملف CSS */
wp_deregister_script( 'insert plugin name' );/* لإلغاء استدعاء ملف JS */
}
/* في حالة صفحات التدوينات أو المواضيع الخاصة بالمدونة، يمكن كتابة اسم الموضوع او رقمه بين القوسين، أو تركه خالياً للتعميم على جميع التدوينات. */
if ( !is_single('insert post name/ID') ) {
wp_deregister_style( 'insert plugin name' ); /* لإلغاء استدعاء ملف CSS */
wp_deregister_script( 'insert plugin name' );/* لإلغاء استدعاء ملف JS */
}
/* في حالة الصفحة الرئيسية فقط دون التدوينات أو الصفحات الإضافية مثل صفحة عن المدونة وصفحة اتصل بنا. */
if ( !is_home() ) {
wp_deregister_style( 'insert plugin name' ); /* لإلغاء استدعاء ملف CSS */
wp_deregister_script( 'insert plugin name' );/* لإلغاء استدعاء ملف JS */
}
}
ولا تنسَ استبدال insert plugin name باسم الإضافة المراد تعديلها.
2-دمج ملفات CSS & JS
لتنفبذ هذه الخطوة سنستخدم بعض الاضافات الجاهزة، إذ أن الطرق اليدوية تحتاج ضعف الوقت تقريباً، هذه الإضافات ستدمج جميع ملفات CSS سواء الخاصة بالقالب أو بالإضافات في ملف واحد، ونفس الأمر بالنسبة لملفات JS، وهكذا نقلل من استدعاءات الملفات HTTP Requests إلى اثنين أو ثلاثة كحد أقصى.
- إضافة CSS Combine لدمج ملفات CSS.
- إضافة JS Combine لدمج ملفات JS.
- إضافة WP Minify لدمج كلاً من ملفات CSS وملفات JS.
يمكن استخدام إضافتي CSS Combine وJS Combine معاً، أو استخدام إضافة WP Minify فقط.
4- التحميل غير المتزامن async لملفات JS
كما ذكرنا سابقاً فإن ملفات الجافاسكريبت في العادة كل ملف يحمل منفرداً لا يسمح لغيره بالتحميل إلا بعد الإنتهاء، لكن يمكن تحويل الاستدعاءات إلى استدعاء غير متزامن async بحيث يتم تحميل الملفات في نفس الوقت مع الصفحة مما يسرع من معدل التحميل، هذه الطريقة يمكن أن تعد بديلة عن الطريقة الأولى في حالة ما إذا كان موقعك معتمداً بشكل أساسي على الجافاسكريبت، ويمكن أن تستخدم معها. ولتنفيذ هذة الخطوة سنستخدم إضافة Asynchronous Javascript
موقع سريع = تجربة تصفح ناجحة
حرصك الدائم علي توفير موقع سريع سيقودك إلى حلول إبداعية أكثر لتقليل اثار الاضافات والاكواد البرمجية التي تستخدمها في موقعك، أي كود لا تستخدمه فعليا ولا اثر له في تحسين تجربة المستخدم يجب أن تحذفة فوراً، اذا كانت لديك أفكار أخري شاركنا بها …
التعليقات اترك تعليقك على المقال 7 تعليقات
أشكرك أختى على المقال … مسألة استخدام الاضافات هو في النهاية اختيار البعض يستسهل ليريح رأسه ويستخدم اضافات كثيرة لمهمات يمكن أن ينجزها بقليل من الصبر والتكويد ، مثلا البعض يستخدم اضافة لإظهار أيقونات صفحات المواقع الاجتماعية للموقع بينما هي مهمة سلهة يمكن انجازها بشكل يدوي دون المخاطرة بتأثير الاضافات على سرعة تحميل الموقع ناهيك عن الثغرات الأمنية!
أقترح ايضا اختيار استضافة ذات سمعة طيبة ، ضبط حجم الصور كما أشرت حضرتك في مقال سابق ، اظهار مختصر للتدوينات excerpt في الرئيسية بدلا من التدوينات الكاملة ، تقليل عدد التدوينات المعروضة في الصفحة ، هناك أيضا اضافة مفيدة W3 Total Cache .
السلام عليكم,
الله يعطيكم العافيه فعلا الموضوع هذا شغل بالي وكنت دائما احرص اتبع اسلوب قوقل و W3C في تطوير المواقع..كنت اعتقد انه السكربت فقط لازم يكون في ال ويمكن وضعه بال بس ممكن يقلل جوده اعتماد موقعك من الناحيه البرمجيه الحديثه للمواقع. بعد بحث طويل في صقحات مطوري المواقع, الحمدلله تأكدت فعلا يمكن استخدام في اي مكان وبالعكس توصيات W3C و ياهو يفضلون وضعها في ال او ما قبل نفس ما اقترحتم. الله يعطيكم العافيه هل معلومه جدا مفيده وفعلا تساعد في تسريع تحميل الموقع.
شكرا جزيلا
*معليش الاكواد ما تظهر في التعليق, تصحيح*
السلام عليكم,
الله يعطيكم العافيه فعلا الموضوع هذا شغل بالي وكنت دائما احرص اتبع اسلوب قوقل و W3C في تطوير المواقع..كنت اعتقد انه السكربت فقط لازم يكون في “الهيد” ويمكن وضعه “بالبودي” بس ممكن يقلل جوده اعتماد موقعك من الناحيه البرمجيه الحديثه للمواقع. بعد بحث طويل في صفحات مطوري المواقع, الحمدلله تأكدت فعلا يمكن استخدامه في اي مكان وبالعكس توصيات W3C و ياهو يفضلون وضعها في “الفوتر” او ما قبل تقفيل “البودي” نفس ما اقترحتم. الله يعطيكم العافيه هل معلومه جدا مفيده وفعلا تساعد في تسريع تحميل الموقع.
شكرا جزيلا
قد لا يعجبكم ما أقول
لكن سأبدي رأيي إن شاء الله
نحن الآن في القرن الواحد و العشرين سرعة الاتصال و حداثة العتاد الحالي و المتصفحات الحديثة جعلت معظم هذه المشاكل من الماضي
فلا داعي لبذل الجهد في مراجعة مثل هذه الامور
و توفير جهد المطور للاهتمام بأمور أخرة كالمظهر و الأمان و سهولة الاستخدام
ارجوا ان يتم توضيح النقطة 2 بشكل اكبر .. فهمت الفكرة والمبدأ ولكن فشلت في التطبيق ..
ارجوا التطبيق على إضافة contact-us-7 …
السلام عليكم
جزاكي الله خيرا الموضوع رائع و مفيد
و لكن لدي مشكلة : قمت بعمل هذه الخطوة : إزاحة ملفات جافاسكريبت إلى خاتمة الموقع Footer بدلاً من
و لكن ذلك الشريط في البداية الذي به مواقع التواصع تحول من الاصفر الى الرمادي و كذلك الفوتر اصبح اسود بدل اصفر
يمكنك ان تري هذا هنا http://mohamedadesigner.com/