كيفية تحسين موقع الويب الخاص بك لـ Core Web Vitals (Adsense)

إن السباق نحو تحسين Core Web Vitals ليس بالأمر السهل. ويصبح الأمر أكثر صعوبة إذا اعتمدت على برنامج إعلاني مثل Google AdSense لتحقيق الدخل من موقعك على الويب.

إن المواقع التي تستخدم Google AdSense أكثر عرضة للفشل في اختبار Core Web Vitals بعشر مرات من نفس الموقع الذي لا يستخدم Google AdSense. ويرجع هذا في الغالب إلى عدد طلبات الجهات الخارجية والأصول التي يضيفها Google AdSense إلى موقعك على الويب. معظم هذه الأصول غير مُحسَّنة وكبيرة وغير سهلة الاستخدام.

خارج AdSense ومنصات الإعلان، إذا كان لديك الكثير من الصور غير المحسّنة وJavaScript وCSS خاصة أعلى الطية، فمن المرجح أيضًا أن تفشل في اختبار Core Web Vitals.

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

ما هي "حيوية الويب الأساسية"؟

Core Web Vitals هي مقاييس مدعومة من Google Lighthouse لتحديد مدى نجاح الموقع في تقديم تجربة صفحة جيدة. وفي حين أن هناك العديد من المقاييس عند تشغيل اختبار، فإن المقاييس الأكثر أهمية هي Largest Contentful Paint (LCP) وFirst Input Delay (FID) وCumulative Layout Shift (CLS).

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

باختصار، يمكنك القول أن Core Web Vitals لم يكن من المفترض أن يكون بمثابة رعب لمشرفي المواقع، بل وسيلة لتحسين تجربة الصفحة الخاصة بمواقع الويب.

أكبر عنصر مرئي في الصفحة (LCP) : يقيس هذا المؤشر الوقت اللازم لتحميل أكبر صورة أو نص مرئي في صفحة الويب. إذا تم تحميل أكبر صورة أو نص مرئي بسرعة، يُفترض أن باقي الصور والنصوص ستُحمّل بسرعة أيضًا. يُعتبر وقت التحميل المطلوب لاجتياز هذا المؤشر 2.5 ثانية.

تأخير الإدخال الأول (FID) : يقيس FID تفاعلية صفحة الويب. ويُحدد هذا التأخير بالمدة التي يستغرقها المتصفح لبدء معالجة معالجات الأحداث بعد نقر المستخدم على موقعك. ويُطلق على هذا عادةً اسم "الانطباع الأول" لموقعك الإلكتروني. والمدة الزمنية المطلوبة لتجاوز هذه المرحلة هي 100 مللي ثانية.

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

كيفية تحسين موقع الويب الخاص بك لـ Core Web Vitals

اتبع الخطوات التالية لتحسين موقع الويب الخاص بك:

1. ابدأ بمضيف ويب سريع

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

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

حاول اختبار كيفية استجابة مستضيف الويب الخاص بك لشبكات 3G أو 2G بدلاً من 4G. لأنه إذا حصلت على عدد كبير من المستخدمين المتصلين عبر 3G أو 2G، فإن ذلك يضيف إلى درجة Core Web Vitals الخاصة بك. لذا، فإن كل مللي ثانية مهمة. والفرق بين الحصول على 100 مللي ثانية في FID والحصول على 101 مللي ثانية هو أنه مع 100 مللي ثانية، تنجح ولكن مع 101 مللي ثانية تفشل. لذا، إذا أخبرك شخص ما أن 1 مللي ثانية لا تهم، فقد يكون هذا الشخص مخطئًا.

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

لقد لاحظت شخصيًا تغييرًا كبيرًا في بيانات حقل Core Web Vitals الخاصة بموقع ويب بعد تغيير مستضيف الويب. ولم أفعل أي شيء آخر.

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

2. استخدم قالبًا خفيف الوزن ومُحسَّنًا للسرعة

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

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

هناك قائمة طويلة من أفضل الممارسات التي يجب مراعاتها عند اختيار قالب. من أكثر الممارسات السيئة شيوعًا: الاعتماد المفرط على مكتبة jQuery، وتحميل كميات كبيرة من ملفات CSS/JS دون الحاجة إليها، وكبر حجم القالب، وغيرها. يمكنك دائمًا استخدام أداة مثل Yellow Labs لاختبار العرض التوضيحي.

إذا كنت تستخدم ووردبريس، يمكنك الاطلاع على قائمة أسرع قوالب ووردبريس.

3. تحسين صورك

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

الحقيقة هي أن الصور غير المحسّنة تزيد من حجم صفحتك. فكلما كان حجم الصفحة أكبر، كلما استغرق تحميلها وقتًا أطول.

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

4. قم بإزالة أو تقليل حجم الصور الخلفية

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

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

5. استخدم التخزين المؤقت للمتصفح

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

بالنسبة لمستخدمي WordPress، يمكن لمعظم مكونات التخزين المؤقت أن تساعدك في تحقيق ذلك.

6. تصغير حجم JavaScript وتأجيل JavaScript غير المستخدم

على الرغم من أن JavaScript مدهش، إلا أنه غالبًا ما يعيق عملية العرض. وهذا يعني أنه قد يؤثر على وقت التحميل وفي النهاية على FID.

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

بالنسبة لمستخدمي ووردبريس، هناك إضافات مثل Autoptimize و WP Rocket وغيرها التي يمكنها القيام بذلك نيابة عنك.

7. تعيين سمة حجم AdSense

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

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

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

فيما يلي مثال لوحدة إعلانية متجاوبة استخدمتها في مدونتي أسفل العنوان مباشرةً. استبدلتُ مُعرّف الناشر ومساحة الإعلان بـ XXXXXX. لاحظتُ أنني أضفتُ سمة الارتفاع (الحد الأدنى للارتفاع: 300 بكسل). بمجرد أن فعلتُ ذلك، اختفت جميع مشاكل CLS نهائيًا.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

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

8. قم بتعيين سمة الحجم لصورك والوسائط الأخرى

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

يمكنك تجنب كل ذلك عن طريق تعيين سمة الحجم لملفات الوسائط الخاصة بك. وسيسعد مقياس CLS الخاص بك بذلك.

9. تحميل الصور بشكل كسول.

ربما تكون قد اطلعت على نصيحة PageSpeed ​​Insight بتأجيل تحميل الصور خارج الشاشة . وهذا يعني ببساطة تحميل الصور بشكل تدريجي.

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

وسوف يساعد هذا على وجه الخصوص في تحسين LCP.

10. تحسين CSS عن طريق تصغير وتوليد CSS الحرجة

CSS هو ما يجعل موقع الويب يبدو رائعًا، ولكن ملف CSS كبير الحجم يمكن أن يشكل مشكلة كبيرة لأنه سيؤخر عرض الصفحة للمستخدم.

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

يمكن أن تساعد لغة CSS الحرجة في تحميل لغة CSS الضرورية لتحميل الصفحة فقط، بينما يمكن تحميل بقية لغة CSS بشكل غير متزامن.

يمكن أن يساعدك أيضًا تصغير حجم CSS عن طريق إزالة المسافات البيضاء والتعليقات لتقليل حجم الملف.

يمكنك أيضًا إزالة ملفات CSS غير المستخدمة . إذا كانت الخدمة التي تستخدمها تُحمّل ملفات CSS غير مستخدمة، فمن الآمن إزالتها.

إذا كنت تستخدم ووردبريس، فهناك إضافات مثل WP Rocket و LiteSpeed ​​Cache و FlyingPress وغيرها التي يمكن أن تساعدك في تحقيق ذلك.

11. تنفيذ التحميل الذكي لبرنامج AdSense

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

يتعلق الأمر بتحميل AdSense بطريقة ذكية. لن يتم تحميل AdSense حتى يتخذ المستخدم إجراءً مثل التمرير أو النقر. سيؤدي هذا إلى تحسين وقت التحميل بشكل كبير وأي عناصر أساسية للويب تتأثر بـ AdSense.

توجد العديد من إضافات ووردبريس التي تُساعدك على القيام بذلك، مثل WP Rocket و Flying Scripts. هذه الطريقة، على حد علمي، لا تُخالف سياسة جوجل أدسنس.

ملاحظة: على الرغم من أن هذه الطريقة قد تُحسّن سرعة الصفحة المُدركة وترتيبها، إلا أنها قد تؤثر على أرباحك من AdSense. أنصحك بإجراء تجربة للتأكد من جدواها.

12. استخدم خط System Stack إذا كان بإمكانك

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

في حين يستمر تحسن خطوط Google وFont Awesome، فإن استخدام خطوط النظام يوفر تحسنًا كبيرًا. على الرغم من أنها ليست خيالية حسب الجهاز.

13. استخدم CDN

إذا كان لديك مستخدمون من أجزاء مختلفة من العالم، فإن استخدام شبكة CDN يمكن أن يساعد في تحسين سرعتك وتحسين مقاييس Core Web Vitals بشكل غير مباشر.

في شرح مبسط، تقوم شبكة CDN بعمل نسخ عديدة من موقعك على الويب وتخزينها في نقاط تواجد مختلفة (POPs) في أجزاء مختلفة من العالم. عندما يطلب شخص ما موقعك على الويب، تقدم لك الشبكة موقعك من أقرب موقع.

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

يمكنك الاطلاع على أفضل شبكات توصيل المحتوى (CDNs) المتاحة.

14. إعداد جلب DNS مسبقًا

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

سيقوم الجلب المسبق لـ DNS بجلب DNS مسبقًا قبل استدعائه. بحيث يتم تحميله في لحظة عند استدعائه أخيرًا.

15. تحسين البرامج النصية للجهات الخارجية

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

يمكنك استبدال الحل بطلبات الطرف الثالث التي تؤدي إلى إبطاء موقعك بحل أفضل.

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

16. قم بإزالة AdSense من أعلى الصفحة

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

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

إذا كنت لا تريد إزالته، فيمكنك تأخيره يدويًا أو بمساعدة مكون إضافي مثل Flying Scripts.

17. التبديل إلى AMP

AMP تعني صفحات الجوال المُسرّعة. تهدف AMP إلى تحسين صفحات الويب لتحميلها بشكل أسرع على الأجهزة المحمولة. وبالطبع، بدأ مشروع AMP مفتوح المصدر من قِبل جوجل.

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

تظل صفحات AMP أسرع باستمرار من صفحات الأجهزة المحمولة أو سطح المكتب، وفي بعض الأحيان بنسبة تزيد عن 100% وفقًا لملاحظاتنا.

إذا كانت استراتيجية تحقيق الدخل الوحيدة لموقعك هي Google AdSense، فيمكنك التفكير في تحويل موقعك بالكامل إلى AMP. لقد لاحظت شخصيًا أنه في إحدى المدونات التي أمتلكها، تحقق AdSense على صفحات AMP أحيانًا تحويلات أعلى من تلك الموجودة على الأجهزة المحمولة وسطح المكتب!

خاتمة

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

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