M

MLOG

العربية

دليل شامل للتحميل الكسول للصور والمكونات، لتعزيز أداء الموقع وتجربة المستخدم لجمهور عالمي.

التحميل الكسول: تحسين أداء الويب باستخدام الصور والمكونات

في المشهد الرقمي اليوم، يعتبر أداء الموقع أمرًا بالغ الأهمية. يتوقع المستخدمون تجارب سريعة ومتجاوبة، وتعطي محركات البحث الأولوية للمواقع التي تحقق ذلك. إحدى التقنيات الحاسمة لتعزيز الأداء هي التحميل الكسول (lazy loading). يقدم هذا المقال دليلاً شاملاً للتحميل الكسول للصور والمكونات، مما يساعدك على تحسين موقعك لجمهور عالمي.

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

التحميل الكسول هو أسلوب يؤجل تحميل الموارد (الصور، إطارات iframe، المكونات، إلخ) حتى تكون هناك حاجة فعلية إليها – عادةً، عندما تكون على وشك الدخول إلى منفذ العرض (viewport). هذا يعني أنه بدلاً من تحميل جميع الأصول مقدمًا، يقوم المتصفح فقط بتحميل الموارد المرئية للمستخدم عند التحميل الأولي للصفحة. ومع قيام المستخدم بالتمرير لأسفل الصفحة، يتم تحميل المزيد من الموارد عندما تصبح مرئية.

فكر في الأمر على هذا النحو: تخيل أنك تحزم أمتعتك لرحلة. بدلاً من سحب خزانة ملابسك بأكملها معك من البداية، فإنك تحزم فقط الملابس التي تعرف أنك ستحتاجها على الفور. مع تقدمك في رحلتك، تقوم بإخراج عناصر إضافية حسب حاجتك إليها. هذا هو جوهر عمل التحميل الكسول في المواقع الإلكترونية.

لماذا نستخدم التحميل الكسول؟

يقدم التحميل الكسول العديد من الفوائد الهامة:

التحميل الكسول للصور

الصور غالبًا ما تكون أكبر الأصول على الموقع الإلكتروني، مما يجعلها مرشحة رئيسية للتحميل الكسول. إليك كيفية تنفيذ التحميل الكسول للصور:

التحميل الكسول الأصلي (Native)

تدعم المتصفحات الحديثة (Chrome, Firefox, Safari, and Edge) الآن التحميل الكسول الأصلي باستخدام السمة loading. هذه هي الطريقة الأبسط والأكثر كفاءة للتحميل الكسول للصور.

لتمكين التحميل الكسول الأصلي، ما عليك سوى إضافة السمة loading="lazy" إلى وسم <img> الخاص بك:

<img src="image.jpg" alt="صورتي" loading="lazy">

يمكن أن تحتوي السمة loading على ثلاث قيم:

مثال:

<img src="london_bridge.jpg" alt="جسر لندن" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="أفق طوكيو" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="ريو دي جانيرو" loading="lazy" width="600" height="400">

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

التحميل الكسول باستخدام جافاسكريبت

بالنسبة للمتصفحات القديمة التي لا تدعم التحميل الكسول الأصلي، يمكنك استخدام مكتبات جافاسكريبت أو كتابة سكريبت مخصص خاص بك. إليك مثال أساسي باستخدام Intersection Observer API:

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

شرح:

  1. نختار جميع عناصر <img> التي تحتوي على السمة data-src.
  2. ننشئ نسخة جديدة من IntersectionObserver. يتم تنفيذ دالة رد الاتصال (callback) عندما يدخل عنصر مراقب إلى منفذ العرض أو يخرج منه.
  3. داخل دالة رد الاتصال، نقوم بالمرور على entries (العناصر التي تقاطعت مع منفذ العرض).
  4. إذا كان هناك عنصر يتقاطع (entry.isIntersecting تكون قيمتها true)، فإننا نضبط السمة src للصورة على قيمة السمة data-src.
  5. ثم نزيل السمة data-src ونوقف مراقبة الصورة، حيث لم تعد هناك حاجة إليها.
  6. أخيرًا، نراقب كل صورة باستخدام observer.observe(img).

هيكل HTML:

<img data-src="image.jpg" alt="صورتي">

لاحظ أن عنوان URL الفعلي للصورة يوضع في السمة data-src بدلاً من السمة src. هذا يمنع المتصفح من تحميل الصورة على الفور.

استخدام مكتبات التحميل الكسول

يمكن للعديد من مكتبات جافاسكريبت تبسيط عملية التحميل الكسول للصور. تشمل بعض الخيارات الشائعة:

توفر هذه المكتبات عادةً واجهة برمجة تطبيقات (API) بسيطة لتهيئة التحميل الكسول وتقدم ميزات إضافية مثل الصور النائبة وتأثيرات الانتقال.

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

التحميل الكسول ليس للصور فقط؛ يمكن تطبيقه أيضًا على المكونات، خاصة في أطر عمل جافاسكريبت الحديثة مثل رياكت وأنجولار وفيو. هذا مفيد بشكل خاص للتطبيقات ذات الصفحة الواحدة (SPAs) الكبيرة التي تحتوي على العديد من المكونات.

التحميل الكسول في رياكت (React)

يوفر رياكت دالة مدمجة React.lazy() للتحميل الكسول للمكونات. تتيح لك هذه الدالة استيراد المكونات ديناميكيًا، والتي يتم تحميلها فقط عند عرضها.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>جارٍ التحميل...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

شرح:

  1. نستخدم React.lazy() لاستيراد المكون MyComponent ديناميكيًا. تعيد الدالة import() وعدًا (promise) يتم حله إلى وحدة المكون.
  2. نحن نغلف MyComponent في مكون <Suspense>. يتيح لك مكون Suspense عرض واجهة مستخدم احتياطية (في هذه الحالة، \"جارٍ التحميل...\") أثناء تحميل المكون.

التحميل الكسول في أنجولار (Angular)

يدعم أنجولار التحميل الكسول للوحدات (modules) باستخدام خاصية loadChildren في تكوين التوجيه (routing).

const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];

شرح:

  1. نعرّف مسارًا لمسار my-module.
  2. نستخدم خاصية loadChildren لتحديد أنه يجب تحميل MyModuleModule بشكل كسول. تقوم الدالة import() باستيراد الوحدة ديناميكيًا.
  3. يتم استخدام التابع then() للوصول إلى الوحدة وإرجاع الفئة MyModuleModule.

التحميل الكسول في فيو (Vue.js)

يدعم Vue.js التحميل الكسول للمكونات باستخدام الاستيراد الديناميكي والوسم component.

<template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>

شرح:

  1. نستخدم الوسم <component> مع السمة :is لعرض مكون ديناميكيًا.
  2. في خطاف دورة الحياة mounted، نستخدم الدالة import() لاستيراد MyComponent.vue ديناميكيًا.
  3. ثم نضبط خاصية البيانات dynamicComponent على التصدير الافتراضي للوحدة.

أفضل الممارسات للتحميل الكسول

لضمان تنفيذ التحميل الكسول بفعالية، ضع في اعتبارك هذه الممارسات الفضلى:

اعتبارات التدويل (Internationalization)

عند تنفيذ التحميل الكسول لجمهور عالمي، ضع في اعتبارك عوامل التدويل هذه:

الخاتمة

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

احتضن التحميل الكسول وافتح الباب لتجربة ويب أسرع وأكثر كفاءة وسهولة في الاستخدام للجميع.