الصور البطيئة التحميل في WordPress (متى وكيف)

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

ما هو التحميل البطيء؟

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

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

لماذا يتم تحميل الصور كسولًا؟

فيما يلي بعض الأسباب الرئيسية التي تجعلك تفكر في تحميل الصور البطيئة على موقع WordPress الخاص بك:

• تحسين وقت التحميل: يتم تحميل صفحتك بشكل أسرع لأنها ليست مثقلة بالصور التي تظهر على الشاشة.
• تجربة مستخدم أفضل: يمكن للمستخدمين التفاعل مع المحتوى الخاص بك دون انتظار تحميل كل شيء مقدمًا.
• تحسين محركات البحث (SEO): غالبًا ما تحصل مواقع الويب الأسرع على تصنيف أفضل على محركات البحث.
• انخفاض النطاق الترددي: مفيد بشكل خاص للزوار الذين لديهم خطط بيانات محدودة أو اتصالات بطيئة.

يعد التحميل البطيء مفيدًا بشكل خاص على الصفحات ذات الوسائط الثقيلة مثل المعارض والمدونات وقوائم منتجات التجارة الإلكترونية.

متى يجب عليك تحميل الصور كسولًا؟

التحميل البطيء ليس حلاً شاملاً لجميع الصور. خذ بعين الاعتبار ما يلي عند تحديد ما إذا كنت تريد استخدامه أم لا:

استخدم التحميل البطيء عندما:

• لديك صفحة طويلة أو تخطيط تمرير لا نهائي
• يحتوي موقعك على العديد من الصور الكبيرة ذات الدقة العالية
• أنت تعرض الصور في الجزء السفلي غير المرئي (أي غير مرئية عند التحميل الأولي)
• تريد التحسين لمستخدمي الهاتف المحمول

لا تقم بالتحميل البطيء:

• الصور الموجودة في الجزء العلوي (مرئية بمجرد تحميل الصفحة)، حيث أن التحميل البطيء لها قد يؤدي إلى تأخير سرعة التحميل الملموسة
• أصول العلامة التجارية المهمة مثل الشعارات وصور الأبطال
• الصور في أشرطة التمرير أو الرف الدائري التي يجب عرضها على الفور

تذكر أن الهدف ليس التحميل البطيء لكل شيء، بل التحميل البطيء بشكل استراتيجي .

كيفية تنفيذ Lazy-Load في ووردبريس

هناك عدة طرق لإضافة التحميل البطيء إلى موقع WordPress الخاص بك، بدءًا من الميزات المضمنة إلى المكونات الإضافية والترميز اليدوي.

1. استخدم خاصية التحميل البطيء الأصلية (المدمجة في WordPress)

بدءًا من WordPress 5.5، يتم تمكين التحميل البطيء افتراضيًا على جميع الصور باستخدام سمة loading="lazy" . هذه هي الطريقة الأبسط والأكثر فعالية للأسباب التالية:

• إنه مدمج في القلب، لذا لا يوجد شيء يمكن تثبيته
• وهو مدعوم من قبل معظم المتصفحات الحديثة
• لا يلزم وجود جافا سكريبت أو نفقات إضافية

مثال لصورة ذات تحميل كسول أصلي:

 <img src="example.jpg" alt="Example Image" loading="lazy">

تدعم معظم قوالب WordPress هذا بالفعل، ولكن تأكد دائمًا من أن القالب أو المكونات الإضافية الخاصة بك لا تتجاوزها أو تعطلها.

2. استخدم مكون WordPress الإضافي

إذا كنت تبحث عن مزيد من التحكم أو التوافق مع المتصفح، ففكر في استخدام مكون WordPress الإضافي. تتضمن بعض المكونات الإضافية الشائعة للتحميل البطيء ما يلي:

• Lazy Load من WP Rocket: مكون إضافي بسيط وخفيف الوزن من فريق حسن السمعة.
• Smush: يوفر التحميل البطيء بالإضافة إلى تحسين الصورة وضغطها.
• a3 Lazy Load: مكون إضافي قوي مزود بإعدادات شاملة وتحسين للأجهزة المحمولة/الأجهزة اللوحية.

لتثبيت أحد هذه:

1. انتقل إلى المكونات الإضافية > إضافة جديد في لوحة تحكم WordPress الخاصة بك.
2. ابحث عن اسم البرنامج المساعد (على سبيل المثال، Smush ).
3. انقر فوق تثبيت ثم التنشيط .
4. انتقل إلى إعدادات البرنامج المساعد لتكوين الخيارات التي تناسب احتياجاتك.

3. استخدم التحميل البطيء القائم على جافا سكريبت

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

 <img data-src="image.jpg" class="lazyload" alt="Lazy Image">

وقم بتضمين هذا البرنامج النصي:

 <script src="path-to/lazysizes.min.js" async></script>

يمنحك هذا الأسلوب المرونة والتوافق، ولكنه يتطلب المزيد من الجهد والمهارة الفنية.

أفضل الممارسات لاستخدام التحميل البطيء

لتحقيق أقصى استفادة من التحميل البطيء، اتبع أفضل الممارسات التالية:

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

كيفية اختبار ما إذا كان التحميل البطيء يعمل أم لا

هناك عدة طرق للتحقق مما إذا كان التحميل البطيء يعمل على موقع WordPress الخاص بك:

1. انقر بزر الماوس الأيمن وافحص عنصر الصورة في أدوات المطور في متصفحك. ابحث عن loading="lazy" أو data-src في حالة استخدام JavaScript.
2. استخدم أدوات عبر الإنترنت مثل Google PageSpeed ​​Insights أو GTmetrix للتحقق من الصور التي يتم تأجيلها.
3. قم بالتمرير ببطء خلال صفحتك ولاحظ ما إذا كانت الصور تتلاشى أو تظهر للعرض بمجرد دخولها إلى إطار العرض.

يمكن أن تساعد هذه الأساليب في التأكد من أن تنفيذك يقوم بما يفترض أن يفعله ولا يعيق المحتوى المهم.

المزالق الشائعة التي يجب تجنبها

على الرغم من أن التحميل البطيء يبدو رائعًا، إلا أنه لا يخلو من بعض السلبيات المحتملة إذا أسيء تطبيقه:

• التحميل البطيء بشكل مفرط: تضمين الصور المهمة التي يجب تحميلها على الفور، مما يؤدي إلى ظهور مشكلات "المساحة الفارغة" عند التحميل.
• عدم اختبار توافق المتصفح: في حين أن معظم المتصفحات الحديثة تدعم التحميل البطيء الأصلي، إلا أن الإصدارات الأقدم قد لا تدعم ذلك.
• مشكلات تحسين محركات البحث (SEO) المتعلقة بالتحميل البطيء المستند إلى JS: إذا لم يتم تنفيذه بشكل صحيح، فقد تفقد محركات البحث محتوى الصورة المهم.

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

على الرغم من أن الصور هي الأصول الأكثر تحميلًا بشكل بطيء، إلا أنه يمكنك توسيع المفهوم ليشمل:

• إطارات iFrames: مثل مقاطع فيديو YouTube المضمنة
• صور الخلفية: استخدام تقنيات جافا سكريبت
• الصور الرمزية والصور الرمزية (خاصة في أقسام التعليقات)

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

التفاف

يعد التحميل البطيء للصور في WordPress طريقة ذكية وبسيطة نسبيًا لتحسين سرعة وأداء موقعك. سواء كنت تستخدم إمكانات WordPress المضمنة، أو تختار مكونًا إضافيًا قويًا، أو تنفذ حل JavaScript، فإن فوائد أوقات التحميل الأسرع وتحسين محركات البحث وتحسين رضا المستخدم تستحق الجهد المبذول.

من خلال فهم متى يتم التحميل البطيء وكيفية القيام بذلك بشكل صحيح، يمكنك تحقيق التوازن المثالي بين الجمال والأداء على موقع WordPress الخاص بك.

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