التوافق مع المتصفح
- 77
- 79
- 121
- 16.4
يعمل التحميل الكسول لعناصر <iframe>
على تأجيل تحميل إطارات iframe خارج الشاشة
إلى أن يتنقّل المستخدم بالقرب منها. يؤدي ذلك إلى حفظ البيانات وتسريع تحميل
الأجزاء الأخرى من الصفحة وتقليل استخدام الذاكرة.
كما هي الحال في التحميل الكسول للصور،
استخدِم السمة loading
لإعلام المتصفّح بأنّك تريد استخدام التحميل الكسول لإطار iframe.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
يعرض هذا العرض التوضيحي لـ <iframe loading=lazy>
فيديوهات مضمّنة
بالتحميل الكسول:
ما هي أهمية إطارات iframe ذات التحميل الكسول؟
تغطي التضمينات التابعة لجهات خارجية نطاقًا واسعًا من حالات الاستخدام، بدءًا من مشغّلات الفيديو ووصولاً إلى مشاركات وسائل التواصل الاجتماعي والإعلانات. غالبًا ما لا يظهر هذا المحتوى على الفور في إطار العرض الخاص بالمستخدم، ولكن يظلّ المستخدمون يدفعون تكلفة تنزيل البيانات وJavaScript المكلِّف لكل إطار، حتى لو لم يقموا بالتمرير إليه.
![توفير البيانات نتيجة استخدام التحميل الكسول لإطار iframe في إطار iframe في هذا المثال، يؤدي التحميل السريع إلى جذب 3 ميغابايت، بينما لا يؤدي التحميل الكسول إلى سحب هذا الرمز إلى أن يمرّر المستخدم إلى موضع أقرب إلى إطار iframe.](https://web.dev/static/articles/iframe-lazy-loading/image/data-savings-using-ifram-721849ff3b329.png?authuser=6&hl=ar)
استنادًا إلى الأبحاث التي أجرتها Chrome حول إطارات iframe التلقائية التحميل الكسول خارج الشاشة لمستخدمي ميزة "توفير البيانات"، يمكن أن تؤدي إطارات iframe التي يتم تحميلها ببطء إلى توفير متوسط البيانات بنسبة تتراوح بين 2% و3% وانخفاض بنسبة 1% إلى %2 وتخفيض نسبة سرعة عرض أول محتوى مرئي بنسبة 2% وتحسينات مهلة الاستجابة الأولى (FID) عند نسبة 95%.
يمكن أن تؤدي أيضًا إطارات iframe التي يتم تحميلها ببطء خارج الشاشة إلى تحسين سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) في صفحتك. وبما أنّ إطارات iframe تحتاج غالبًا إلى قدر كبير من معدل نقل البيانات لتحميل جميع مواردها الفرعية، يمكن لإطارات iframe ذات التحميل الكسول خارج الشاشة تقليل تزايد الطلب على معدل نقل البيانات على الأجهزة المقيَّدة بالشبكة، ما يوفّر معدّل نقل بيانات أكبر لتحميل الموارد التي تساهم في سرعة LCP للصفحة.
كيف تعمل ميزة التحميل الكسول المضمَّنة في إطارات iframe؟
تسمح السمة loading
للمتصفّح بتأجيل تحميل إطارات iframe والصور خارج الشاشة إلى أن يمرّر المستخدمون بالقرب منها. تتيح القيمة loading
استخدام قيمتَين:
lazy
: مناسبة للتحميل الكسولeager
: ليست مرشحة بشكل جيد للتحميل الكسول. تحميل في الحال.
يعمل استخدام السمة loading
على إطارات iframe على النحو التالي:
<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
width="600"
height="400"></iframe>
عدم تحديد السمة له نفس تأثير تحميل المورد بشكل صريح.
إذا كنت بحاجة إلى إنشاء إطارات iframe بشكل ديناميكي باستخدام JavaScript، سيكون الإعداد iframe.loading = 'lazy'
على العنصر متوافقًا أيضًا:
var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);
كيف تؤثر تضمينات iframe الشائعة التحميل الكسول في تجربة المستخدم؟
سيؤدي جعل إطارات iframe ذات التحميل الكسول هي الإعدادات التلقائية إلى زيادة استجابة المواقع الإلكترونية. توضح الأمثلة التالية التحسينات في وقت التفاعل وتوفير البيانات للإطارات المضمَّنة في الوسائط، إلا أنّ إطارات iframe الإعلانية ذات التحميل الكسول يمكن أن توفّر مزايا مماثلة.
YouTube
توفّر الفيديوهات المضمَّنة على YouTube والتي يتم تحميلها ببطء حوالى 500 كيلوبايت عند التحميل الأوليّ للصفحة:
<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
loading="lazy"
width="560"
height="315"
frameborder="0"
allow="accelerometer; autoplay;
encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen></iframe>
![تمكّن Chrome.com من تقليل وقت التفاعل لمدة 10 ثوانٍ من خلال إطارات iframe ذات التحميل الكسول خارج الشاشة بتضمينها للفيديو على YouTube.](https://web.dev/static/articles/iframe-lazy-loading/image/chromecom-achieved-10-s-80c4aa3655294.png?authuser=6&hl=ar)
توفر عمليات التضمين في Instagram كتلة من الترميز ونصًا برمجيًا يُدخل إطار iframe في صفحتك. يؤدي التحميل الكسول لإطار iframe هذا إلى تجنب الحاجة إلى تحميل كل النصوص البرمجية التي يحتاجها التضمين، ويمكن توفير حوالي 100 كيلوبايت عند التحميل الأولي. وبما أنّ هذه التضمينات غالبًا ما تظهر أسفل إطار العرض في معظم المقالات، فإنّ هذا الأمر مناسب لإجراء التحميل الكسول لإطار iframe.
Spotify
يمكن أن توفر تضمينات Spotify التحميل الكسول 514 كيلوبايت عند التحميل الأولي.
<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
loading="lazy"
width="300"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"></iframe>
مكوّنات Facebook الإضافية المخصّصة للتواصل الاجتماعي
تتيح المكوّنات الإضافية الاجتماعية في Facebook للمطوّرين تضمين محتوى Facebook في صفحات الويب لديهم. وأكثرها شيوعًا هو المكوّن الإضافي "أعجبني"، وهو زر يعرض عدد المستخدمين الذين "أبدىون إعجابهم" بالصفحة. بشكل تلقائي، يؤدي تضمين المكوّن الإضافي "أعجبني" في صفحة ويب باستخدام حزمة JavaScript JSSDK إلى الحصول على 215 كيلوبايت تقريبًا من الموارد، منها 197 كيلوبايت من هذه الموارد. غالبًا ما يظهر المكوّن الإضافي في نهاية المقالة أو بالقرب من نهاية الصفحة، لذا فإنّ تحميله بحذر عندما يكون خارج الشاشة قد لا يكون على المستوى الأمثل.
![زر "أعجبني" في Facebook](https://web.dev/static/articles/iframe-lazy-loading/image/facebook-button-e0eb339d5d796.png?authuser=6&hl=ar)
بفضل المهندس "ستويان ستيفانوف"، أصبحت جميع المكوّنات الإضافية الاجتماعية على Facebook
تتوافق الآن مع معيار iframe
للتحميل الكسول.
أصبح الآن بإمكان المطوّرين الذين فعّلوا ميزة التحميل الكسول من خلال إعدادات data-lazy
الخاصة بالمكوّنات الإضافية منع تحميل هذه المكوّنات الإضافية إلى أن يمرّر المستخدم المحتوى في مكان قريب. ويسمح هذا الإجراء بمواصلة عمل التضمين للمستخدمين الذين يحتاجون إليه،
مع توفير البيانات للمستخدمين الذين لا ينتقلون إلى أسفل الصفحة. نأمل أن تكون هذه الميزة هي الأولى من بين العديد من التضمينات التي تستكشف ميزة التحميل الكسول لإطار iframe الموحّد في
الإنتاج.
التحميل الكسول لإطار iframe على جميع المتصفّحات
يمكنك تطبيق التحميل الكسول لإطار iframe على موقعك الإلكتروني كتحسين تدريجي.
المتصفّحات التي تتوافق مع loading=lazy
على إطارات iframe باستخدام التحميل الكسول لإطار iframe
والمتصفّحات التي لا تتيح السمة loading
تتجاهله بأمان.
يمكنك أيضًا استخدام التحميل الكسول لإطارات iframe خارج الشاشة باستخدام مكتبة JavaScript lazysizes. وقد تحتاج إلى إجراء ذلك في الحالات التالية:
- تتطلّب هذه الطريقة مزيدًا من الحدود الدنيا المخصّصة للتحميل الكسول، مقارنةً بعروض التحميل الكسول الموحّدة.
- نريد أن نقدّم للمستخدمين تجربة متّسقة باستخدام التحميل الكسول لإطار iframe على جميع المتصفّحات.
<script src="lazysizes.min.js" async></script>
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
width="600"
height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
استخدِم النمط التالي لرصد التحميل الكسول وجلب الحجم الكسول عندما لا يكون متاحًا:
<iframe frameborder="0"
class="lazyload"
loading="lazy"
allowfullscreen=""
width="600"
height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
<script>
if ('loading' in HTMLIFrameElement.prototype) {
const iframes = document.querySelectorAll('iframe[loading="lazy"]');
iframes.forEach(iframe => {
iframe.src = iframe.dataset.src;
});
} else {
// Dynamically import the LazySizes library
const script = document.createElement('script');
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
document.body.appendChild(script);
}
</script>
هل هناك استثناءات لاستخدام طريقة \"التحميل الكسول\" في إطار iframe خارج الشاشة؟
في تجربة مبكرة تهدف إلى استخدام إطارات iframe ذات التحميل الكسول تلقائيًا لمستخدمي ميزة "توفير البيانات" في Chrome حصلَت على استثناء لإطارات iframe المخفية، غالبًا ما يتم استخدامها للاتصالات أو التحليلات. وقد تم منع التحميل الكسول، وتم تحميلها دائمًا لمنع إيقاف تلك الميزات.
لا تطبّق السمة loading
هذه الإرشادات، لذلك على المطوِّر دائمًا
اختيار ما يتم تحميله من خلال التحميل الكسول. يجب أن يتم دائمًا الالتزام بالسمة loading
وفقًا لحدود المسافة وخيارات المتصفّح الأخرى (مثل الطباعة).
المراجِع
للاطّلاع على مزيد من الأفكار التي تستخدم طريقة التحميل الكسول للمحتوى، اطّلِع على مجموعة التحميل الكسول للصور والفيديوهات على موقع web.dev.
شكرًا لـ "دوم فارولينو" و"سكوت ليتل" و"حسين دجيرده" و"سايمون بيترز" و"كايس باسك" و"جو ميدلي" و"ستويان ستيفانوف" على مراجعاتهم.