زيادة سرعة الموقع مع وجود الإعلانات | تحسين تجربة المستخدم وترتيب البحث
إعلانات Google AdSense وAd Manager (AdX) تعتبر من أهم مصادر الإيرادات لأي موقع، لكنها قد تؤثر على سرعة تحميل الصفحة وتجربة المستخدم. في هذا الدليل الاحترافي، سنتعلم كيف نحسن سرعة الموقع باستخدام Lazy Load وFirst Visit Detection بحيث تظهر الإعلانات بشكل ذكي وتكون تجربة المستخدم ممتازة، مع تعزيز ترتيب الموقع في نتائج البحث.
 |
| زيادة سرعة الموقع مع وجود الإعلانات | تحسين تجربة المستخدم وترتيب البحث. |
لماذا تحسين سرعة الموقع وتجربة المستخدم مهم؟
سرعة الموقع وتجربة المستخدم من أهم عوامل تصدر نتائج البحث في Google. المواقع التي تحمل بسرعة وتعرض محتواها بسلاسة تحصل على:
- ترتيب أعلى في نتائج البحث
- معدل ارتداد أقل
- معدل تفاعل أعلى من الزوار
- إيرادات أكبر من الإعلانات بسبب عرضها بشكل مناسب
باستخدام طريقة Lazy Load للإعلانات، يمكن تحميل الإعلانات فقط عند الحاجة، مما يقلل من وقت التحميل الأولي ويحسن Core Web Vitals.
تحسين إعلانات Google AdSense
الكود التقليدي لإعلانات AdSense غالبًا يكون بالشكل الى هتشوفة دلوقتى ولازم تحذف الجزء الى يخص الجفا سكربت من كل الوحدات الى هو فى بداية الاعلان كما ترى فى التالى: الاسكربت فقط اما باقى الاعلان هيكون موجود عادى فى كل الوحدات اول سطر بس الجفا تحذفة منه لان لو سبتة يبقى لغيت وظيفة الاسكربت الخص بالسرعة.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXX"
data-ad-slot="YYYYYYYYYY"
data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
الكود الجديد يستخدم Lazy Load وFirst Visit Detection لتحميل الإعلانات فقط بعد تفاعل المستخدم في أول زيارة، ثم التحميل الفوري في الزيارات التالية:
<script>
(function() {
var ADSENSE_URL = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
var STORAGE_KEY = "adsense_first_visit_done";
var scriptLoaded = false;
function loadAdsense() {
if (scriptLoaded) return;
scriptLoaded = true;
var adsScript = document.createElement("script");
adsScript.src = ADSENSE_URL;
adsScript.async = true;
document.head.appendChild(adsScript);
(adsbygoogle = window.adsbygoogle || []).push({});
}
function firstInteractionLoad() {
loadAdsense();
localStorage.setItem(STORAGE_KEY, "yes");
window.removeEventListener("scroll", firstInteractionLoad);
window.removeEventListener("mousemove", firstInteractionLoad);
window.removeEventListener("touchstart", firstInteractionLoad);
window.removeEventListener("keydown", firstInteractionLoad);
}
if (!localStorage.getItem(STORAGE_KEY)) {
window.addEventListener("scroll", firstInteractionLoad, { passive: true });
window.addEventListener("mousemove", firstInteractionLoad);
window.addEventListener("touchstart", firstInteractionLoad, { passive: true });
window.addEventListener("keydown", firstInteractionLoad);
} else {
loadAdsense();
}
})();
</script>
بهذا الشكل:
- الإعلانات لا تتحمل إلا بعد تفاعل المستخدم في أول زيارة.
- الزيارات التالية تظهر الإعلانات فورًا بدون أي تأخير.
- تحافظ على سرعة تحميل الموقع وتجربة المستخدم.
تحسين إعلانات Google Ad Manager (AdX/GPT)
الكود التقليدي لإعلانات Ad Manager يكون عادةً بالشكل التالى الى هتشوفة دلوقتى وملاحظة لازم تحذف الجفا سكربت من كل الوحدات ادكس لانو لو موجودة هتلغى تشغيل الاسكربت الخاص بالسرعة وهى بتكون على الشكل هذا احذفها:
<link as='script' href='https://securepubads.g.doubleclick.net/tag/js/gpt.js' rel='preload'/> <script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>
الكود المحسن يسمح بتحميل الإعلانات بعد أول تفاعل للمستخدم لأول زيارة، ثم التحميل السريع في الزيارات التالية:
<script>
(function() {
var GPT_URL = "https://securepubads.g.doubleclick.net/tag/js/gpt.js";
var STORAGE_KEY = "ads_first_visit_done";
var scriptLoaded = false;
function loadGPT() {
if (scriptLoaded) return;
scriptLoaded = true;
var gptScript = document.createElement("script");
gptScript.src = GPT_URL;
gptScript.async = true;
document.head.appendChild(gptScript);
}
function firstInteractionLoad() {
loadGPT();
localStorage.setItem(STORAGE_KEY, "yes");
window.removeEventListener("scroll", firstInteractionLoad);
window.removeEventListener("mousemove", firstInteractionLoad);
window.removeEventListener("touchstart", firstInteractionLoad);
window.removeEventListener("keydown", firstInteractionLoad);
}
if (!localStorage.getItem(STORAGE_KEY)) {
window.addEventListener("scroll", firstInteractionLoad, { passive: true });
window.addEventListener("mousemove", firstInteractionLoad);
window.addEventListener("touchstart", firstInteractionLoad, { passive: true });
window.addEventListener("keydown", firstInteractionLoad);
} else {
loadGPT();
}
})();
</script>
بهذا الأسلوب:
- الإعلانات تظهر بسرعة بعد أول تفاعل للمستخدم في الزيارة الأولى.
- الزيارات التالية تشاهد الإعلانات فورًا.
- تحافظ على سرعة الموقع وتجربة المستخدم، وهو عامل مهم لترتيب الموقع في البحث.
الخلاصة واهمية استخدام الطريقة
باستخدام أسلوب Lazy Load وFirst Visit Detection للإعلانات، ستحصل على:
- تحسين سرعة التحميل الأولي للموقع.
- تجربة مستخدم سلسة وممتازة.
- تحسين Core Web Vitals وترتيب أفضل في نتائج البحث.
- إعلانات تظهر بطريقة ذكية، وتحافظ على إيرادات الموقع.
يمكنك تطبيق هذه الأكواد مباشرة على موقعك HTML أو CMS بسهولة، والنتيجة موقع سريع، احترافي، ومتوافق مع SEO، مع الحفاظ على الإيرادات من الإعلانات بجانب تجربة مستخدم جيدة وتصدر فى نتائج البحث.
