تحسين Core Web Vitals زيادة سرعة الموقع واداءه ووردبريس

core web vitals

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

من الأخطاء الشائعة التي يتداولها أصحاب المواقع هو ان تحديث Core Web Vitals خاص بسرعة الموقع فقط, ولكن هذا التحديث أكبر من ذلك بكثير, فإذا قمنا بعمل ترجمة حرفية لهذا المصطلح سنجد “نواة الويب الحيوية” أو “جوهر الويب الأساسي”, والسرعة هي واحدة من هذه العوامل, ولكن ليست وحدها, فهناك عوامل أخرى عديدة وكثيرة سنتطرق إليهم في هذه المقالة.

لنبدء ببعض الأمور النظرية قليلاً لنفهم ما نحن داخلين إليه, ثم تطبيق عملي, ثم شروحات لكل ما يتعلق بالـCore Web Vitals.

تعريف Core Web Vitals

لنجيب في البداية عن بعض الأسئلة الشائعة والتي تتعلق بتحديث Core Web Vitals والتي وصلتنا وشاهدناها في شبكات التواصل الاجتماعي:

ما هو Core Web Vitals؟

الـCore Web Vitals هي مبادرة كبيرة من جوجل لتقديم الإرشادات والنصائح لتحسين تجربة المستخدم داخل موقعك, وذلك بالاعتماد على معايير عديدة متعلقة في (Performance – Accessibility – Best Practices – SEO), لجعل المحتوى داخل الويب أكثر حيوية وتناسق وسرعة.

كيف يمكن تحسين Core Web Vitals في الووردبريس؟

يمكن تحسين الـCore Web Vitals حتى لو لم تكن لديك خبرة كبيرة في التطوير والبرمجة, وذلك بمساعدة الاضافات الجاهزة الموجودة في ووردبريس, طبعاً سنتحدث في هذه المقالة عن الإضافات الضرورية التي يجب استخدامها لتحسين السرعةوالأداء مع اعداداتها الكاملة لإخراج أفضل تجربة.

ما تأثير تحسين Core Web Vitals على الترتيب؟

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

عند تحسين Core Web Vitals بالكامل في الموقع متى يتغير الترتيب؟

عندما تقوم بتحسين كل ماهو مطلوب تحسينه في موقعك, وتحصل على تقييم جيد في كل شيء (فوق 90), سيحتاج جوجل مدة 28 يوم حتى يقوم باعادة تقييم للموقع واعطاءه ترتيب جديد.

إذا قمت بتحسين موقعي بالكامل بالنسبة لـCore Web Vitals هل سأصبح مركز أول؟

التحسين وحده غير كافي, الـCore Web Vitals واحدة من مئات العوامل الأخرى, وليست الوحيدة, فتحسينها شرط لازم ولكنه غير كافي, لذلك يجب مراعاة باقي العوامل كلها.

عوامل تحسين Core Web Vitals

كما قلنا سابقاً تعتمد Core Web Vitals على الكثير من العوامل وليست السرعة فقط, فالسرعة واحدة منها, فهذا التحديث هدفه الأول هو تحسين تجربة المستخدم, وعوامل التحسين هي:

الاداء Performance

وهنا سنتحدث عن سرعة الموقع, وأهم الممارسات التي يجب عملها لتحسين سرعة الصفحة, وأغلب هذه التحسينات يتم حلها بالاضافات التي سنتحدث عنها لاحقاً, ولكن بعض هذه التحسينات لا يمكن حلها إلا بتدخل مطورين متخصصين, وهي:

  • حذف ملفات JavaScript غير المُستخدمة.
  • حذف الملفات التي تحجب الرؤية السليمة للمحتوى.
  • تخفيض وقت استجابة السيرفر.
  • تحويل الصور إلى JPEG 2000, JPEG XR, و WebP لضغط أفضل.
  • ضغط كل الصور.
  • حذف ملفات CSS الغير مُستخدمة.
  • التأكد من أن الخط مرئي أثناء تحميل الخط.
  • تخفيض تأثير البرمجيات الخارجية المُستخدمة على تحميل الصفحة (Third-Party)
  • عدم تحديد أبعاد الصورة من width و height.
  • تفعيل الكاش طويل الأمد.
  • ترتيب عمليات التحميل وتصغيرها لإظهار أسرع للمحتوى.
  • تقليل وقت تنفيذ JavaScript.
  • تقليل عدد الطلبات (Requests).
  • استخدام ملف budget.json لتخفيض الطلبات وتقليل حجمها.
  • استخدام صور بمقاسات مبالغ فيها.
  • تجنب عدة عناصر في الصفحة تزيد وقت CLS.
  • الابتعاد عن المهام (Tasks) التي تحتاج وقت تحميل اكبر.
  • تجنب استخدام Animations المتحركة غير المركبة التي تزيد وقت CLS.
  • تأجيل تحميل الصور (Lazy Load).
  • ضغط ملفات CSS.
  • ضغط ملفات JS.
  • تحسين الصور.
  • تفعيل الضغط من السيرفر.
  • استخدام rel=preconnect أو rel=”dns-prefetch” لتقليل وقت التحميل.
  • تجنب التحويلات Redirects الكثيرة.
  • استخدام rel=preload لعناصر خاصة بالصفحة.
  • تجنب استخدام Gif واستخدام MPEG4 / WebM.
  • حذف ملفات JS المكررة.
  • تجنب وجود JavaScript قديم في المتصفحات الحديثة.
  • عمل Preload للصور الكبيرة لتقليل وقت LCP.
  • تجنب استخدام ملفات كبيرة الحجم.
  • تجنب استخدام عناصر DOM هائلة الحجم.
  • قياس سرعة الصفحة لدى المستخدمين والزوار (لا يمكن التحكم بها).
  • استخدام Lazy load للأوامر الخارجية Third-Party
  • تجنب document.write

طبعاً غالبية هذه المشاكل لا تراها لأنها قد تكون مُحسنة بالأصل عند استخدامك لقالب جيد أو ممتاز في موقعك, ولكن عليك ضغط كل الملفات من JS و CSS و صور و HTML, ولا تنسى تفعيل الضغط من السيرفر.

الوصول Accessibility

قابلية الوصول أو إمكانية الوصول مهمة جداً لتحسين تجربة المستخدم وتسهيل قراءة المحتوى للقارئ والعناكب, وسهولة الأرشفة وتحسينها, لجعلها أفضل وأسرع, وعوامل الوصول هي:

  • نسبية تباين المحتوى الى الخلفية يجب ان تكون ظاهرة.
  • استخدام Alt في الصور.
  • ان يكون محتوى الصفحة بالكامل داخل حدود الصفحة وواضح.
  • امكانية استخدام بعض عناصر الصفحة من خلال الكيبورد.
  • تحديد ماهية الرابط أو الزر.
  • توجيه نظر الزائر الى المحتوى الجديد بعد اضافته.
  • عدم توجيه نظر الزائر الى المكان الخطأ في الصفحة.
  • استخدام Tabindex للروابط والأزرار.
  • استخدام قواعد Aria.
  • توافق ترتيب الصفحة المرئية مع ترتيب DOM.
  • اخفاء المحتوى الموجود خارج الشاشة.
  • استخدام HTML5 لتسهيل التنقل.
  • قواعد برمجية أخرى سيتم تلخيصها هنا (عدم استخدام aria-hidden=”true” – استخدام كل سمات aria-* – استخدام قيم role صحيحة – تعريف الأزرار بشكل صحيح – تحتوي الصفحة على heading, skip link – وجود وسم <title> – جميع frame لها عناوين – ظهور العناوين الفرعية بشكل تسلسلي تنازلي – استخدام lang في <html> – وجود عناوين للروابط – عدم استخدام [user-scalable=”no”] في <meta name=”viewport”>)

أفضل الممارسات Best Practices

تُساعد هذه الممارسات التالية لفهم العناكب محتوى الصفحة وجعل التصفح أكثر أماناً وسهولة, وهي:

  • استخدام noopener أو noreferrer للروابط الخارجية.
  • عدم استخدام ملفات JS خارجية غير آمنة.
  • عدم استخدام صور ذات جودة منفخضة.
  • حل المشاكل التي يُشير المتصفح إليها.
  • استخدام بروتوكول الامان HTTPS.
  • عدم طلب تحديد المكان الجغرافي اثناء تحميل الصفحة.
  • عدم ارسال اشعارات وتنبيهات للمستخدم أثناء تحميل الصفحة.
  • السماح للمستخدم بلصق كلمة المرور داخل الخانة المخصصة.
  • استخدام أبعاد الصور بشكل مناسب للصفحة.
  • استخدام <!DOCTYPE html>
  • استخدام <meta charset> في أول 1024 بايت من HTML أو في header.
  • عدم استخدام unload واستبدالها بـpagehide or visibilitychange
  • الابتعاد عن استخدام تطبيقات الكاش.
  • وضوح مكتبات JS.
  • تجنب استخدام APIs مُعطلة.
  • استخدام خرائط المصدر source maps.
  • لا وجود لمشاكل في Chrome Devtools.
  • عمل preload للخطوط.

سيو SEO

طبعاً هذه العوامل يعرفها أغلبنا وأصحاب المواقع التي تعمل على تحسين مواقعها في محركات البحث, وهي:

  • استخدام alt للصور.
  • استخدام Structured data.
  • استخدام صحيح للـ<meta name=”viewport”>.
  • وجود وسم <title> في الصفحة.
  • وجود وصف meta description في الصفحة.
  • كل عناصر الصفحة يتم تحميلها.
  • الروابط لها عناوين.
  • الروابط غير محجوبة للعناكب.
  • عدم استخدام Noindex لحجب الأرشفة.
  • وجود ملف robots.txt.
  • استخدام hreflang.
  • استخدام rel=canonical
  • الحذر من استخدام خطوط أقل من 12px.
  • الحذر من اسخدام وصلات غير مفهومة لعرض المحتوى مثل SWF و FLV و CLASS و XAP.
  • استخدام أزرار واضحة تكون على الأقل 48px×48px.

كيف أقوم بتحسين Core Web Vitals بموقع لأقصى حد

أغلب ما ذُكر في الأعلى ستجده جاهز عند استخدام قالب جيد من قوالب ووردبريس الأكثر استخداماً والأكثر شعبية وشهرة, فقد تم تطويرها من شركات برمجية كبيرة, لذلك احذر من استخدام قوالب جديدة غير مُجربة وفيها مشاكل كثيرة.

طبعاً سنستخدم اضافات خاصة بالسرعة وسيتم شرح اعداداتها لتُناسب كل المواقع, والحصول على أعلى تقييم.

أول إضافة سنستخدمها هي Autoptimize الشهيرة والتي تعمل على ضغط كل ملفات JS و CSS و HTML مع تحسين الصور.

فبعد تنزيلها في موقعك, إذهب إلى الأعدادات>>autoptimize

قم بتفعيل كل خيارات الضغط بالاعدادات الأصلية دون تغيير أي شيء حتى لا يتأثر شكل موقعك, كما في الصورة:

تحسين js
تحسين js
تحسين css
تحسين html
تحسين html
save changes and empty cash
save changes and empty cash

أضغط على save changes and empty cash ليقوم بحفظ التعديلات وتحذف وتفريغ الكاش.

بعد ذلك أذهب الى خانة الصور Image optimization وقم بتفعيل Lazy-load ثم أضغط Save كما في الصورة.

optimize image

وأخيراً إذهب إلى خانة Extra وقم بحذف خطوط جوجل Remove Google Fonts و حذف ver وغيرها من الملفات Remove query strings from static resources ثم الضغط على Save.

extra optimize

إذهب الآن إلى أداة Page Speed Insight وقم بعمل فحص لموقعك, ستجد ارتفاع كبير في تقييم الموقع, ستلاحظ وجود مشاكل, إذا كان لديك الخبرة الكافية, إعمل على حلها لوحدك, وفي حال لم يكن لديك الخبرة قم بالاستعانة بأحد الخبراء في هذا المجال.

تقييم الموقع الناجح

لا تقم بفحص رابط الصفحة الرئيسية فقط, قم بفحص الروابط المهمة أيضاً والصفحات التي لها ترتيب عالي.

ملاحظة: في حال لم يصبح تقييم الصفحة عالي بعد استخدام الاضافة الأولى, وليس لديك خبرة كافية بحل المشاكل بيدك, حاول استخدام الإضافة الثانية والتي سنشرحها الآن.

إضافة ثانية قوية ومجانية أيضاً اسمها Fast Velocity Minify تُساعد الكثير من مواقع عملائنا على الوصول لتقييمات عالية جداً, وأعداداتها بسيطة وسهلة, ولكنها لا تقم بتحسين الصور كما في الإضافة السابقة.

بعد تنصيب الإضافة, إدخل على الإعدادات>>Fast Velocity Minify ثم قم بتفعيل خيارات التحسين لكل الملفات كما في الصورة.

تحسين HTML
تحسين css

أترك كل شيء كما هو انزل الى تحسين JS كما في الصورة

تحسين JS

إذهب الآن وقم بفحص الصفحة من جديد, وستجد تحسن كبير.

في حال لم تجد تقييم عالي, قم بتعطيل الإضافة الأولى Autoptimize, وتنزيل اضافة Smuch لتفعيل Lazy Load للصور, وافحص من جديد.

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

أما في حال كُنت تستخدم منصات دعائية ثقيلة مثل أدسنس وغيرها, فالحل هنا بإضافة Wp Rocket التي تعتبر من أفضل الإضافات في مجال تحسين السرعة, ولكن هذه الاضافة مدفوعة وليست مجانية.

بعد شراء الاضافة وتنزيلها في موقعك, قم بالذهاب إلى الإعدادات ثم WP Rocket ثم File Optimization, ثم قم بتفعيل الخيار الآتي Delay JavaScript execution, ومع تفعيل هذا الخيار سيتم التعامل مع كل الجافا الثقيلة من ادسنس وحتى Analytics وغيرها.

ممارسات أخرى ضرورية لتحسين Core Web Vitals

لتحسين تجربة المستخدم, هناك ممارسات ضرورية تزيد من تقييم جوجل لموقعك وترتيبه, وهذه الممارسات كثيرة, وأهم هذه الممارسات والعوامل هي:

  • جعل ألوان الخطوط في الموقع مناسبة للقارئ ولا تكون باهتة.
  • ان تكون أحجام الصور مناسبة, وأبعادها مناسبة, ودقتها عالية.
  • أن تكون العناوين الفرعية في صفحات موقعك مرتبة بشكل تسلسلي تنازلي.
  • استخدام Alt للصور.
  • عدم اخفاء أي محتوى داخل الصفحة.
  • استخدام وسوم noopener أو noreferrer للروابط الخارجية.
  • أن تكون جميع الروابط والأزرار في موقعك لها عناوين واضحة.
  • استخدام HTTPS.
  • التأكد من سلامة ملف Robots.txt وعدم حجبه لأي ملف عن العناكب.
  • الخطوط يجب أن تكون على الأقل 12px وأنا أفضل 18px.
  • الأزرار مثل شبكات التواصل الاجتماعي وغيرها يجب ان تكون على الاقل 48×48x بكسل.

الخلاصة

تحسين Core Web Vitals لا يقتصر فقط على السرعة, وإنما تحسين كامل لنبية الموقع من السرعة والأداء والمظهر والسيو, وهذا ما تريد جوجل إيصاله لكل مستخدميها وأصحاب المواقع, فلو كان الموقع سريع ولكن الالوان فيه سيئة للرؤية, ما فائدة السرعة؟

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

لا تذهب دون ترك تقييمك للموضوع

نجمة واحدةنجمتانثلات نجماتأربع نجماتخمس نجمات (2 votes, average: 3.00 out of 5)
اشترك في قائمتنا البريدية وانضم لمشتركينا ليصلك كل جديد.

2 تعليق في “تحسين Core Web Vitals زيادة سرعة الموقع واداءه ووردبريس

  1. السلام عليكم شكرا لك على المقال المميز

    بخصوص Cloudflare هل تنصح بإستخدامها مع إضافات الكاش متل Wp Rocket او Autoptimize؟

    لأنني ارى انها لا يوجد لها أي تأثير على سرعة الموقع

    وايضا ألا يؤتر تفعيل خيار Delay JavaScript execution على ظهور إعلانات أدسنس؟

    وجزاك الله خيرا

    1. طبعاً للمواقع الكبيرة يحتاج استخدام cloudflare
      اما بالنسبة لخيار Delay JavaScript execution فهو الأفضل لتسريع ظهور الاعلانات وعدم تأثيرها على سرعة الصفحة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *