جزء الصور والفيديو في يمكن أن تكون الحمولة المعتادة لموقع الويب كبيرة. لسوء الحظ، قد لا يكون الأطراف المعنية في المشروع على استعداد لخفض أي موارد إعلامية من التطبيقات. مثل هذه العقبات محبطة، خاصةً عندما تريد جميع الأطراف المعنية تحسين أداء الموقع، ولكن لا يمكنهم الاتفاق على كيفية الوصول إلى الهدف. لحسن الحظ، يُعد التحميل الكسول أحد الحلول التي تقلل من حمولة الصفحة الأولية و وقت التحميل، ولكنها لا تقتطع من المحتوى.
ما هي طريقة "التحميل الكسول"؟
التحميل الكسول هو أسلوب يؤخر تحميل الموارد غير المهمة في الصفحة وقت التحميل. بدلاً من ذلك، يتم تحميل هذه الموارد غير المهمة في وقت المحتاجين. عندما يتعلق الأمر بالصور، "غير بالغة الأهمية" غالبًا ما يكون مرادفًا "خارج الشاشة". إذا كنت قد استخدمت Lighthouse وفحصت بعض الفرص ربما تكون قد رأيت بعض الإرشادات في هذا المجال في شكل تأجيل تدقيق الصور خارج الشاشة:
لقد رأيت على الأرجح طريقة "التحميل الكسول" أثناء تنفيذها، ويشبه التالي:
- تصل إلى الصفحة، وتبدأ في التمرير أثناء قراءة المحتوى.
- عند نقطة معيّنة، يمكنك تمرير صورة عنصر نائب إلى إطار العرض.
- يتم استبدال صورة العنصر النائب فجأة بالصورة النهائية.
يتوفّر مثال على طريقة "التحميل الكسول" للصور على منصة النشر الشهيرة. متوسط، الذي يُحمِّل صور عناصر نائبة خفيفة الوزن في لتحميل الصفحة، ويستبدلها بصور محمّلة بشكل كسول أثناء تمريرها إلى إطار العرض.
إذا لم تكن معتادًا على استخدام طريقة "التحميل الكسول"، قد تتساءل عن مدى فائدة طريقة "التحميل الكسول" والتقنية، وفوائدها. تابِع القراءة لمعرفة المزيد.
ما هي أسباب تحميل الصور أو الفيديوهات باستخدام طريقة التحميل الكسول بدلاً من تحميلها فقط؟
وربما تحمّل ملفات قد لا يراها المستخدم مطلقًا. هذا هو مشكلة لعدة أسباب:
- يؤدي إلى إهدار البيانات. في الاتصالات التي لا تفرض تكلفة استخدام، ليس هذا هو أسوأ شيء يمكن أن (على الرغم من أنه يمكنك استخدام معدل نقل البيانات الثمين لتنزيل والموارد الأخرى التي سيشاهدها المستخدم بالفعل). على البيانات المحدودة ومع ذلك، فإن تحميل الأشياء التي لا يراها المستخدم قد يكون مضيعةً فعليًا من أموالهم.
- يؤدي ذلك إلى إهدار وقت المعالجة والبطارية وموارد النظام الأخرى. بعد الوسائط تنزيل المصدر، يجب على المتصفح فك ترميزه وعرض محتواه إطار العرض.
تؤدي طريقة التحميل الكسول للصور والفيديوهات إلى تقليل وقت التحميل المبدئي للصفحة وحجم الصفحة، واستخدام موارد النظام، وكلها تؤثر بشكل إيجابي في أدائه.
تنفيذ طريقة "التحميل الكسول"
تتوفّر عدة طرق لتنفيذ طريقة "التحميل الكسول". يجب أن يراعي اختيارك للحل المتصفحات التي تتوافق معها، بالإضافة إلى التحميل الكسول
تستخدم المتصفّحات الحديثة التحميل الكسول على مستوى المتصفّح
التي يمكن تفعيلها باستخدام السمة loading على الصور وإطارات iframe.
لتوفير التوافق مع المتصفحات القديمة
أو تنفيذ طريقة "التحميل الكسول" على العناصر بدون تضمين طريقة "التحميل الكسول"
يمكنك تنفيذ حلّ باستخدام JavaScript.
وتوجد أيضًا بعض المكتبات الحالية لمساعدتك على إجراء ذلك.
اطّلع على المشاركات المنشورة على هذا الموقع للحصول على التفاصيل الكاملة عن كل هذه الأساليب:
لقد جمعنا أيضًا قائمة بالمشاكل المحتملة المتعلّقة بالتحميل الكسول. والنقاط التي يجب الانتباه إليها عند التنفيذ
الخاتمة
عند الاستخدام بعناية، يمكن للصور ومقاطع الفيديو ذات التحميل الكسول أن تقلل بشكل كبير من وقت التحميل وحمولات الصفحة على موقعك الإلكتروني، بما في ذلك مؤشرات أداء الويب الأساسية لن يواجه المستخدمون شبكة غير ضرورية نشاطهم — بما في ذلك التنافس على الشبكة على الاتصالات البطيئة — وتكاليف معالجة موارد الوسائط التي قد لا يرونها أبدًا، ولكنهم لا يزال بإمكانهم الاطّلاع على تلك الموارد إذا أرادوا ذلك.
فيما يتعلق بأساليب تحسين الأداء، يمكن الاعتماد على طريقة "التحميل الكسول" غير مثير للجدل. إذا كان لديك الكثير من الصور المضمنة في موقعك، فمن الأفضل طريقة رائعة تمامًا لتقليل التنزيلات غير الضرورية. مستخدمو موقعك الإلكتروني الأطراف المعنية في المشروع سيقدرون ذلك!