قائمة التحقق من تحسين WordPress

تحسين WordPress هو فن جعل موقع الويب الخاص بك يعمل بأسرع ما يمكن ، وتحسين تجربة المستخدم ، وتقليل تكاليف الخادم ، وله فوائد تحسين محركات البحث.

تظهر العديد من الدراسات أن الزوار لا يرغبون في انتظار تحميل موقع ويب ، ويميلون إلى القفز بعيدًا عن موقع الويب الخاص بك إذا استغرق تحميله وقتًا طويلاً.

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

كشفت الاختبارات في Amazon عن نتائج مماثلة: كل زيادة قدرها 100 مللي ثانية في وقت تحميل موقع Amazon.com أدت إلى انخفاض المبيعات بنسبة 1٪ (Kohavi و Longbotham 2007)

المصدر: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

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

لكن موقع الويب الخاص بي يتم تحميله بسرعة كبيرة!

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

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

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

تصغير النصوص

مواقع WordPress عبارة عن مزيج من HTML و CSS وجافا سكريبت والصور. يتم تحميل رمز HTML أولاً ، ثم يحتوي على معلومات حول الملفات الأخرى لأوراق أنماط CSS وملفات JavaScript والصور.

يتم تحميل كل ملف بدوره. عادةً ما يكون للمتصفح حد من 2-4 "أنابيب" ، مما يعني أن المتصفح سوف يقوم فقط بتحميل ما يصل إلى 2-4 ملفات في نفس الوقت من الخادم الذي تتم استضافة الملفات عليه.

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

في بعض الحالات ، يقوم المكون الإضافي بحقن أنماط JavaScript أو CSS مباشرة في HTML.

هذه مجرد عينة من موقع WordPress عادي. كود HTML له روابط إلى عدة ملفات أخرى. في هذا المثال البسيط ، يتم تحميل 4 ملفات جافا سكريبت ، واحدًا تلو الآخر.

<script type = ”text / javascript” src = ”https://domain.com/wp-includes/js/jquery/jquery.js؟ver=1.7.2 ″> </script>

<script type = ”text / javascript” src = ”https://domain.com/wp-content/themes/Trim/js/socialite.min.js؟ver=3.4.2 ″> </script>

<script type = ”text / javascript” src = ”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js؟ver=3.4.2 ″> </script>

<script type = ”text / javascript” src = ”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js؟ver=3.4.2 ″> </ script >

يحتوي WordPress على وظائف داخلية تسمح لمؤلفي الإضافات والقوالب بتضمين ملفات JavaScript و CSS الضرورية.

wp_enqueue_script () و wp_enqueue_style (). تعطي أسماء الوظائف دليلًا قويًا على ما تفعله. باستخدام أي من هذه الملفات لتضمين الملفات الضرورية ، يقوم مؤلفو الإضافات والقوالب بوضع ملفاتهم في قائمة الانتظار مع جميع المكونات الإضافية الأخرى وحتى WordPress نفسه.

من الممكن أيضًا توجيه وظائف أي تبعيات للمكتبات الأخرى ، وعادةً ما يعتمد ملف تضمين JavaScript على jQuery ليتم تحميله أولاً.

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

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

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

ملاحظة: في نموذج التعليمات البرمجية ، أقوم بتخزين عنوان url الخاص بالسمة في متغير ، ثم أقوم بتحليله إلى دالة wp_enqueue_script. هذا يقلل من عدد مكالمات PHP و / أو قاعدة البيانات المطلوبة ، مما يزيد من السرعة.

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

بعد تثبيت مكون إضافي مصغر ، يتم الآن ضم أوراق أنماط JavaScript و CSS في عدد أقل من مكالمات HTTP.

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

هذا يجمع الملفات الأربعة في "ملف" / طلب واحد لمتصفحك.

لقد جئت عبر مواقع الويب المستندة إلى WordPress والتي تحتوي على 22 ملف .css تم تحميلها بالإضافة إلى 15 .js. كل ذلك على الصفحة الأولى. يمكن أن يكون التغيير في السرعة مذهلاً إذا كان بإمكانك تقليل كمية الملفات الخارجية.

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

تحسين header.php

يتم استدعاء header.php في المظهر الخاص بك في كل صفحة على موقع WordPress الخاص بك. يحتوي هذا الملف عادةً على الكثير من العناصر التي يمكن تحسينها.

المثال الكلاسيكي هو bloginfo ("template_directory") والذي يُستدعى عادةً عدة مرات في الرأس لإرجاع عنوان url الخاص بالسمة لتضمين الملفات الخارجية.

هناك طريقة أكثر فاعلية وهي تقديم طلب واحد لعنوان url ، ثم تخزينه كمتغير.

$template_directory = get_bloginfo('template_directory'); 

يتم الآن تخزين عنوان url الخاص بدليل السمات في المتغير $ template_directory.

يمكن قراءة المزيد من الأمثلة حول كيفية تحسين كفاءة header.php في blogpost WordPress header.php نصائح التحسين

تقليل عدد الإضافات

جزء مهم آخر في تحسين WordPress هو الحفاظ على عدد المكونات الإضافية النشطة عند أدنى مستوى ممكن. من المغري للعديد من المستخدمين اختبار المكونات الإضافية المختلفة وتجربتها ، والتي تعد بالفعل إحدى فوائد WordPress.

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

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

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

لا تستخدم الصور - استخدم CSS3

يستخدم تصميم مواقع الويب الصور للمساعدة في إنشاء واجهة المستخدم.

بعد إدخال CSS وعلى وجه الخصوص CSS3 ، يمكن محاكاة العديد من التأثيرات المستخدمة لواجهات الويب باستخدام كود CSS و HTML.

[مربع] ملاحظة: معظم هذه التأثيرات غير متوافقة عبر جميع المتصفحات ، ولا سيما Internet Explorer الأقدم (نعم ، دائمًا المشكلة الفرعية لأي مطور ويب). إذا كنت ترغب في تحسين سرعة موقع الويب الخاص بك ، فإن استخدام تأثيرات CSS يمكن أن يكون حلاً سريعًا وسريعًا ، ولكن ليس اختيارًا جيدًا إذا كان الجمهور الرئيسي للعميل يستخدم متصفحات قديمة. [/ box]

إذا كنت تعمل مع عميل يستهدف B2C (عمل إلى مستهلك) ، فيجب عليك التحقق من Google Analytics أو سؤالهم عن نوع العملاء الذين لديهم (أو يرغبون في استهدافهم). يمكن أن يؤثر هذا على ما إذا كان بإمكانك استخدام تأثيرات CSS3 إذا كان جمهور العملاء يستخدم بشكل عام متصفحات قديمة.

عندما أصدر موقع Elegantthemes.com إصدارًا جديدًا من المكون الإضافي للرمز القصير ، كان له تأثير كبير على وقت التحميل لعملائي بسبب تأثيرات CSS3 ووضع صور متعددة في كائن واحد.

يحتوي مجلد الرموز القصيرة / الصور ، الذي كان يحتوي على 90 صورة ، الآن على كائن PNG واحد ، مما يقلل الحجم الإجمالي من 140 كيلو بايت إلى 15 كيلو بايت!
(وهذا يمثل انخفاضًا في الحجم بنسبة 90٪ تقريبًا).

صور للعفاريت

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

الكائن عبارة عن صورة واحدة ، عادةً بتنسيق .PNG يحتوي على عدة عناصر من التصميم / التخطيط المرئي. بدلاً من تحميل كل عنصر رسومي على حدة ، يتم ضم جميع الصور في واحد أو أقل عدد ممكن من النقوش المتحركة.

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

بدلاً من تحميل كل صورة فردية (طلب http مختلف) ، يتم تجميع كل الصور في ملف واحد ، ويتم تعديل CSS الذي يعرض كل صورة ببساطة لدفع الخلفية إلى مكان الجزء المطلوب في الكائن.

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

مثال على أنماط CSS مع رمز متحرك:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

يشير كل نمط css إلى نفس الملف ، لكن موضع الخلفية مختلف ، ويعرض الأجزاء المختلفة من الصورة.

التوزيع - استخدم CDN

هناك فائدتان رئيسيتان لاستخدام CDN (شبكة توزيع المحتوى) لاستضافة ملفات السمات وعناصر WordPress.

يتم تحميل ملفاتك بشكل أسرع نظرًا لوجودها في مجال مختلف. حد المتصفح من 2-4 تنزيل متزامن للملفات هو لكل مجال .

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

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

الخادم المناسب لموقعك على الويب

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

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

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

التأثير الحقيقي من حيث تحسين محركات البحث أمر قابل للنقاش ولكن إذا كنت تحاول تحسين أداء مواقع الويب الخاصة بك ، فإن الأمر يستحق النظر.

هذا معروف جيدًا بالنسبة إلى مُحسّنات محرّكات البحث ، ولكن بمجرد إنشاء موقع ، فمن النادر رؤيته ينتقل إلى خادم آخر لأسباب بحتة لتحسين محركات البحث. ومع ذلك ، يجدر بنا أن نأخذ في الاعتبار مشروعك القادم.

إصلاح أخطاء 404

يجب عليك إجراء فحص لموقع الويب الخاص بك بانتظام للتأكد من عدم وجود 404 - صفحات غير موجودة على أي حال. يمكن أن يقلل تقليل الروابط السيئة على موقع الويب الخاص بك من تحميل الخادم ويعطي تجربة مستخدم أفضل. لا يمكن أن تختفي الروابط والصفحات فحسب ، بل قد يؤدي أحيانًا خطأ إملائي أو نوع آخر من الأخطاء إلى محتوى غير موجود على موقع الويب الخاص بك.

نصيحة: تحقق من هذا الجزء من الكود لإعادة التوجيه 301 تلقائيًا لصفحات غير موجودة.

[علبة]
هذه الصفحة بعيدة عن الانتهاء ولا تغطي جميع تفاصيل تحسين WordPress - حتى الآن. الهدف هو إنشاء مورد من النصائح والحيل لتحقيق أقصى استفادة من موقع WordPress الخاص بك.

سيكون من الصعب تنفيذ بعض الحيل أو معظمها ما لم تكن مطورًا ، لكن كل واحدة منها ستجعل موقع WordPress الخاص بك يعمل بشكل أسرع.
[/علبة]

قائمة التحقق

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