تسريع الموقع الإلكتروني عن طريق إستخدام سكريبت lazyload

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

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

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

طريقة تركيب سكريبت الـ Lazyload في موقعك 

أولا :

السكريبت الذي سنضيفه هو سكريبت مبرمج بالـ JQuery و التي هي أساسا عبارة عن مكتبة مبرمجة بالـ Java script و عليه سيتوجب عليك التحقق من ما إذا كان قالب موقعك يتوفر على كود أخر إصدار لمكتبة JQuery و هذا الكود :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

إبحث في قالب موقعك عن هذا الكود و إن لم تجده فالصق هذا الكود فوق وسم </head> مباشرة .

ثانيا: 

بعد أن لصقت كود مكتبة الـ JQuery يتوجب عليك الأن أن تضيف الكود المبرمج بالـ JQuery و الذي سيسرع لك الموقع مباشرة بعد أن تضيفه هذا هو الكود :

<script type='text/javascript'>//<;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/AVvXsEg4WAuGphacLb9X1Rsg_LxdIM08RZbPQh-QhXAxeAgq_5bxCCjbV1NgpEg0nLIkPD7tDZp49clNK3DP-B5LHPkSHpc1ivZyhC7HeRzp3ClKLhlVRO0nC_jm2oqPBsGXqEJ53_tZtzgF4dM/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>

إلصق الكود مباشرة فوق وسم <body/> و لاحظ الفرق الحاصل في موقعك .

ملاحظات :

1- ضروي عليك أن تلصق الكودين معا في موقعك ليعمل .
2- كود مكتبة الـ JQuery يجب أن تلقه فوق وسم </head> ليعمل بكفائة أكثر .
3- الكود المبرمج يجب أن تلصقه فوق وسم مباشرة </body> و إلا فلن يعمل .