كيفية التحميل الكسول في WordPress (الصور ومقاطع الفيديو)

نشرت: 2023-05-25

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

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

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

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

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

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

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

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

كيف يعمل التحميل البطيء؟

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

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

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

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

ما هي فوائد التحميل الكسول؟

هناك ثلاث فوائد أساسية للتحميل البطيء للصور:

  • زيادة سرعة الموقع
  • انخفاض استخدام النطاق الترددي
  • تجربة مستخدم أفضل

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

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

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

هل يتم تحميل WordPress كسول افتراضيًا؟

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

هل يجب علي تحميل صوري كسول؟ هل هناك عيوب؟

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

تخطيط التحول

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

كقاعدة عامة ، يوصى باستخدام العناصر النائبة لتجنب هذه المشكلة.

الضربة المحتملة لتحسين محركات البحث

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

قد لا تظهر صورك بعد الآن في نتائج البحث ، واعتمادًا على مدى أهمية الصور بالنسبة لبقية محتوى الصفحة (مثل صور المنتج لقائمة التجارة الإلكترونية) ، فقد يؤدي ذلك إلى خفض تصنيفات البحث العادية أيضًا.

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

تعارض البرنامج المساعد

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

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

وفي حالة حدوث خطأ ما ، احتفظ بنسخة احتياطية من موقع WordPress الخاص بك في متناول يديك للتعافي السريع.

كيفية تمكين التحميل البطيء في WordPress

يتم الآن تمكين التحميل البطيء افتراضيًا في WordPress. إذا كنت لا تستخدم تكرار WordPress حديثًا (على الرغم من أننا نوصي بذلك) ، أو إذا كنت تريد المزيد من التحكم الدقيق في عملية التحميل البطيء ، فيمكنك القيام بذلك باستخدام إحدى طريقتين متميزتين: استخدام مكون إضافي أو إضافة رمز إلى حسابك موقع.

1. تحميل كسول مع البرنامج المساعد

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

الصفحة الرئيسية لـ Jetpack Boost

Jetpack Boost هو مكون إضافي مجاني مخصص لمساعدتك في قياس أداء الموقع وتحسينه. يقدم وظائف مثل:

  • تأجيل JavaScript غير الضروري
  • تحسين تحميل CSS
  • تحميل الصورة كسول
  • اختبار أداء الموقع

لبدء استخدام Jetpack Boost ، قم بتنزيله مجانًا من دليل البرنامج المساعد WordPress.

أو ، في لوحة معلومات WordPress الخاصة بك ، انتقل إلى Plugins → Add New ، ثم ابحث عن Jetpack Boost وانقر على التثبيت الآن . بمجرد التثبيت ، انقر فوق تنشيط .

Jetpack Boost في مستودع البرنامج المساعد

بعد ذلك ، انتقل إلى خيار قائمة لوحة المعلومات الجديد بعنوان Boost . ثم ، انقر فوق ابدأ مجانًا .

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

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

فيما يلي بعض المهام التي يمكنك إنجازها:

  1. تعطيل التحميل البطيء على صفحات معينة
  2. قم بتعيين عنصر نائب يتم عرضه حتى يتم تحميل الصورة
  3. قم بإيقاف تشغيل التحميل البطيء لصور معينة
  4. قم بإيقاف تشغيل التحميل البطيء لفئة CSS معينة

على سبيل المثال ، إذا كنت تريد استبعاد فئة CSS من عملية التحميل البطيء ، يمكنك استخدام هذا الرمز:

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

لمزيد من التفاصيل ، تحقق من وثائق التحميل البطيئة الكاملة.

2. كيفية التحميل البطيء للصور في WordPress بدون إضافة

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

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

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

أو ربما ترغب في الحصول على حبيبات فائقة وإيقاف التحميل البطيء لصور معينة. يمكنك القيام بذلك عن طريق تعيين فئة صورة إضافية لكل صورة عند إضافتها إلى صفحة أو منشور ثم إضافة هذه الفئة إلى الكود التالي في ملف functions.php الخاص بك:

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

لإضافة فئة الصورة skip-lazy في المثال أعلاه إلى صورة:

  1. أضف الصورة إلى الصفحة أو انشرها عبر مكتبة الوسائط.
  2. بعد إضافة الصورة ، ابحث عن إعدادات الصورة. قد يظهر هذا بشكل مختلف اعتمادًا على ما إذا كنت تستخدم محرر Gutenberg Blocks أو المحرر الكلاسيكي أو مكونًا إضافيًا منشئ المواقع. عادة ما توجد القدرة على إضافة فئة CSS جديدة إما في منطقة الإعدادات المتقدمة (Gutenberg والمحررين الكلاسيكيين) أو في الجزء السفلي من خيارات إعدادات الصورة (معظم منشئي المواقع الآخرين).
  3. أضف فئة skip-lazy إلى الصورة واحفظ التحديث الخاص بك.

يمكنك معرفة المزيد حول الاحتمالات في وثائق WordPress.

كيفية تحميل مقاطع الفيديو كسول في WordPress

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

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

الأسئلة المتداولة حول التحميل البطيء في WordPress

هل تريد معرفة المزيد عن التحميل البطيء لـ WordPress؟ لقد أجبنا على بعض الأسئلة المتداولة أدناه:

هل التحميل البطيء وتأجيل الصور خارج الشاشة هو نفس الشيء؟

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

في الأساس ، يعد التحميل البطيء طريقة لتأجيل الصور خارج الشاشة.

هل يمكنني التحميل البطيء لصور الخلفية في WordPress؟

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

في هذه الحالة ، يمكنك استخدام أداة مثل Lazy Loader ، والتي ستتيح لك تحديد صور الخلفية المحددة التي تريد تحميلها ببطء.

هل يمكنني تحميل فيديو يوتيوب كسول؟

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

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

هل يؤثر التحميل الكسول على تحسين محركات البحث؟

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

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

هل يؤثر التحميل البطيء على تجربة المستخدم؟

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

هل أحتاج إلى مكون إضافي لتحميل المحتوى الخاص بي كسول؟

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

هل هناك جانب سلبي لتحميل المحتوى كسول؟

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

هل أحتاج إلى التحميل البطيء لجميع المحتويات الخاصة بي؟

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

ما الذي يمكنني فعله أيضًا لتحسين سرعات التحميل؟

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

  • استخدام شبكة توصيل المحتوى (CDN)
  • التركيز على تحسين نفس الأشياء التي تعمل أيضًا على تحسين Core Web Vitals.
  • تحسين صورك
  • تمكين التخزين المؤقت للمتصفح
  • تصغير الموارد

تسريع موقعك باستخدام WordPress التحميل البطيء

يعد التحميل البطيء لصورك طريقة رائعة لتحسين أداء موقعك وتحسين تجربة المستخدم الإجمالية. يوفر Jetpack Boost الطريقة الأكثر ملاءمة وقوة لتمكين التحميل البطيء ، مع توفير أدوات سرعة قوية أخرى. على استعداد للبدء؟ احصل على Jetpack Boost!