كيفية تحسين موقع الويب الخاص بك لـ 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):يقيس 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. إنها الأفضل لـ WordPress. إذا كنت بحاجة إلى شيء أرخص أو كنت لا تستخدم WordPress، فإليك Cloudways وهي فعالة جدًا أيضًا.

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

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

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

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

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

3. تحسين صورك

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

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

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

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

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

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

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

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

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

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

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

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

بالنسبة لمستخدمي WordPress، هناك مكونات إضافية مثل 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 غير مستخدمة، فمن الآمن إزالتها.

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

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

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

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

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

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

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

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

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

13. استخدم CDN

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

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

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

يمكنك التحقق من أفضل شبكات CDN هناك.

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

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

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

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

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

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

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

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

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

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

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

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

AMP تعني صفحات الجوال المتسارعة. فكرة AMP هي تحسين صفحات الويب لتحميلها بشكل أسرع على الجوال. وبالطبع، AMP المصدر المفتوح تم البدء بالمشروع بواسطة Google.

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

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

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

الخاتمة

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

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