تعد سرعة موقع الويب أحد العوامل الحاسمة لتحسين الترتيب وعلى مدونة بلوجر Blogger الخاصة بك، لن تجد أي مكونات إضافية للتخزين المؤقت وتحسين الصورlazy load.
تحميل الصور الكسول lazy load
سنتعرف اليوم علي افضل الممارسات لتحسين سرعة مدونة بلوجر عن طريق تحميل الصور الكسول lazy load، وبالتأكيد من أهم العوامل لمُحسنات تحسين محركات البحث والحصول على مرتبة اعلى هو تحسين سرعة الموقع.
ما هو التحميل البطيء "التحميل الكسول lazy load"؟
التحميل الكسول lazy load هي تقنية تحسين لمواقع الويب تعمل على تأخير تحميل الموارد أو الكائنات حتى يتم الاحتياج إليها فعليًا وتقليل وقت التحميل الأولي.
على سبيل المثال، إذا كانت صفحة الويب تحتوي على صور متعددة في أسفل الصفحة وكان على المستخدم التمرير لأسفل لرؤية الصورة، فيمكنك عرض عنصر نائب وتحميل الصورة الكاملة كسول فقط عندما يصل المستخدم إلى موقعها.
ماهي فوائد التحميل الكسول lazy load؟
هناك العديد من الفوائد عند تمكين التحميل الكسول للصور lazy load:
- يقلل من وقت التحميل الأولي عن طريق تقليل وزن الصفحة.
- يحفظ موارد الخادم والعميل.
- التحميل الكسول يساعد في الحفاظ على النطاق الترددي من خلال تقديم المحتوى للمستخدمين فقط إذا طلب ذلك.
- يساعد في الحفاظ على سرعة الموقع.
كيف يعمل التحميل الكسول lazy loading؟
على سبيل المثال، إذا كان منشور المدونة يحتوي على 6 صور وقام المستخدم بالتمرير لأسفل الصفحة إلى الصورة الثالثة ولم يقم بالتمرير لأسفل أكثر. في هذه الحالة، سيقوم المتصفح بتحميل 3 صور فقط وبالتالي توفير بعض موارد الخادم.
كيفية تمكين التحميل الكسول lazy load على بلوجر؟
بالتأكيد، تلعب الصور أدوارًا مهمة في سرعة موقع الويب، وإذا كنت تستخدم الكثير من الصور على صفحة ويب، فستطلب المزيد من الموارد وتبطئ سرعة تحميل صفحة الويب الخاصة بك.
يجب تحميل موقع الويب في غضون 3 ثوانٍ للحصول على تجربة مستخدم أفضل، ولكن وفقًا لأبحاث Google، فإن متوسط وقت تحميل صفحات الويب هو 22 ثانية. لتحسين سرعة موقع الويب الخاص بك، تحتاج إلى تحسين صورك بشكل أفضل.
في WordPress، ستجد العديد من المكونات الإضافية لتحسين الصور مثل ShortPixel، imagify، وغيرها الكثير، ولكن بلوجر Blogger، لا تسمح بالمكونات الإضافية.
لذلك، يجب عليك تحسين صورك يدويًا وتحميلها إلى موقع الويب الخاص بك. لتحسين سرعة الموقع لمحركات البحث، وتوفير تجربه للمستخدم أفضل.
بعض الأساليب التي يمكنك اتباعها لتحسين سرعة موقع الويب الخاص بك باستخدام تنسيقات صور، هو تحويل الصور إلي ويب Webp. ويمكنك أيضًا تنفيذ lazyload على مدونة بلوجر Blogger الخاصة بك للحصول على تجربة مستخدم وسرعة أفضل.
خطوات تمكين lazyload التحميل الكسول على بلوجر
اتبع الخطوات التالية لتمكين تقنية التحميل الكسول lazy load على مدونة بلوجرBlogger الخاصة بك، سيتم تطبيق التحميل البطيء على جميع الصور تلقائيًا. وليست هناك حاجة لإضافة العلامات المضمنة <img> يدويًا.
ملحوظة:يوصى بعمل نسخة احتياطية من القالب الحالي قبل تخصيص القالب أو إجراء تغييرات عليه لتجنب حدوث أي أخطاء، حتي يمكنك استعادة القالب الأصلي.
إضافة كود التحميل الكسول lazyload لمدونة Blogger:
- قم بتسجيل الدخول إلى Blogger.
- انتقل إلى لوحة تحكم مدونتك ثم المظهر
- ثم انقر فوق المظهر وتعديل HTML من القائمة المنسدلة.
الصق كود جافا سكريبت أعلى علامة <body/> مباشرة واحفظه. كما موضح بالصورة التالية.
<script>//<;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>
يمكنك الآن التحقق من سرعة مدونتك على إحصاءات Google لسرعة صفحة، وسيظهر ما إذا كان التحميل البطيء قد تم تنفيذه بشكل صحيح على موقعك أم لا.
طريقة اخري لتمكين التحميل البطيء lazyload
إذا كنت لا ترغب في تحميل الصور البطيئة باستخدام كود جافا، فيمكنك استخدام الملف الأصلي lazyloading من المتصفح.
لذلك، في هذه الطريقة، لا تحتاج إلى أي كود جافا سكريبت في قالبك. تحتاج فقط إلى إضافة رمز صغير يدويًا إلى رمز صورتك.
<img loading="lazy" src="#" alt="image alt tag" />
تساعد إضافة هذا السطر الصغير من التعليمات البرمجية إلى علامة الصورة الخاصة بك المتصفح على فهم أن هذه الصورة سيتم تحميلها كسولًا.
لذلك، سوف يقوم المتصفح بتحميل تلك الصور فقط عندما يقوم المستخدم بالتمرير لأسفل أسفل الصفحة والوصول إلى موضع الصورة. وهذه الميزة مستخدمة في معظم المتصفحات الحديثة.
يمكنك إما استخدام الطريقة الاولي كود جافا الآلي، أو الطريقة الثانية اليدوية لتنفيذ التحميل الكسول lazy load على مدونة بلوجر الخاصة بك.
سعدنا بوجودك 😍 شكراً لك اترك تعليقك بمدى أستفادتك من المحتوى دعمنا لنا وسيتم الرد عليك في أقرب وقت. يسعدنا دائماً اقتراحاتكم بخصوص المحتوى وأذا كان لديك أى أستفسار لاتترد بالتعليق أو المراسلة عبر صندوق البريد.