كيفية تحسين موقع الويب الخاص بك لـ Core Web Vitals (Adsense)
نشرت: 2021-03-13السباق لتحسين Core Web Vitals ليس بالأمر السهل. يصبح الأمر أكثر صعوبة إذا كنت تعتمد على برنامج إعلاني مثل Google AdSense لاستثمار موقع الويب الخاص بك.
من المرجح أن تفشل مواقع الويب التي تشغل Google AdSense في اختبار Core Web Vitals أكثر من موقع الويب نفسه بدون Google AdSense عليه. يرجع هذا في الغالب إلى عدد طلبات الجهات الخارجية والأصول التي يضيفها Google AdSense إلى موقع الويب الخاص بك. معظم هذه الأصول غير مُحسَّنة وكبيرة وغير سهلة الاستخدام.
خارج AdSense والأنظمة الأساسية للإعلان ، إذا كان لديك الكثير من الصور غير المحسّنة وجافا سكريبت و CSS خصوصًا في الجزء المرئي من الصفحة ، فمن المحتمل أيضًا أن تفشل في اختبار Core Web Vitals.
إذا كنت تكافح من أجل اجتياز اختبار Core Web Vitals وتحسين إمكانات تصنيف محرك البحث لديك ، فستجد حلولًا عملية في هذه المقالة.
جدول المحتويات
ما هي "حيوية الويب الأساسية"؟
تعد "أساسيات الويب الأساسية" مقاييس مدعومة من Google Lighthouse والتي تحدد كيفية تقديم الموقع لتجربة صفحة جيدة. في حين أن هناك العديد من المقاييس عند إجراء الاختبار ، فإن أهم المقاييس هي أكبر رسم محتوى (LCP) وتأخير الإدخال الأول (FID) وتحويل التخطيط التراكمي (CLS).
أعلنت Google أنه اعتبارًا من مايو 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 مللي ثانية لا يهم ، فقد يكون هذا الشخص على خطأ.
عند اختيار مضيف ويب ، تأكد دائمًا من جعل مركز البيانات أقرب إلى غالبية مستخدمي موقع الويب الخاص بك. يمكنك العثور على مواقعهم من خلال النظر في تحليلاتك. من أين يأتي معظم المستخدمين لديك؟ اختر مركز بيانات أقرب إليهم. كلما اقتربنا كان ذلك أفضل.
لقد لاحظت شخصيًا حدوث تغيير كبير في البيانات الميدانية الخاصة بأساسيات الويب الأساسية الخاصة بموقع الويب بعد تغيير مضيف الويب. لم أفعل شيئًا آخر.
إذا كنت تبحث عن مضيف ويب سريع ، فهناك الكثير من التوصيات التي تحركها الشركات التابعة دون إخلاص. إذا كنت تقوم بتشغيل WordPress ويمكنك شراءه ، فإنني أوصي بشدة باستخدام Kinsta. هم الأفضل لـ WordPress. إذا كنت بحاجة إلى شيء أرخص أو كنت لا تستخدم WordPress ، فإن Cloudways فعالة جدًا أيضًا.
2. استخدم سمة محسّنة وخفيفة الوزن وسريعة
هذه النصيحة مفيدة جدًا بشكل خاص لغير المبرمجين وحتى للمبرمجين الذين لديهم وقت أقل. خاصة إذا كنت تستخدم WordPress حيث يوجد العديد من الخيارات ، فتأكد من استخدام سمة خفيفة الوزن ومُحسّنة للسرعة.
نظرًا لأن المظهر يشبه الهيكل العظمي لموقع الويب الخاص بك ، إذا تم كسر الهيكل العظمي فسيتم كسر الجسم. هذا فقط.
هناك قائمة طويلة بأفضل الممارسات التي يجب أن تبحث عنها في أحد الموضوعات. تعتمد بعض الممارسات السيئة الأكثر شيوعًا بشكل مفرط على JQuery ، وتحميل عدد كبير جدًا من CSS / JS عند عدم الحاجة ، وحجم القالب الكبير ، والمزيد. يمكنك دائمًا استخدام أداة مثل Yellow labs لاختبار العرض التوضيحي.
إذا كنت تستخدم WordPress ، فيمكنك الاطلاع على قائمة أسرع سمات WordPress.
3. تحسين الصور الخاصة بك
الصور رائعة. إنهم يجعلون المحتوى جذابًا للغاية. لكنها يمكن أن تكون عبئًا إذا لم يتم تحسينها. سيؤثر وجود صور كبيرة مثل 3 ميغا بايت بالتأكيد على سرعتك. وإذا كانت هذه الصور مرئية عند زيارة موقعك قبل التمرير ، فستؤثر بالتأكيد على مقياس LCP الخاص بك.
الحقيقة هي أن الصور غير المحسنة تضيف إلى حجم صفحتك. كلما كان حجم الصفحة أكبر ، كلما استغرق تحميلها وقتًا أطول.
أنا شخصياً أفضل تحسين كل صورة قبل تحميلها. لا أستخدم أي خدمة خارجية لتحسين الصورة. ومع ذلك ، إذا كنت تستخدم WordPress أو CMS مشابهًا ، فهناك مكونات إضافية وحلول لتحسين الصور تلقائيًا. هناك أيضًا حلول سحابية بغض النظر عما تستخدمه.
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" 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 و 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 تعني Accelerated Mobile Pages. تتمثل فكرة AMP في تحسين صفحات الويب لتحميلها بشكل أسرع على الهاتف المحمول. وبالطبع ، بدأ مشروع AMP مفتوح المصدر بواسطة Google.
بينما كان الغرض من AMP في الأصل هو تسريع صفحات الجوال ، يمكنه أيضًا تسريع صفحات سطح المكتب.
تعد صفحات AMP أسرع باستمرار من صفحات الجوال أو صفحات سطح المكتب ، وأحيانًا بأكثر من 100٪ وفقًا لملاحظتنا.
إذا كانت الإستراتيجية الوحيدة لتحقيق الدخل لموقعك على الويب هي Google AdSense ، فيمكنك التفكير في تحويل كل موقع الويب الخاص بك إلى AMP. لقد لاحظت شخصيًا أنه في مدونة أمتلكها ، يحول AdSense على صفحات AMP أحيانًا أكثر من تحويله على الجوّال وسطح المكتب!
استنتاج
يمكن أن تساعدك "أساسيات الويب الأساسية" على تحسين موقع الويب الخاص بك للمستخدمين ليس فقط من أجل Google. من الشائع جدًا أن يكون لديك درجة جيدة في اختبار البيانات المعملية ولكن نتيجة بيانات ميدانية سيئة.
هذا يرجع إلى تركيبة المستخدمين لديك. إذا كان معظم المستخدمين من أماكن بها إنترنت بطيء ، فربما تكون قد قمت بعمل جيد في التحسين ولكنك ما زلت تفشل في البيانات الميدانية.