 |
| شرح كود lazy Load لتسريع مدونة بلوجر |
تسريع مدونة بلوجر، كيف اسرع مدونتى ، كود لتسريع تصفح مدونة بلوجر، مدونتى بطيئه كيف اسرعها، اختبار سرعة مدونة بلوجر ، كود lazy load لتسريع مدونات بلوجر.
كل هذه أسئله تتبادر الى الذهن حين نرى مدونتنا على بلوجر بطيئه، فنقوم بالبحث فى محرك البحث جوجل عن سبيل لزيادة سرعة المدونه بالطرق المعروفه سواء أكواد لتسريع التصفح أو من خلال تعديلات بالقالب الخاص بالمدونه ..... الخ .فكل صاحب مدونه يتمنى ان تكون مدونته سريعه أمام الزائر لكى يكسب من خلال ذلك زوار ويزيد من تصفح مواضيع المدونه نظرا لسهولة تصفحها وهو مايفضله الزائر وبالتالى يقل الـ Bounce rate لمدونتك مما يؤهلها لكسب ثقة محركات البحث .
وهنا فى مقالى هذا سأتطرق الى وسيله فعاله لتسريع التصفح فى مدونتك بلوجر وهو كود رائع اسمه Lazy Load يعمل على تسريع المدونه .
ماهو كود Lazy Load وما هي وظيفته:
كود Lazy Load هو عباره عن كود برمجى بلغة html وظيفته العمل على تتابع تحميل محتويات الصفحه بمعنى أنه عندما يكون لديك صفحه بها كثير من الصور فهذا الكود يقوم أولا بتحميل الكلام الموجود بالصفحه ثم يقوم بعد ذلك بتحميل الصور وعرضها أمامك حسب الطلب أى عند تحريك الصفحه لأسفل تظهر لديك الصور بالتتابع ممايكسب مدونتك سرعه فى التصفح وهذا مانسعى اليه .لماذا يجب عليك نحميل كود Lazy Load بمدونتك
لم تعد مدوناتنا على منصة بلوجر وغيرها تحتوى على صفحه او صفحتين وقليل من الصور مع كثير من النصوص ممالايحدث أى حمل زائد على تصفح تلك المدونه ، ولكن تغير الحال اليوم حيث تحتوى المدونات على كثير من الصور وأزرار وسائل التواصل الاجتماعى والاكواد والاعلانات وغيرها الأمر الذى يتطلب سرعة تحميل لتلك الصفحات أمام الزائر والا ستفقد زوارك وثقة محركات البحث فى مدونتك .كل هذا يتطلب تسريع لمدونتك وهنا بأتى الطلب على تحميل كود ليزى لود بمدونتك ودمجه بالقالب الخاص بمدونتك للوصول للسرعه المثاليه لمدونتك والتى يفضلها الزائر.
ولكى نبدأ يجب أولا أخذ نسخه احتياطيه من قالب مدونتك لكى يتم العمل بدون اخطاء بحيث لو حدث أى خطأ تستطيع الرجوع للنسخه الاحتياطيه من قالبك .
ويتم ذلك عبر الدخول الى لوحة تحكم مدونتك ..... ثم المظهر ..... ثم اخذ نسخه احتياطيه وحفظها بجهازك .... شاهد الصوره التاليه:
ثم من الصوره التاليه اضغط على تنزيل المظهر ....
1- اضافة jQuery الى مدونتك .
اغلب القوالب الحديثه والمتجاوبه تستخدم jQuery فهذا السكربت مهم جدا فى مدونتك حيث يعمل على تشغيل وظيفة المقالات ذات الصله، السايق والقادم بالنسبه للمقالات ، السلايدر بقالب المدونه وغيره الكثير .
فيمكنك التاكد من وجود هذا الكود بمدونتك من خلال البحث فى القالب ، أما القوالب القديمه والتى ان لم يوجد بها الكود فتستطيع وضع الكود التالى بقالب مدونتك
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>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.ويتم اضافة الكود التالى بأعلى الوسم بقالب المدونه.
<script type="text/javascript">//-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(topEdge1){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> 
ثم
اتمنى أن اكون وفقت فى ايصال معلومه لكم
مع وافر تحياتى
