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