حل مشاكل تضمين فيديوهات يوتيوب في بلوجر: تسريع PageSpeed وتحسين Core Web Vitals والسيو

هل لاحظت أن مقالًا كان سريعًا أصبح بطيئًا بمجرد إضافة فيديو يوتيوب؟ أو ظهرت لك تحذيرات مزعجة في Google PageSpeed Insights مثل: “تقليل تأثير أكواد الجهات الخارجية” أو “ملفات تعريف ارتباط من مصادر خارجية”؟ المشكلة غالبًا ليست في المحتوى ولا في القالب… بل في طريقة تضمين الفيديو نفسها.

في هذا الدليل ستطبق طريقة احترافية تجعل الفيديو لا يحمّل iframe إطلاقًا إلا عندما يطلبه الزائر (بالنقر). النتيجة: تحميل أسرع، تجربة أفضل، درجات أعلى، وتوافق أقوى مع معايير السيو.

اقرأ أيضًا: Cache في بلوجر: تسريع الموقع للزائر المتكرر وتحسين PageSpeed | 2026

ملخص سريع: تضمين يوتيوب بالطريقة التقليدية (<iframe>) يجبر الصفحة على تحميل ملفات وأكواد طرف ثالث فورًا حتى لو لم يشاهد الزائر الفيديو. الحل هو Lazy Load: نضع عنصرًا خفيفًا (div) يظهر كواجهة للفيديو، وعند النقر فقط يتم إنشاء iframe وتشغيل الفيديو. هذا يحسن PageSpeed وCore Web Vitals ويقوي السيو لأنه يقلل الحمل ويُحسن تجربة الصفحة.

لماذا تضمين يوتيوب التقليدي يدمّر سرعة المقال؟

عندما تضع كود تضمين يوتيوب المعتاد <iframe> داخل المقال، فأنت فعليًا تطلب من المتصفح تشغيل “مشروع كامل” داخل الصفحة: اتصالات متعددة بخوادم خارجية، ملفات JavaScript، موارد تتبع، وتحميل عناصر إضافية… وكل ذلك يحدث قبل أن يقرر الزائر هل سيشاهد الفيديو أم لا.

أبرز الأسباب التقنية للبطء:
1) JavaScript ثقيل يُحمّل مبكرًا ويؤثر على سرعة التفاعل.
2) طلبات شبكة خارجية كثيرة تؤخر عرض المحتوى الأساسي.
3) ملفات كوكيز/تتبع قد تظهر في تقارير الخصوصية وأدوات الأداء.
4) ارتفاع وقت “تثبيت” موارد الطرف الثالث (Third-Party) على الأجهزة الضعيفة.

فكرة الحل: لا تُحمّل الفيديو… اعرض واجهة فقط (Lazy Load احترافي)

فلسفة الحل بسيطة: “لا تضع في الصفحة شيئًا ثقيلًا قبل أن تحتاجه.” بدل تضمين iframe مباشرة، سنضع عنصرًا خفيفًا جدًا داخل المقال. هذا العنصر يعرض صورة مصغرة وزر تشغيل بشكل أنيق. وعندما يضغط الزائر، يتم إنشاء iframe وتشغيل الفيديو فورًا.

الفكرة الذهبية: جوجل يحب الصفحات التي تعرض المحتوى الأساسي بسرعة. الفيديو عنصر إضافي… فاجعله “عند الطلب” بدل أن يكون عبئًا منذ البداية.

طريقة التركيب (مرة واحدة): تفعيل المشغل داخل قالب بلوجر

لتفعيل النظام على كامل المدونة، ستضيف كودًا واحدًا في القالب مرة واحدة فقط. بعدها ستستخدم كودًا قصيرًا داخل المقالات.

الخطوة 1: من لوحة بلوجر → المظهر → بجانب “تخصيص” افتح القائمة → تعديل HTML.

الخطوة 2: اضغط Ctrl + F وابحث عن </body> ثم الصق الكود التالي قبل هذا الوسم مباشرة واحفظ.

<script>//<![CDATA[
(function(){if(window.__ytLazyLoaded)return;window.__ytLazyLoaded=!0;var e=".custom-yt-player{all:initial;display:block;position:relative;width:100%;max-width:720px;margin:20px auto;background-color:#e0e0e0;box-sizing:border-box;contain:content;clear:both;font-size:0;line-height:0}.custom-yt-player::before{content:'';display:block;padding-top:56.25%}.custom-yt-player.is-loaded{cursor:pointer;overflow:hidden;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.1);background-size:cover;background-position:center}.custom-yt-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.custom-yt-player .play-button{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%);width:80px;height:56px;background-color:rgba(35,35,35,.8);border-radius:12px;display:flex;justify-content:center;align-items:center;transition:all .2s;animation:custom-pulse 2s infinite;opacity:0}.custom-yt-player.is-loaded .play-button{opacity:1}.custom-yt-player.is-loaded:hover .play-button{background-color:#ff0000;animation:none}.custom-yt-player .play-button::before{content:'';border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #fff;margin-left:5px}@keyframes custom-pulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}100%{transform:translate(-50%,-50%) scale(1)}}",t=document.createElement("style");t.textContent=e,document.head.appendChild(t);function o(){var e=document.querySelectorAll(".custom-yt-player");if(!e.length||!("IntersectionObserver"in window))return;var t=new IntersectionObserver(function(e,o){e.forEach(function(e){if(!e.isIntersecting)return;var t=e.target;if(t.dataset.loaded)return;t.dataset.loaded="1";var a=t.dataset.id,r=["maxresdefault","sddefault","hqdefault","mqdefault"],n=0;function l(){if(n>=r.length)return;var e2=new Image;e2.src="https://i.ytimg.com/vi/"+a+"/"+r[n]+".jpg",e2.onload=function(){if(e2.naturalWidth<200){n++,l();return}t.style.backgroundImage="url('"+e2.src+"')",t.classList.add("is-loaded")},e2.onerror=function(){n++,l()}}l();var i=document.createElement("div");i.className="play-button",t.appendChild(i),t.addEventListener("click",function(){var e=document.createElement("iframe");e.setAttribute("src","https://www.youtube.com/embed/"+a+"?autoplay=1&rel=0"),e.setAttribute("frameborder","0"),e.setAttribute("allow","accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"),e.setAttribute("allowfullscreen",""),t.replaceChildren(e)},{once:!0}),o.unobserve(t)})},{rootMargin:"200px 0px"});e.forEach(function(e){t.observe(e)})}document.addEventListener("DOMContentLoaded",o)})();
//]]>
</script>

بعد الحفظ، أصبح “المشغل” جاهزًا في كل صفحات المدونة.

طريقة الاستخدام اليومية: إضافة فيديو يوتيوب داخل أي مقال بدون iframe

الآن لن تضع iframe داخل المقال. بدل ذلك ستضع هذا الكود الخفيف في المكان الذي تريد ظهور الفيديو فيه.

الخطوة 1: احصل على معرّف الفيديو (ID) من رابط يوتيوب بعد v=.

مثال:
https://www.youtube.com/watch?v=eR3j1ySzL44vo
المعرّف هنا هو: eR3j1ySzLvo

الخطوة 2: في محرر المقال انتقل إلى وضع عرض HTML ثم الصق:

<div class="custom-yt-player" data-id="VIDEO_ID_HERE"></div>

استبدل VIDEO_ID_HERE بالـ ID الحقيقي واحفظ المقال.

تخصيص شكل المشغل بسرعة (اختياري)

تريد تكبير زر التشغيل أو تعديل الشكل؟ ابحث داخل الكود عن: .custom-yt-player .play-button ويمكنك مثلًا تعديل الحجم أو الحواف أو الظلال بسهولة.

مشاكل شائعة وحلولها (Troubleshooting)

1) يظهر مربع رمادي فقط: غالبًا الـ ID غير صحيح أو به مسافة/رمز زائد. انسخ المعرّف بدقة (حروف/أرقام فقط).

2) لا يحدث شيء عند النقر: تأكد أن الكود الشامل موجود داخل القالب قبل </body> وليس داخل المقال.

3) الفيديوهات القديمة (iframe) لم تتحسن: هذا طبيعي. الحل يعمل على الكود الجديد فقط. لتحديث المقالات القديمة استبدل iframe بالكود الخفيف.

Checklist سريع قبل نشر المقال (لأفضل نتيجة PageSpeed)

✅ فيديوهات:
□ لا تستخدم iframe داخل المقال.
□ استخدم custom-yt-player لكل فيديو.
□ لا تضع أكثر من فيديوهات كثيرة جدًا في مقال واحد دون حاجة.

✅ صور:
□ استخدم WebP أو ضغط الصور.
□ أضف Alt Text مناسب.

✅ تقني:
□ اختبر الصفحة على PageSpeed (موبايل أولًا).
□ راقب “Third-Party” هل انخفضت؟

الخلاصة:

تضمين فيديو يوتيوب بالطريقة التقليدية قد يسرق سرعة مقالك ويؤثر على تجربة المستخدم ودرجات الأداء. عبر Lazy Load أنت لا “تخفي” المشكلة… بل تمنعها من البداية: لا iframe إلا عند النقر. هذه خطوة بسيطة لكنها قوية جدًا في بلوجر، خصوصًا للمواقع التي تعتمد على المقالات والسيو.

خطوة عملية الآن: جرّب تطبيق الكود على مقال واحد يحتوي فيديو، ثم افحصه على PageSpeed قبل وبعد. ستلاحظ فرقًا واضحًا خصوصًا في قسم “تقليل تأثير الطرف الثالث”.

أسئلة شائعة حول Lazy Load لفيديوهات يوتيوب في بلوجر

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

هل سيؤثر هذا على الفيديوهات في المقالات القديمة؟
لا يتأثر شيء تلقائيًا. هذه الطريقة تعمل فقط على الفيديوهات التي تستعمل كود custom-yt-player. لتحديث المقالات القديمة استبدل iframe يدويًا.

هل Lazy Load مفيد للسيو فعلًا؟
نعم بشكل غير مباشر لأنه يحسن السرعة وتجربة الصفحة وCore Web Vitals، وهي إشارات مهمة خصوصًا على الأجهزة المحمولة.

لماذا لا أضع الكود الشامل داخل المقال وأخفيه؟
الأفضل وضعه في القالب قبل </body> كي لا يظهر كنص، ولكي يعمل على كل الصفحات بكفاءة ومن دون مشاكل في التحرير أو العرض.

كم فيديو يمكنني وضعه في مقال واحد؟
يمكنك وضع عدة فيديوهات، لكن الأفضل استخدام عدد منطقي يخدم المحتوى. كل فيديو سيحمّل صورته فقط، والتحميل الحقيقي يبدأ بالنقر.