أخر الاخبار

كيفية تمكين تحميل الصور الكسول lazy load على بلوجر - Blogger

تعد سرعة موقع الويب أحد العوامل الحاسمة لتحسين الترتيب وعلى مدونة بلوجر Blogger الخاصة بك، لن تجد أي مكونات إضافية للتخزين المؤقت وتحسين الصورlazy load.

لذلك، في هذا المقال، سنناقش ما هو التحميل البطيء وكيف يمكنك تمكين التحميل البطيءالصور الكسول lazy load على بلوجر - Blogger الخاصة بك.


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

كيفية تمكين تحميل الصور الكسول lazy load على بلوجر - Enable lazy load on blogger

سنتعرف اليوم علي افضل الممارسات لتحسين سرعة مدونة بلوجر عن طريق تحميل الصور الكسول lazy load، وبالتأكيد من أهم العوامل لمُحسنات تحسين محركات البحث والحصول على مرتبة اعلى هو تحسين سرعة الموقع.



ما هو التحميل البطيء "التحميل الكسول lazy load"؟

التحميل الكسول lazy load هي تقنية تحسين لمواقع الويب تعمل على تأخير تحميل الموارد أو الكائنات حتى يتم الاحتياج إليها فعليًا وتقليل وقت التحميل الأولي.

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


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

هناك العديد من الفوائد عند تمكين التحميل الكسول للصور lazy load:

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



كيف يعمل التحميل الكسول lazy loading؟

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

مع التحميل البطيء lazy loading، سيعطي المتصفح الأولوية لتحميل الصور المرئية في الجزء المرئي من الشاشة (منفذ العرض). بهذه الطريقة، يمكنك تقليل الحجم الإجمالي للصفحة وتحسين نقاط مؤشرات الويب الأساسية في تقرير إحصاءات سرعة الصفحة. 



كيفية تمكين التحميل الكسول lazy load على بلوجر؟

كيفية تمكين التحميل الكسول lazy load على بلوجر - Blogger

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

يجب تحميل موقع الويب في غضون 3 ثوانٍ للحصول على تجربة مستخدم أفضل، ولكن وفقًا لأبحاث Google، فإن متوسط ​​وقت تحميل صفحات الويب هو 22 ثانية. لتحسين سرعة موقع الويب الخاص بك، تحتاج إلى تحسين صورك بشكل أفضل.

في WordPress، ستجد العديد من المكونات الإضافية لتحسين الصور مثل ShortPixel، imagify، وغيرها الكثير، ولكن بلوجر Blogger، لا تسمح بالمكونات الإضافية.

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

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




خطوات تمكين lazyload التحميل الكسول على بلوجر

اتبع الخطوات التالية لتمكين تقنية التحميل الكسول lazy load على مدونة بلوجرBlogger الخاصة بك، سيتم تطبيق التحميل البطيء على جميع الصور تلقائيًا. وليست هناك حاجة لإضافة العلامات المضمنة <img> يدويًا.

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

إضافة كود التحميل الكسول lazyload لمدونة Blogger:

  1. قم بتسجيل الدخول إلى Blogger.
  2. انتقل إلى لوحة تحكم مدونتك ثم المظهر
  3. ثم انقر فوق المظهر وتعديل HTML من القائمة المنسدلة.
في محرر HTML، أضغط في الكيبورد على Ctrl + F وابحث عن <body/> أو قم بالتمرير للأسفل حتى النهاية ستجد علامة <body/>.
الصق كود جافا سكريبت أعلى علامة <body/> مباشرة واحفظه. كما موضح بالصورة التالية.
إضافة كود التحميل الكسول lazyload لمدونة Blogger
الكود
<script>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ZS05qvHPt5uGQQJEt2DuVcwpIvpIkaaMp5eHjKouHa98hHIVzA2UFGHoWhX5WXD75sneGzPeMOtOG36DmYFFqgQ1sIy8PYL7ZpdryH_B7H_tVh7i86WYjEUvkGSpQHuXsrSCCtYFftpc/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>



بعد اتما الخطوة ستكون نجحت الآن في تنفيذ lazyload التحميل الكسول على مدونة بلوجر Blogger الخاصة بك.

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



طريقة اخري لتمكين التحميل البطيء lazyload

إذا كنت لا ترغب في تحميل الصور البطيئة باستخدام كود جافا، فيمكنك استخدام الملف الأصلي lazyloading من المتصفح.

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

<img loading="lazy" src="#" alt="image alt tag" />

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

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

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



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -