شرح كود lazy Load لتسريع مدونة بلوجر بطريقة ممتازة

15

شرح كود lazy Load

شرح كود lazy Load ،تسريع مدونة بلوجر، كيف اسرع مدونتى ، كود لتسريع تصفح مدونة بلوجر، مدونتى بطيئه كيف اسرعها، اختبار سرعة مدونة بلوجر ، كود lazy load لتسريع مدونات بلوجر .

كل هذه أسئله تتبادر الى الذهن حين نرى مدونتنا على بلوجر بطيئه، فنقوم بالبحث فى محرك البحث جوجل عن سبيل لزيادة سرعة المدونه بالطرق المعروفه سواء أكواد لتسريع التصفح أو من خلال تعديلات بالقالب الخاص بالمدونه ….. الخ .
فكل صاحب مدونه يتمنى ان تكون مدونته سريعه أمام الزائر لكى يكسب من خلال ذلك زوار ويزيد من تصفح مواضيع المدونه نظرا لسهولة تصفحها وهو مايفضله الزائر وبالتالى يقل الـ Bounce rate لمدونتك مما يؤهلها لكسب ثقة محركات البحث .
وهنا فى مقالى هذا سأتطرق الى وسيله فعاله لتسريع التصفح فى مدونتك بلوجر وهو كود رائع اسمه Lazy Load يعمل على تسريع المدونه .

دعونا اولا نتعرف على ماهو كود Lazy Load ووظيفته.

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

لماذا يجب عليك تحميل كود Lazy Load بمدونتك

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

lazy load1

ثم من الصوره التاليه اضغط على تنزيل المظهر ….

 

1- اضافة jQuery الى مدونتك .

اغلب القوالب الحديثه والمتجاوبه تستخدم jQuery فهذا السكربت مهم جدا فى مدونتك حيث يعمل على تشغيل وظيفة المقالات ذات الصله، السايق والقادم بالنسبه للمقالات ، السلايدر بقالب المدونه وغيره الكثير .
فيمكنك التاكد من وجود هذا الكود بمدونتك من خلال البحث فى القالب أو من خلال هذا الموقع ، أما القوالب القديمه والتى ان لم يوجد بها الكود فتستطيع وضع الكود التالى بقالب مدونتك
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

ويتم وضعه اعلا وسم </head> بالقالب ثم حفظ القالب .

2- طريقة اضافة كود Lazy Load الى مدونتك بلوجر.

هذا الكود مهم فى تحميل الصور وعرضها وقت الطلب للزائر اثناء وصوله بالقراءه لها فتظهر فورا وهكذا ، وهذا الكود يعمل على
اغلب المتصفحات ومتوافق معها وهى
IE 6-11, Chrome 1-31, Firefox 1.5-27.0, Safari 3-7, Opera 10.6-18.0, iOS 5-7,
Android 2.3-4.4, Amazon Kindle Fire 2 and HD 8.9, Opera Mini 7.
ويتم اضافة الكود التالى بأعلى الوسم </body> بقالب المدونه.

<script type='text/javascript'>//<![CDATA[ /*! Lazy Load XT | (C)2014 RESS.io | MIT License * BLOGGER Implementation by Muntasir Minhaz //www.techinfoknow.com/2014/08/lazy-load-blogger.html */(function($,window,document,undefined){var lazyLoadXT='lazyLoadXT',dataLazied='lazied',load_error='load error',classLazyHidden='lazy-hidden',docElement=document.documentElement||document.body,forceLoad=(window.onscroll===undefined||!!window.operamini||!docElement.getBoundingClientRect),options={autoInit:true,selector:'img[data-src]',blankImage:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',throttle:99,forceLoad:forceLoad,loadEvent:'pageshow',updateEvent:'load orientationchange resize scroll touchmove focus',forceEvent:'',oninit:{removeClass:'lazy'},onshow:{addClass:classLazyHidden},onload:{removeClass:classLazyHidden,addClass:'lazy-loaded'},onerror:{removeClass:classLazyHidden},checkDuplicates:true},elementOptions={srcAttr:'data-src',edgeX:0,edgeY:0,visibleOnly:true},$window=$(window),$isFunction=$.isFunction,$extend=$.extend,$data=$.data||function(el,name){return $(el).data(name)},$contains=$.contains||function(parent,el){while(el=el.parentNode){if(el===parent){return true}}return false},elements=[],topLazy=0,waitingMode=0;$[lazyLoadXT]=$extend(options,elementOptions,$[lazyLoadXT]);function getOrDef(obj,prop){return obj[prop]===undefined?options[prop]:obj[prop]}function scrollTop(){var scroll=window.pageYOffset;return(scroll===undefined)?docElement.scrollTop:scroll}$.fn[lazyLoadXT]=function(overrides){overrides=overrides||{};var blankImage=getOrDef(overrides,'blankImage'),checkDuplicates=getOrDef(overrides,'checkDuplicates'),scrollContainer=getOrDef(overrides,'scrollContainer'),elementOptionsOverrides={},prop;$(scrollContainer).on('scroll',queueCheckLazyElements);for(prop in elementOptions){elementOptionsOverrides[prop]=getOrDef(overrides,prop)}return this.each(function(index,el){if(el===window){$(options.selector).lazyLoadXT(overrides)}else{if(checkDuplicates&&$data(el,dataLazied)){return}var $el=$(el).data(dataLazied,1);if(blankImage&&el.tagName==='IMG'&&!el.src){el.src=blankImage}$el[lazyLoadXT]=$extend({},elementOptionsOverrides);triggerEvent('init',$el);elements.push($el)}})};function triggerEvent(event,$el){var handler=options['on'+event];if(handler){if($isFunction(handler)){handler.call($el[0])}else{if(handler.addClass){$el.addClass(handler.addClass)}if(handler.removeClass){$el.removeClass(handler.removeClass)}}}$el.trigger('lazy'+event,[$el]);queueCheckLazyElements()}function triggerLoadOrError(e){triggerEvent(e.type,$(this).off(load_error,triggerLoadOrError))}function checkLazyElements(force){if(!elements.length){return}force=force||options.forceLoad;topLazy=Infinity;var viewportTop=scrollTop(),viewportHeight=window.innerHeight||docElement.clientHeight,viewportWidth=window.innerWidth||docElement.clientWidth,i,length;for(i=0,length=elements.length;i<length;i++){var $el=elements[i],el=$el[0],objData=$el[lazyLoadXT],removeNode=false,visible=force,topEdge;if(!$contains(docElement,el)){removeNode=true}else if(force||!objData.visibleOnly||el.offsetWidth||el.offsetHeight){if(!visible){var elPos=el.getBoundingClientRect(),edgeX=objData.edgeX,edgeY=objData.edgeY;topEdge=(elPos.top+viewportTop-edgeY)-viewportHeight;visible=(topEdge<=viewportTop&&elPos.bottom>-edgeY&&elPos.left<=viewportWidth+edgeX&&elPos.right>-edgeX)}if(visible){triggerEvent('show',$el);var srcAttr=objData.srcAttr,src=$isFunction(srcAttr)?srcAttr($el):el.getAttribute(srcAttr);if(src){$el.on(load_error,triggerLoadOrError);el.src=src}removeNode=true}else{if(topEdge<topLazy){topLazy=topEdge}}}if(removeNode){elements.splice(i--,1);length--}}if(!length){triggerEvent('complete',$(docElement))}}function timeoutLazyElements(){if(waitingMode>1){waitingMode=1;checkLazyElements();setTimeout(timeoutLazyElements,options.throttle)}else{waitingMode=0}}function queueCheckLazyElements(e){if(!elements.length){return}if(e&&e.type==='scroll'&&e.currentTarget===window){if(topLazy>=scrollTop()){return}}if(!waitingMode){setTimeout(timeoutLazyElements,0)}waitingMode=2}function initLazyElements(){$window.lazyLoadXT()}function forceLoadAll(){checkLazyElements(true)}$(document).ready(function(){triggerEvent('start',$window);$window.on(options.loadEvent,initLazyElements).on(options.updateEvent,queueCheckLazyElements).on(options.forceEvent,forceLoadAll);$(document).on(options.updateEvent,queueCheckLazyElements);if(options.autoInit){initLazyElements()}})})(window.jQuery||window.Zepto||window.$,window,document);(function($){var options=$.lazyLoadXT;options.selector+=',video,iframe[data-src]';options.videoPoster='data-poster';$(document).on('lazyshow','video',function(e,$el){var srcAttr=$el.lazyLoadXT.srcAttr,isFuncSrcAttr=$.isFunction(srcAttr);$el.attr('poster',$el.attr(options.videoPoster)).children('source,track').each(function(index,el){var $child=$(el);$child.attr('src',isFuncSrcAttr?srcAttr($child):$child.attr(srcAttr))});this.load()})})(window.jQuery||window.Zepto||window.$); //]]></script>

وبعد تركيب الكود قمت بإختبار السرعه للمدونه عبر PageSpeed Insights وكانت النتيجه كما بالصورتين على التوالى :

lazy load3

ثم

اتمنى أن اكون وفقت فى ايصال معلومه لك
مع وافر تحياتى

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

    لم تعمل عندي

    1. aldewaghry يقول

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

  2. technoa5bar يقول

    شكرا لك استاذي علي الشرح السهل
    تم التطبيق وهناك فرق كبير طبعاََ لكن لا تزال المدونة بطيئة حسب تقرير جوجل فالمدونة حصلت علي تقييم 58 من 100 بعد الكود وكانت 37 وقمت بحذف الكثير من الأكواد الغير ضرورية وحذفت ايضاََ ادوات اضافات كثيرة من السايد بار ولكن لا تزال بطيئة بعض الشيء هل هناك حلول اخري ؟
    رابط مدونتي : technoa5bar.blogspot.com

    1. aldewaghry يقول

      اهلا بك اخى الكريم
      اشكرك على ردك الكريم وبالنسبه الى مدونتك فالمشكله لديك تكمن فى زيادة حجم الصور بالمقالات فعليك بإعادة تصغير الحجم للصور واعادة رفعها مرة اخرى بمدونتك وخصوصا ان عدد المقالات لديك قليل فسهل التعديل وانصحك بهذا البرنامج
      https://www.learnwebseo.com/%d8%b6%d8%ba%d8%b7-%d8%a7%d9%84%d8%b5%d9%88%d8%b1-%d8%a8%d9%88%d8%a7%d8%b3%d8%b7%d8%a9-google-squoosh-%d8%a3%d8%af%d8%a7%d8%a9-%d8%ac%d9%88%d8%ac%d9%84-%d8%a7%d9%84%d9%85%d8%ac%d8%a7%d9%86%d9%8a%d9%87.html
      وبعد الانتهاء من ذلك جرب اختبار السرعه مره اخرى وستجد ان موقعك زادت سرعته.
      ايضا حاول أن يكون عدد المقالات بالواجهه الرئيسيه لايزيد عن 6 مقالات لزيادة سرعة مدونتك .
      اتمنى لك التوفيق

  3. aziz bouj يقول

    الكود رائع جزاك الله خيرا.

    1. aldewaghry يقول

      سكرا لك اخى الكريم

  4. wadoud يقول

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

    1. aldewaghry يقول

      اخى الكريم اهلا بك
      بطء التصفج على الجوال يرجع الى قوة الهاتف نفسه اولا وثانيا انت عندما اختبرت تصفح موقعك على الجوال من خلال خدمات قياس سرعة النت ستظهر لك اخطاء حاول ان تقوم بإصلاحها وتاكد ان اغلب عيوب السرعه فى مدونات بلوجر من القالب
      انصحك بهذا القالب وانا قمت بتعريبه
      https://www.learnwebseo.com/%d9%82%d9%88%d8%a7%d9%84%d8%a8-%d8%a8%d9%84%d9%88%d8%ac%d8%b1-%d9%82%d8%a7%d9%84%d8%a8-fiksioner.html
      تحياتى لك

  5. Amr Mohamed يقول

    شكرا لك تم تسريع تحميل الصفحة

  6. محمد يقول

    شكرا لك انا مركب قالب بيج ماج هل يتوافق كود التسريع ده معاه وياريت تورينا نضعه ازاى اعلى وسم الهيد واذا فشل معايا ارجع النسخة المحفوظة ازاى والف شكر بانتظار ردك

    1. aldewaghry يقول

      نعم يتوافق الكود مع أى فالب بلوجر.. كل ماعليك فعله هو قياس سرعة مدونتك قبل تركيب القالب عن طريق موقع GTmetrix ثم قم بتركيب الكود اعلا الوسم

      اين يتم وضع كود ليزى لود فى قالب بلوجر


      ثم احفظ القالب وجرب ان تعيد اختبار السرعه مره اخرى.وشاهد النتيجة.
      اما لو اردت ان تلغى الكود فيمكنك حذفه مره اخرى وحقظ القالب او التراجع من نفس القالب ويتم هذا انك لاتغلق صفحة القالب حتى تنتهى من الاختبار . وهو لايؤثر نهائيا على تركيبة القالب فأطمئن.
      تحياتى لك
  7. rami يقول

    السلام عليكم ورحمة الله
    شكرا لك وبارك الله في اعمالك
    هذا هو الكود الذي كنت اشتغل به وقد غيرته بالكود الذي وضعته

    1. aldewaghry يقول

      تحياتى لك ولاتتردد فى السؤال عن اى مشكلة تواجهك بعد استخدام الكود – وهذا ان شاء الله لن يحدث – وذلك بالرد هنا وسنتعاون سويا فى حلها.
      تحياتى لك

  8. Aram يقول

    شكراً لك …

    1. aldewaghry يقول

      لاشكر على واجب..تحياتى لك

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More