سيبدأ آخر تحديث لمؤشرات الويب الحيوية الأساسية من جوجل في التأثير على نتائج البحث اعتبارًا من يونيو 2021. وإذا كانت نتيجة إحصاءات PageSpeed لموقع الويب الخاص بك منخفضة جدًا ، فعليك القلق بشأن ذلك. ولكن ماذا لو كانت سرعة موقعك جيدة ، ولكن بعد إضافة كود إعلانات أدسنس ، تنخفض سرعة الموقع؟ لا يمكنك حتى تحسين خوادم أدسنس . ستناقش هذه المقالة كيفية تحميل إعلانات أدسنس دون التأثير على سرعة موقع الويب.
لذا فأنت تريد جني الأرباح من خلال تجربة مستخدم جيدة على موقع الويب لتنمية موقع الويب. عليك أن تهتم بإعلانات أدسنس وسرعة الموقع.
كيف تتحقق من أداء سرعة الموقع؟
هناك العديد من الأدوات المجانية والمميزة المتاحة للتحقق من سرعة الموقع. قد تكون على دراية بالفعل بـ Google Page Speed Insights و GTmetrix و Pingdom Tools وما إلى ذلك. ولكن السؤال المهم هنا هو ، ما هي سرعة الصفحات التي يجب عليك التحقق منها؟
يتحقق معظم المدونين من سرعة صفحتهم الرئيسية ويتم ذلك ، ولكن لم يتم ذلك يا سيدي ، يجب عليك التحقق من سرعة الصفحة لجميع المحتويات المتاحة. لكن لا يمكن التحقق من سرعة جميع المنشورات والصفحات. الحل هو التحقق من
- سرعة الصفحة الرئيسية ،
- سرعة نشر المدونة ،
- سرعة الصفحة.
افترض أن لديك أي صفحات أخرى مثل صفحات المنتج أو منشورات المدونة التي تحتوي على وسائط وإطارات مضمنة وما إلى ذلك. يمكنك إجراء فحص سرعة لهذه الصفحات أيضًا. يمكنك التحقق من سرعة كل هذه الصفحات قبل وبعد إضافة إعلانات أدسنس .
كيفية تحميل إعلانات Adsense دون المساس بسرعة موقع الويب؟
كانت سرعة موقع الويب الخاص بي قبل تطبيق أدسنس 95+ للجوال و 100 لأجهزة سطح المكتب في أداة PageSpeed Insights. ولكن عندما أضفت إعلانات أدسنس ، تم تخفيضها إلى 30 إلى 40 للجوال و 80 لسطح المكتب. أنا أدير مدونات Blogger بالإضافة إلى مواقع WordPress. اريد حلا مناسبا لكليهما.
عندما ننشئ إعلان أدسنس ، سيبدو كما يلي.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Large Rectangle -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>في الكود أعلاه ، يبدأ تحميل ملف adsbygoogle.js بشكل غير متزامن مع المحتوى دون حظر تحميل المحتوى. يتسبب هذا في تأخير تحميل المحتوى ، وبالتالي يستغرق موقع الويب وقتًا أطول للتحميل.
ولكن ما سنفعله بهذا البرنامج النصي هو أنه سيتم تحميل الإعلانات بعد أن يصبح موقع الويب جاهزًا للتفاعل مع المستخدم. وعندما يقوم المستخدم بالتمرير ، انقر ، أو بعد 5 ثوانٍ من عدم الإدخال.
أولاً ، سنقوم بإزالة adsbygoogle.js من جميع الوحدات الإعلانية بالصفحة ، كما هو موضح أدناه.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
يجب أن تبدو كل كتلة الإعلانات مشابهة لهذا. لقد اخترنا كتلة إعلانية بحجم 336 × 280 بحيث يمكن استخدامها للأجهزة المحمولة وأجهزة سطح المكتب.
<!-- Large Rectangle -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>يمكنك إضافة البرنامج النصي التالي في قسم التذييل في موقع الويب الخاص بك لتعزيز نقاط إحصاءات PageSpeed الخاصة به. ولكن سيكون من الأفضل تجنب الإعلانات سريعة الاستجابة لأن هذا سيؤدي إلى نتيجة تراكمية ضخمة لتغيير التخطيط . يمكنك أيضًا عرض إعلانات أدسنس المتجاوبة باستخدام هذه الطريقة .
<script id='flying-scripts' type='text/javascript'>const loadScriptsTimer=setTimeout(loadScripts,5*1000);const userInteractionEvents=["mouseover","keydown","touchstart","touchmove","wheel"];userInteractionEvents.forEach(function(event){window.addEventListener(event,triggerScriptLoader,{passive:!0})});function triggerScriptLoader(){loadScripts();clearTimeout(loadScriptsTimer);userInteractionEvents.forEach(function(event){window.removeEventListener(event,triggerScriptLoader,{passive:!0})})}function loadScripts(){document.querySelectorAll("script,iframe[data-type='lazy']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-src"))})}</script>
أسفل هذا البرنامج النصي ، الصق البرنامج النصي لعرض إعلانات أدسنس بنفس التنسيق الموضح أدناه. لقد قمنا بتغيير src إلى data-src لتحميل إعلانات أدسنس بعد تفاعل المستخدم. يرجى ملاحظة أنه يجب عليك إزالة الأسطر التالية جميع الإعلانات التي تحظر بدلاً من كل هؤلاء. الصق ما يلي
<script data-ad-client='ca-pub-XXXXXXXXXXXXXXXX' data-src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' data-type='lazy'></script>
يمكن لمستخدم WordPress إضافة الكود التالي في قسم التذييل باستخدام لوحة السمة. إذا كان الموضوع لا يدعم جافا سكريبت مخصص للتذييل ، فقم بإضافته يدويًا. لهذا ، عليك التمرير إلى المظهر> المظهر> تحرير السمة ثم البحث عن footer.php. الآن قم بلصق النصين أعلاه (كلاهما) قبل علامة </body> مباشرة. للاحتفاظ بهذه التغييرات حتى بعد تحديثات السمة ، استخدم سمة فرعية . حاول إنشاء سمة فرعية لموقع الويب الخاص بك على ووردبريس.
يمكن لمستخدمي بلوجر تعديل سمة بلوجر ولصق النص أعلاه في ملف المظهر أعلى علامة </body>. بعد القيام بذلك ، يمكنك التحقق من سرعة الموقع. يمكنك أيضًا قراءة دليلنا لزيادة سرعة مدونة بلوجر .
آمل أن تجد هذه المقالة مفيدة ؛ في حالة وجود أي شك أو استفسارات أو ملاحظات ، فلا تتردد في طرحها في قسم التعليقات الموضح أدناه. اشكرك!