0Pricing
HTML Academy · درس

التحميل الكسول لإطارات iframe

تأجيل تحميل إطارات iframe خارج الشاشة باستخدام loading=lazy

التحميل الكسول لإطارات iframe درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

ما التحميل الكسول؟

يؤجّل التحميل الكسول تحميل الموارد إلى أن تصبح مطلوبة، أي عندما يقترب العنصر من إطار العرض أو يصبح داخله. وبالنسبة إلى iframes، يعني ذلك عدم تنزيل المستند المضمّن والنصوص البرمجية وملفات CSS والأصول الخاصة به حتى يقترب المستخدم من iframe أثناء التمرير.

السمة loading

أضف loading="lazy" إلى iframe كما يلي: <iframe src="embed.html" loading="lazy">. يحدد المتصفح وقت بدء التحميل وفق خوارزمية تقديرية خاصة به، وعادةً ما يبدأ التحميل قبل دخول iframe إلى إطار العرض بمسافة تتراوح بين 1000 و2500px. ولا حاجة إلى JavaScript.

تأثير الأداء

يمكن أن تحمّل iframes موارد كبيرة؛ فعلى سبيل المثال، يحمّل YouTube نحو 500KB من JavaScript. ويؤدي التحميل الكسول لتضمين فيديو موجود أسفل الجزء الظاهر من الصفحة إلى تقليل تحميل الصفحة الأولي بهذا المقدار تحديداً، ما يحسّن مباشرةً LCP وTime to Interactive للمحتوى الموجود في الجزء الظاهر من الصفحة.

‏loading="eager"

يحمّل loading="eager" iframe فوراً بغض النظر عن موضعه. وهذا هو السلوك الافتراضي. وتفيد إضافة eager صراحةً في السياقات التي يكون فيها التحميل الكسول هو الإعداد الافتراضي، مثل أطر العمل التي تضيف التحميل الكسول على مستوى عام، عندما يجب تحميل iframe محدد فوراً.

بديل Intersection Observer

استخدم IntersectionObserver لمنطق التحميل الكسول المعقد، مثل التحميل عند النقر أو التحميل بناءً على جودة الاتصال. راقب الحاوية التي تحتوي على iframe، ولا تضبط src إلا عندما تدخل إطار العرض. ويمنحك ذلك تحكماً كاملاً في وقت تحميل iframe وما إذا كان سيُحمّل.

const observer = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting) {
    iframe.src = iframe.dataset.src;
    observer.disconnect();
  }
});
observer.observe(iframe);

نمط الواجهة البديلة

اعرض صورة مصغرة ثابتة بدلاً من iframe افتراضياً، وأضف فوقها زر تشغيل. عند النقر، استبدل الصورة المصغرة بـ iframe الحقيقي. وفي نمط الواجهة البديلة الخاص بـ YouTube، اعرض صورة الفيديو المصغرة وحمّل iframe فقط عندما ينقر المستخدم على التشغيل، ما يوفر تكلفة تحميل تضمين YouTube بالكامل.

نمط النقر للتحميل

بالنسبة إلى عمليات التضمين الاجتماعية مثل الجداول الزمنية في Twitter والمنشورات في Instagram، التي تحمّل كميات كبيرة من JavaScript، اعرض زر "تحميل التعليقات". وعند النقر، أدرج iframe. أما المستخدمون الذين لا يتفاعلون فلن يتحملوا تكلفة التحميل. وهذا مثال على التحسين التدريجي للمحتوى الاجتماعي المضمّن.

دعم المتصفحات

تدعم إصدارات Chrome 77 وما بعدها وFirefox 121 وما بعدها السمة loading="lazy" الخاصة بـ iframes. ولا يدعم Safari التحميل الكسول لـ iframes حتى عام 2024. ولتوفير تحميل كسول يعمل عبر المتصفحات المختلفة، استخدم IntersectionObserver كبديل موثوق، فهو يعمل في جميع المتصفحات الحديثة.

منع CLS

احجز مساحة لـ iframes المحمّلة بكسل باستخدام CSS يحدد صراحةً width وheight وaspect-ratio، لمنع إزاحة التخطيط التراكمية (Cumulative Layout Shift، CLS). عند تحميل iframe وظهوره، تكون المساحة مخصصة مسبقاً، لذلك لا يتحرك المحتوى المحيط لاستيعابه.

تتبّع التحليلات

قد تؤثر iframes المحمّلة بكسل في التحليلات: فإذا كان iframe الخاص ببكسل التتبع أو بتضمين التحليلات محمّلاً بكسل، فقد لا يُنفّذ لدى المستخدمين الذين لا يمررون الصفحة إليه. تأكّد من تحميل iframes المهمة للتحليلات وتتبع التحويلات eagerly أو وضعها في الجزء الظاهر من الصفحة.

الجمع بين lazy وsandbox

استخدم lazy وsandbox معاً: <iframe src="embed.html" loading="lazy" sandbox="allow-scripts">. تعمل السمتان بشكل مستقل؛ إذ تتحكم lazy في وقت التحميل، بينما تتحكم sandbox في ما يستطيع iframe فعله. اجمع بينهما لتضمين محتوى الجهات الخارجية بكفاءة وأمان.

اختبار المعرفة

ما نمط الواجهة (facade) لتحميل iframe تحميلًا كسولًا؟

ملخص

يؤدي تحميل iframe تحميلًا كسولًا باستخدام loading="lazy" إلى تأجيل تحميل الموارد حتى يقترب العنصر من إطار العرض، مما يقلل بدرجة كبيرة من زمن تحميل الصفحة الأولي للمحتويات المضمّنة الثقيلة. يوسّع نمط الواجهة (facade) والتحميل عند النقر هذا الأسلوب أكثر، إذ لا يتم تحميل iframe إلا عند تفاعل المستخدم. يوفّر IntersectionObserver تحكمًا متوافقًا مع المتصفحات المختلفة في سيناريوهات التحميل الكسول المعقدة. احجز أبعاد iframe لمنع CLS.

الأسئلة الشائعة

هل درس «التحميل الكسول لإطارات iframe» مجاني؟

نعم — نص درس «التحميل الكسول لإطارات iframe» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «التحميل الكسول لإطارات iframe»؟

تأجيل تحميل إطارات iframe خارج الشاشة باستخدام loading=lazy تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «التحميل الكسول لإطارات iframe»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. عنصر iframe وsrc وsandbox
  2. أمان iframe: Clickjacking وX-Frame-Options
  3. عنصرا embed وobject
  4. التحميل الكسول لإطارات iframe
← العودة إلى HTML Academy