WordPress المستوى المتقدم: تحسين سرعة الصفحة

Name: WordPress المستوى المتقدم: تحسين سرعة الصفحة
Author: Chrissy Rey

تعلم كيفية تحسين سرعة صفحة موقع ووردبريس:

شاهد الدرس الأول مجانًا — احصل على وصول كامل إلى جميع الدروس الـ5.

دورة تدريبية: عند الطلب

مرحبًا، اسمي كريستي راي، وفي هذه الدروس، سأوضح لك كيفية تحسين سرعة موقع الويب الخاص بك. سرعة الصفحة مهمة حقًا. إنها مهم بشكل خاص للمستخدمين الذين يستخدمون شبكات الهاتف المحمول أو البطيئة، لأنه كلما استغرق الأمر وقتًا أطول للقيام بتنزيل موقع الويب الخاص بك، كلما زاد استخدامهم للإنترنت. لذا، خصوصًا إذا كانوا يدفعون بالدقيقة أو بالميغابايت أو الجيجابايت مقابل التنزيلات، فكلما كان موقع الويب الخاص بك أكبر، كلما كان عليهم أن يدفعوا أكثر. لذلك من المهم حقًا جعل سرعة موقع الويب الخاص بك سريعة بالقدر المستطاع. وهناك بعض الأشياء التي يمكنك استخدامها للتحقق من سرعة موقع الويب الخاص بك. أعني، أولاً، أن تفتح موقع الويب على جهاز محمول، وترى كم من الوقت يستغرق تنزيله. ولكن هناك طريقة أخرى يمكنك من خلالها القيام بذلك وهي استخدام بعض الأدوات عبر الإنترنت. هذه بعض الأدوات المجانية التي سأعرضها لك. لقد قمت الآن بإنشاء موقع عالم الشوكولاتة الخاص بي. لقد حصلت عليه على نطاق مؤقت، لكننا سنلقي نظرة على مدى سرعة تحميل الموقع باستخدام أداتين مجانيتين. إحداها تسمى PageSpeed Insights، وهي أداة من جوجل. عنوان URL هوpagespeed .web .dev، ويمكنك الذهاب إلى هناك والتحقق من أي صفحة على الإنترنت طالما لا يوجد كلمة المرور عليه. ويمكنك رؤية الأداء لكل من الهاتف المحمول وسطح المكتب. لذا فإن الشيء الجميل حقًا في هذا التقرير هو أنه يأتي مباشرة من Google. هذه إحدى خدمات جوجل. يمكنك أن ترى أنهم سيعطونك درجة PageSpeed وهي درجة الأداء. ويمكنك أن ترى الآن، بالنسبة لهذه الصفحة، نتيجة السرعة لدي 72 . وهذه النتيجة مخصصة للصفحة المحددة التي ننظر إليها. لذلك فهي مخصصة فقط، في هذه الحالة، لصفحتي الرئيسية. يمكنك أيضًا التحقق من أداء الصفحات الأخرى في موقع الويب الخاص بك. وأنا أوصي بالقيام بذلك لإجراء فحص مفاجئ بعد إجراء بعض التحسينات للتأكد من أن الموقع برمته يتحرك بسرعة. يمكننا أن نرى في تقرير PageSpeed Insights أن أول رسم محتوى قمت به كان 3.1 ثانية. هذا هو الوقت الذي تستغرقه الصفحة للظهور في المتصفح. ويتم ذلك على شبكة 4G البطيئة، وهي طريقة الاختبار التي يستخدمونها على Moto G Power مع Lighthouse 10 .0 .2. إذن هذه هي المواصفات التي يتم اختبارها من أجلها. والآن يقدم لي تقريرًا عن الأشياء التي يمكنني القيام بها لتحسين سرعة صفحتي أو سرعة هذه الصفحة على وجه .الخصوص ويمكنك أن ترى أن أحد الأشياء هو تقديم الصور بتنسيقات الجيل التالي. لذا، إذا قمت بتوسيع كل فرصة من هذه الفرص، فسوف يمنحك ذلك بعض التوفير المحتمل الذي قد تتمكن من تحقيقه. على سبيل المثال، إذا استخدمت لهذه الصورة تحديدًا، الصورة الموجودة في الأعلى هنا، إذا استخدمت صورة WebP بدلاً من ملف JPEG، من المحتمل أن أحصل على نصف حجم الملف تقريبًا. ويظهر لي إعدادات مماثلة أو تقارير مماثلة لصور أخرى في هذه الصفحة. لذا فإن أحد الأشياء التي يمكنني القيام بها هو تحسين التنسيق الذي أستخدمه لموقع الويب الخاص بي. شيء آخر هو التخلص من موارد حظر العرض. لذلك ستكون هذه عادةً أشياء مثل ملفات CSS، ملفات جافا سكريبت. ولذا فإن أحد الأشياء التي يمكنني القيام بها هو تأجيلها حتى لا يلزم تحميلها حتى يتم عرض الصفحة. وهذه بعض الأشياء التي يمكنني القيام بها باستخدام بعض المكونات الإضافية التي تستخدم WordPress. ثم هناك شيء آخر لدينا هنا وهو تقليل CSS غير المستخدم. هذه بعض أنماط CSS التي تم تحميلها والتي لا يتم استخدامها بالضرورة داخل موقع الويب. لذلك من المحتمل أن أتمكن من حفظ بعض حجم النقل وبعض حجم ملف صفحة الويب الخاصة بي إذا كنت سأقوم بتقليلها أو إزالتها. هذه بعض الأشياء التي يمكنني استخدامها لتحسين أدائي. الآن 72 ليس فظيعا. إنه ليس الأفضل. أعني أن هدفك سيكون أن تصل إلى الثمانينيات أو التسعينيات. إذا استطعت تحقيق 100 يكون أفضل. ولكن إذا نظرنا إلى سطح المكتب، فعادةً ما يكون أداء سطح المكتب أفضل لأن الافتراض الموجود على سطح المكتب هو أنه ستكون شبكة أسرع. لذلك بدلاً من اختناق 4G، لدينا اختناق مخصص. ويمكنك أن ترى أنه تم محاكاة 10240 كيلوبت في الثانية. لذلك ستكون الشبكة أسرع بكثير. لذا يجب أن يتم التنزيل بشكل أسرع. لكن هذا لا يزال يمنحني بعض الفرص للتحسين، بما في ذلك بعض تلك التي رأيناها في الشاشة السابقة. الآن هناك أداة أخرى يمكنك استخدامها للتحقق من أداء الصفحة وهي GTmetrix. عنوان URL هو gtmetrix .com. ويمكنك أن ترى في هذا أنني حصلت على درجة 100%. أنها جيدة للغاية. حصلت على درجة GTmetrix. يعطونك درجة. إنها A، وبنيتي 98%. لذلك هذا جيد جدا. إذا نظرت إلى هذا فقط، فسأقول أنني ربما لا أحتاج إلى القيام بأي شيء. ربما يكون على ما يرام. لست بحاجة إلى إجراء أي تغييرات. ولكنك تريد أن تأخذ في الاعتبار ما رأيته أيضًا في PageSpeed Insights لأن نتيجة الهاتف المحمول تلك، كما يمكنك أن ترى، هي أقل من ذلك بكثير. وبعض الأسباب، إلى جانب حقيقة أنك لا تريد أن يضطر المستخدمون إلى انتظار التنزيلات، هناك سبب آخر قد ترغب في زيادة هذه النتيجة لأنه من المحتمل استخدامها لتحسين محرك البحث. لذا، إذا كان هناك موقعان متماثلان تمامًا وكان أداء أحدهما أفضل، فسيتم تحميل أحدهما بشكل أسرع والآخر يتم تحميله بشكل أبطأ، ومن ثم يمكن تصنيف الذي يتم تحميله بشكل أسرع في مرتبة أعلى في محرك البحث. لذلك مجرد شيء يجب أخذه في الاعتبار لذلك. الآن، بالإضافة إلى PageSpeed Insights وGTmetrix، هناك أداة أخرى يمكنك استخدامها إذا كنت تستخدم متصفح Chrome. تسمى Lighthouse. ويمكنك الوصول إلى ذلك إذا انتقلت إلى قائمة المطور Developer ضمن عرض ثم أدوات المطور. وسترون تحت الأدوات هنا، هذا السهم الصغير هنا، يمكنك اختيار Lighthouse. وLighthouse، هي أداة مدمجة في Chrome. ويمكنك تحليل تحميل الصفحة. و هذه هي المعلومات التي... هناك الكثير من المعلومات التي ستحصل عليها في رؤى سرعة الصفحة PageSpeed Insights. إنها مجرد مدمجة في متصفحك. لذا يمكنك التحقق من الهاتف المحمول أو سطح المكتب. ولذلك سأقوم بالنقر على تحليل تحميل الصفحة هنا. وقد يستغرق هذا بضع دقائق حتى يتم تحميل كل شيء. لكن مرة أخرى، يمكنك أن ترى أنها تقوم بهذه الأبعاد ويمكنك أن ترى الآن أنه ليس هناك أي اختناق. من الصعب رؤيته نوعًا ما لأنه باللون الرمادي، لكنه سيُظهر لي بعض الإحصائيات بناءً على تلك المعايير. ويمكنك تغيير ذلك. لكن يمكنك أن ترى هنا أنني حصلت على 93. هذا جيد جدًا. هذا موقع ويب عالي الأداء. إنه مُحسّن جدًا. لا أحتاج أن أفعل الكثير. ولكن مرة أخرى، إذا قمت بالتمرير لأسفل، فإنه يمنحني هذه الفرص ويظهر لي بعض الأشياء التي يمكنني القيام بها لتحسين سرعة موقع الويب الخاص بي. أحد الأشياء الجميلة الأخرى التي نحصل عليها هنا في Lighthouse هو أنه بالإضافة إلى الأداء، فإنه يمنحني أيضًا بعض النتائج المتعلقة بإمكانية الوصول وأفضل الممارسات وتحسين محرك البحث. لذلك من الجيد الحصول على هذه المعلومات. وعندما أقوم بتدقيق موقع ويب لأحد العملاء، عادةً ما أقوم بتضمين هذه المعلومات حتى يتمكنوا من الاطلاع عليها نوعًا ما منظور الاختبار الآلي، ونوع الأشياء التي يمكنهم تحسينها لموقعهم على الويب. لذا، بمجرد حصولك على هذه المعلومات، فأنت بحاجة، في كثير من الحالات، إلى أن تأخذ الاقتراحات لإجراء تحسينات على موقع الويب الخاص بك. وهناك بعض الأشياء الأخرى التي قد تراها في تقرير الأداء. وقد نسيت أن أعرض عليك في ETmetrics، أنها تعطيك مشكلات يمكنك إصلاحها. لذلك هناك بعض الأشياء التي يمكنك إصلاحها هناك. لكن بعض الأشياء التي تحتاج إلى إصلاح، من الأفضل أن تبدأ بموقع ويب محسّن من البداية بدلاً من العودة وإصلاح شيء ما بعد ذلك. لذا، عندما تقوم ببناء موقع الويب الخاص بك، أريدك أن تفكر في هذه الأشياء. ما الذي يمكنك فعله لتحسين موقع الويب الخاص بك أثناء إنشاء موقع الويب الخاص بك؟ على سبيل المثال، ابدأ بسمة محسّنة للغاية. ويمكنك التحقق لمعرفة مدى تحسين السمة بمجرد تثبيتها من البداية. أسميها خارج الأطر النمطية Out of the box، لكن فقط قم بتثبيتها حديثًا. وبمجرد تثبيتها، لا تقم بإجراء أي تغييرات، ولا تقم بتحميل أي صور، ولا تفعل أي شيء بها. اختبرها باستخدام PageSpeed Insights و/GTmetrics لمعرفة مدى سرعتها. وهذه هي الطريقة التي أعرف بها عادةً ما إذا كنت أرغب في استخدام سمة أم لا. سأقوم بتثبيتها، وأتأكد من أنها سريعة جدًا، وسريعة الأداء، وبعد ذلك سأقوم ببناء موقع الويب فوق ذلك. لذا، إذا كنت تبدأ بسمة محسّنة للغاية منذ البداية، فمن المحتمل أن تكون أكثر من المحتمل أن ينتهي الأمر بموقع ويب محسّن. هناك العديد من الأشياء الأخرى التي تحتاج إلى أخذها في الاعتبار مثل حجم الملف وحجم الصورة والخادم الذي تستخدمه وأشياء من هذا القبيل. ابقي معنا للدرس التالي، وسننظر في كيفية التحسين صورك للمساعدة في تقليل حجم الملف الكلي وجعل صفحاتك أسرع

متقدم مقدِّم الخدمة : Chrissy Rey 5 الدروس · 49m باللغات: العربية, الإنجليزية

وصف الدورة

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

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

ما ستتعلمه

قياس سرعة الصفحة باستخدام الأدوات التي تقيم سرعة تحميل كل صفحة من موقعك الإلكتروني
تحديد أسباب بطء أداء صفحات الويب وإيجاد فرص لتحسين سرعة الصفحة
تحسين الصور لمساعدة موقعك الإلكتروني على التحميل بشكل أسرع
تطبيق التخزين المؤقت وشبكة توصيل المحتوى CDN لتحسين أداء تحميل الصفحة
استخدام إضافات مثل WP Rocket وPerfmatters لتحسين سرعة تحميل صفحات الموقع الإلكتروني
تطبيق أفضل الممارسات والأدوات لتقييم وتحسين سرعة تحميل موقعك الإلكتروني

النقاط الرئيسية

يمكن لسرعة الصفحة، وهي السرعة التي يتم بها تحميل صفحة الويب للمستخدم، أن تؤثر على تجربة المستخدم وتحسين محركات البحث.
يمكن لأدوات مختلفة قياس سرعة كل صفحة، ويمكن لنتائجها واقتراحاتها توجيه التحسينات لجعل الموقع الإلكتروني أسرع.
يعد تحسين الصور والتخزين المؤقت واستخدام CDN من الخيارات المتاحة لتسريع تحميل الموقع الإلكتروني.
يمكن للإضافات مثل WP Rocket وPerfmatters المساعدة في تسريع تحميل الموقع الإلكتروني.
بنهاية الدورة، يمكن للمتعلمين تقييم سرعة تحميل موقعهم الإلكتروني واستخدام أفضل الممارسات والأدوات لجعله يتم تحميله بشكل أسرع.

الأسئلة الشائعة

ماذا سأتعلم في هذه الدورة؟

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

لمن هذه الدورة؟

تستهدف مطوري الويب الذين يمثل قياس سرعة الصفحة وتحسينها أمراً مهماً بالنسبة لهم.

ما هي الإضافات التي تغطيها الدورة؟

تقيم الدورة إضافتين يمكنهما المساعدة في جعل موقعك الإلكتروني يتم تحميله بشكل أسرع: WP Rocket وPerfmatters.

ما هي الموضوعات التي تغطيها الدروس؟

تغطي الدروس أساسيات سرعة الصفحة، وتحسين الصور، والتخزين المؤقت، وWP Rocket، وPerfmatters.

ما الذي سأكون قادراً على القيام به بعد إكمال هذه الدورة؟

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