ما هو التحميل البطيء وكيف يعمل على تحسين تجربة المستخدم؟

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

تشير الدراسات إلى أنه مقابل كل ثانية إضافية يستغرقها تحميل موقع الويب الخاص بك، تقل فرصة تحويل الزائر إلى عميل. وفقًا لـ Portent ، تبلغ فرصة التحويل 40% في ثانية واحدة من التحميل، بينما تنخفض إلى 34% في الثانية التالية، و29% في ثلاث ثوانٍ. ربما تتساءل: "ما الحل إذن؟"

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

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

جدول المحتويات

• ما هو التحميل البطيء؟
• أهمية التحميل البطيء
• التحميل المتلهف مقابل التحميل البطيء
• كيف يعمل التحميل البطيء
• تنفيذ التحميل البطيء

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

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

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

بدلاً من انتظار تحميل كل شيء، يمكنك رؤية ما هو موجود بالفعل على الشاشة على الفور.

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

أهمية التحميل البطيء

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

تحسين الأداء

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

تقليل عرض النطاق الترددي وتحميل الخادم

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

تحسين كبار المسئولين الاقتصاديين

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

ما هو التحميل السريع؟

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

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

على الرغم من سهولة تنفيذه، إلا أن التحميل المتلهف أصبح أقل أهمية بسبب عدة عوامل، منها:

زيادة حجم صفحة الويب

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

التأثير السلبي على الأداء

يمكن أن تؤدي أوقات تحميل الصفحة الأطول إلى الإضرار بمقاييس أداء موقع الويب المهمة ، مثل First Contentful Paint (FCP) و Largest Contentful Paint (LCP). هذه هي العناصر الأساسية لتحسين محركات البحث وتجربة المستخدم.

ارتفاع عدد مستخدمي الهاتف المحمول

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

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

فيما يلي مقارنة سريعة بين التحميل السريع والتحميل البطيء:

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

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

الآن بعد أن عرفت لماذا يضمن Lazy Loading نتائج أفضل بين الاثنين، دعنا نلقي نظرة على كيفية تحقيق ذلك.

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

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

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

تنفيذ التحميل البطيء

في هذا الجزء، سنعرض لك الطرق المختلفة لتنفيذ Lazy Loading على موقع الويب الخاص بك.

الطريقة الأولى - تنفيذ التحميل البطيء يدويًا

الطريقة اليدوية لتنفيذ Lazy Loading ليست مناسبة للجميع. إنه أمر معقد، ويجب أن يكون لديك على الأقل معرفة متوسطة بالبرمجة.

للقيام بذلك، ستستخدم في الغالب HTML وJavaScript. قبل أن تبدأ، تأكد من أن لديك إمكانية الوصول إلى ملفات السمات الخاصة بموقع WordPress الخاص بك وأنك تشعر بالثقة في تحرير HTML وJavaScript.

فيما يلي دليل مفصل لمساعدتك خلال هذه العملية:

الخطوة 1 : النسخ الاحتياطي لموقعك

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

الخطوة 2: تحرير ملف jobs.php الخاص بالسمة

• قم بالوصول إلى ملفات موقع WordPress الخاص بك (باستخدام عميل FTP أو مدير الملفات في لوحة تحكم الاستضافة الخاصة بك).
• انتقل إلى /wp-content/themes/your-theme/ وابحث عن ملف jobs.php .
• افتح ملف jobs.php للتحرير.

الخطوة 3 : إضافة البرنامج النصي Lazy Loading

في ملف jobs.php ، أضف دالة لإدراج ملف JavaScript في قائمة الانتظار للتحميل البطيء. إليك مثال أساسي:

الوظيفة add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

يفترض هذا الرمز أن لديك ملف JavaScript باسم Lazy-load.js في مجلد js داخل دليل السمات الخاص بك.

الخطوة 4 : إنشاء ملف جافا سكريبت

• قم بإنشاء ملف جديد باسم Lazy-load.js في المجلد js الخاص بدليل السمات الخاص بك.
• أضف JavaScript للتعامل مع التحميل البطيء. فيما يلي مثال أساسي باستخدام IntersectionObserver :

document.addEventListener("DOMContentLoaded"، function() {

Let LazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

إذا ("IntersectionObserver" في النافذة) {

دع LazyImageObserver = new IntersectionObserver(function(entries, Observer) {

إدخالات.forEach(وظيفة(إدخال) {

إذا (إدخال.isIntersecting) {

Let LazyImage = Entry.target;

LazyImage.src = LazyImage.dataset.src;

LazyImage.classList.remove("lazy");

LazyImageObserver.unobserve(lazyImage);

}

});

});

LazyImages.forEach(function(lazyImage) {

LazyImageObserver.observe(lazyImage);

});

}

});

الخطوة 5 : قم بتحديث علامات الصور الخاصة بك في WordPress

قم بتعديل علامات الصور الخاصة بك لدعم التحميل البطيء. في قوالب PHP الخاصة بك أو مباشرة في منشوراتك/صفحاتك، قم بتغيير علامات الصور الخاصة بك على النحو التالي:

<img class=”lazy” src=”placeholder-image.jpg” data-src=”original-image.jpg” alt=”وصف الصورة”>

استبدل placeholder-image.jpg بصورة منخفضة الدقة أو رسم تحميل، واستبدل original-image.jpg بعنوان URL الفعلي للصورة.

نصيحة الخبراء: استخدم العناصر النائبة سريعة الاستجابة للصور التي يتم تحميلها ببطء لضمان بقاء التخطيط ثابتًا.

الخطوة 6 : اختبار التغييرات الخاصة بك

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

ملحوظات

• تأكد دائمًا من الاختبار في بيئة التطوير أولاً، قبل القيام بذلك على موقع الويب المباشر الخاص بك.
• فكر في إنشاء سمة فرعية أثناء القيام بذلك. قد تؤدي تحديثات السمة إلى استبدال تغييراتك.
• بالنسبة لأنواع المحتوى الأخرى مثل مقاطع الفيديو أو إطارات iframe، يمكن استخدام أسلوب مماثل حيث يتم استبدال سمة src بسمة data-src وتحميلها عبر JavaScript عندما تكون في إطار العرض.

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

الطريقة الثانية - استخدام مكون WordPress الإضافي لتنفيذ Lazy Loading

هذه هي أسهل الطريقتين، حيث يمكنك استخدام مكون WordPress الإضافي لتمكين Lazy Loading بأمان. تتيح لك المكونات الإضافية المتعددة القيام بذلك، لكننا سنستخدمWP-Optimize في هذا المثال.يعد WP-Optimize مكونًا إضافيًا قويًا لبرنامج WordPress يساعدك على تعزيز سرعة موقع الويب الخاص بك وتحسين تجربة المستخدم.

إنه يوفر طريقة بسيطة وسهلة لضبط الصور وإطارات iframe ومقاطع الفيديو الخاصة بك على التحميل البطيء. تعمل ميزة Lazy Load المضمنة على تأخير تحميل موارد الويب تلقائيًا حتى تصبح مرئية، مما يؤدي إلى أوقات تحميل أسرع بكثير للصفحة. ومع ذلك، فهذه ميزة متميزة في WP-Optimize.

لتمكين الميزة:

• افتح علامةالتبويب WP-Optimize > الصور من لوحة تحكم WordPress الخاصة بك
• افتح علامة التبويب الفرعية Lazy Load Images
• من هنا، يمكنك تمكين التحميل البطيء لكل من الصور ومقاطع الفيديو/إطارات Iframe

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

قبل وبعد

لقد اختبرنا نموذجًا لسرعة موقع الويب قبل وبعد تنفيذ Lazy Load. كان موقع الويب سريعًا جدًا بالفعل، حيث بلغ وقت تحميل First Contentful Paint (FCP) 1.5 ثانية،وفقًا لـ GTMetrix.

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

هل أنت مستعد لتسريع وقت تحميل صفحتك؟

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

لقد قدمنا ​​أيضًا بعض النصائح المفيدة حول كيفية استخدام Lazy Loading في WordPress. نحن نغطي كل شيء بدءًا من القيام بذلك بنفسك باستخدام التعليمات البرمجية وحتى استخدام مكون إضافي مثل WP-Optimize.

حاول إضافة Lazy Loading إلى موقع الويب الخاص بك وأخبرنا عن مدى تأثير ذلك على أدائك. هل حصلت على الاسئلة؟ لا تتردد في السؤال في التعليقات.

أسئلة مكررة

هل التحميل البطيء جيد أم سيئ؟

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

ما هو التحميل البطيء في واجهة المستخدم؟

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

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

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

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

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

ما هي مشاكل التحميل البطيء؟

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