السلام عليكم ورحمة الله تعالى وبركاته في هذا الشرح سوف نتطرق الى موضوع حول خاصية من الخواص المهمة التي يمكنك من خلالها ان تحل مشكلة سرعة موقعك وبالتالي تحسين السيو هذه الخاصية يستعملها الكثير من اصحاب المواقع و خصوصا مدونات بلوجر لكونها تكون بطيئة ، ببساطة هذه الخاصية تسمى Lazy Loading يعني التحميل الكسول ويصطلح عليها ايضا التحميل عند الطلب يمكنك التحميل الكسول من تسريع الموقع من خلال عدم تحميل كامل الصفحة دفعة واحدة وفي الغالب يتم تطبيقها على الصور حيث يتم تأخير تحميل الصور لتطبيق هذه الخاصية على موقعك لا تحتاج ان تكون مبرمج محترف فقط ان تكون عندك معرفة قليلة بلغات برمجة الويب وسأشرح في آخر الموضوع طريقة بسيطة لتركيب خاصية Lazy Load على صور موقعك .
ماهو Lazy Loading ؟
عادة عندما يفتح المستخدم صفحة الويب يتم تحميل محتويات الصفحة بالكامل وعرضها دفعة واحدة وهذا يستهلك الانترنت و يقلل من سرعة الموقع خصوصا اننا لا نضمن ان هذا المستخدم سيعرض بالفعل كل المحتوى التي تم تحميله لهذا تأتي خاصية التحميل الكسول او التحميل عند الطلب والتي هي عبارة عن اسلوب برمجة يمكننا من تسريع تحميل صفحات موقعك يعني بدلا من تحميل صفحة ما بالكامل (مع كل مواردها من الصور والفديوا) وعرضها على الزائر دفعة واحدة كما هو الحال في التحميل العادي تأتي خاصية Lazy Loading لكي تمكنك من تحميل البيانات المطلوبة فقط وتأخير الباقي وعلى سبيل المثال نفترض انك دخلت على صفحة ويب مدعومة بخاصية التحميل الكسول و لنفترض ان هذه الصفحة تحتوي على الكثير من الصور هنا خاصية Lazy Load ستقوم بتحميل فقط الصور التي في الواجهة اما الصور التي هي خارج الواجهة فلن يتم تحميلها الا بعد ان تعرض مباشرة امام الزائر انظر هذه الصورة التوضيحية :
لمذا يجب ان اضيف التحميل البطيئ على موقعي ؟
ببساطة لأنه سيجعل موقعك اسرع من خلال تحميل فقط الصور المطلوبة (التي تظهر في الواجهة) وتجاهل الباقي كما انه ان كان يوجد في موقعك فديوا على Iframe مثل فيديوهات اليوتوب فكذلك سيتم تأخيرتحميلها الى ان تظهر في الواجهة وهذا سيجعل موقعك سريع مما سيؤدي الى تحسين سيو موقع وتحسين ترتيبه في أليكسا وتصنيفه على انه سريع او سريع جدا .
يمكننا تركيب التحميل الكسول على موارد عديدة أهمها الصور وفديوهات Iframe و كمثال سأقدم لك طريقة إضافة التحميل الكسول لصور موقعك .
طريقة تركيب التحميل الكسول على صور موقعك
سأحاول الآن شرح لك طريقة تركيب التحميل الكسول على صور موقعك لكن قبل ذلك اريد ان احيل على انه يفضل اضافة التحميل الكسول لصور من خلال قالب موقعك على سبيل المثال سنضيف التحميل الكسول لصور المشاركات في الصفحة الرئيسية وكذلك لشريط الجانبي لموقعك ولا داعي لإضافة التحميل الكسول لصور الصفحات وداخل المواضيع لأن هذا سيؤثر على ارشفة الصور على محركات البحث .
1- قم بالذهاب الى قالب موقعك او مدونتك وابحث عن جميع الصور وجعلها على هذا الشكل :
- قم بإضافة class="lazy" الى الصورة
- قم بوضع رابط الصورة داخل data-src بدل src
- قم بإستبدال رابط src كما هو موضح اسفله
<img class="lazy" data-src="" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/><script src="https://raw.githack.com/hamianemohssine/7amian/main/lazyload.js"></script>
<script type="text/javascript">
$( window ).on( "load", function() {
$('.lazy').lazy();
});
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"/>الآن كل ما عليك القيام به هو فحص سرعة موقعك عبر Page Speed Insights وستلاحظ ان موقع اصبح اسرع في التحميل
انتهى موضوع التحميل الكسول واتمنى ☝ ان يكون الموضوع قد أفادكم كنتم مع 👨 محسن حميان على مدونة حميان للمعلوميات ❤
Tags
برمجة