إذا كنت تعمل على تحسين سرعة وأداء موقعك فأنت بالفعل قد سمعت أو ستسمع قريبًا عن مصطلح التحميل الكسول أو lazy loading وعلى الرغم من أنه كسول ولكنه عبارة عن تقنية تعمل على جعل موقعك أخف وأسرع بكثير وتضمن تجربة أفضل للزائر... باختصار إنها تقنية عليك الاعتماد عليها!
ما هو التحميل الكسول lazy loading ولماذا هو بهذه الأهمية للمواقع؟ ما هي الآلية التي يعمل بها وكيف يؤثر على موقعك ويجعله أسرع بكثير وأخف؟ كيف يمكن تفعيله وهل الأمر سهل أم هناك الكثير من التعقيد؟ وكيف يمكن ضمان أفضل النتائج؟
التحميل الكسول أو lazy loading
الصور ومقاطع الفيديو جزء أساسي ومهم من أي موقع ولا يمنك تخيل موقعك بدونها! ولكنها في الوقت نفسه ذات حجم كبير جدًا وهي جزء لا يتجزأ عن سبب بطء موقعك وزيادة وقت التحميل الذي يحتاجه.
لماذا وقت تحميل الصفحة مهم؟
وقت التحميل لا يلعب دور مباشر في تحديد تصنيف موقعك ولكن في الحقيقة تأثيره أكبر وأشد من ذلك! لأن زيادة مدة تحميل الصفحة حتى 3 ثانية يمكن أن يجعل تجربة المستخدم غير مريحة أو مزعجة حرفيًا وبالتالي يزيد من معدل الارتداد بنسبة لا يستهان بها يمكن أن تصل حتى 31%، ومحركات البحث لا تكون متسامحة مع معدل الارتداد الكبير والنتيجة هي تراجع ترتيب موقعك.
كيف تؤثر الصور على وقت التحميل؟
ليس الصور فقط وإنما كل الموارد تلعب دور في هذا الخصوص، لأنه يتم تحميلها كلها دفعة واحدة لتكون في الصفحة جاهزة قبل أن يتم عرض الصفحة حتى ولو كانت هذه الصور في نهاية المقال ولن يصل إليها الزائر الآن أو لن يصل إليها أبدًا، هذا الأمر يعني أن هناك وقت تحميل لا ضرورة له ويمكن أن يتم تأخيره قليلًا إلى أن يحين وقته.
ما هو حل بطء تحميل الصفحات؟
الحل ليس في حذف الصور أو استخدام أقل عدد ممكن منها الحل في الاعتماد على التحميل الكسول lazy loading فهو من اسمه تحميل كسول فعلًا لا يقوم بتحميل كل الصور الموجودة في الصفحة دفعة واحدة بل يعمل على تحميل الصور والإطارات الظاهرة ضمن شاشة العرض (إطار العرض) وعندما يقوم بالزائر بالتمرير والاقتراب من الصورة التالية يبدأ بتحميلها لتظهر في الوقت المناسب.
وبالتالي بالاعتماد على التحميل الكسول لن يتم تحميل الصور البعيدة أو الصور غير الضرورية التي لن يصل إليها الزائر، ولكن لا تقلق! فهذا لا يؤثر على تجربة المستخدم بشكل سلبي وإنما سوف يجعلها أفضل.
أفضل كيف؟ من خلال استخدام التقنية بطريقة صحيحة سوف تظهر الصور في الوقت المناسب وفي حال قام القارئ بالتمرير أسرع من تحميل الصور فالصور سوف تظهر بطريقة ديناميكية توحي للزائر أنه قد تم إنشاء الموقع لتظهر الصور فيه بهذه الطريقة.
إذن ما هو التحميل الكسول lazy loading؟
التحميل الكسول هو عبارة عن تقنية تعمل على تأخير تحميل الصور بحيث يتم في البداية تحميل الصور الموجودة في أعلى الصفحة ضمن إطار رؤية المستخدم فقط ومع التمرير يتم تحميل المزيد من الصور التي ستكون ضمن إطار الرؤية بشكل تدريجي.
وبالتالي سيكون حجم الصفحة في البداية صغير ووقت التحميل قصير، وفيما بعد سيكون ما يتم تحميله قليل يحتاج لوقت قليل لأنه يحصل بشكل تدريجي وليس دفعة واحدة.
أهمية التحميل الكسول Lazy loading
قد بدأت بالفعل تدرك مدى أهمية اعتماد التحميل الكسول lazy loading لموقعك فالصور غير المهمة والبعيدة لن يتم تحميلها حتى يصل أو يقترب منها الزائر، وبالتالي فالفوائد التي تضمنتها هذه التقنية هي:
1 – أداء وسرعة أعلى لموقعك
وهي الفائدة الأكثر وضوحًا والتي سوف تلمسها ويشعر بها الزوار لأن الصفحات ستكون أسرع كثيرًا وأخف وبالتالي لن يحتاج الزوار للانتظار قبل أن يتم عرض الصفحة، فيمكن أن يقل وقت التحميل حتى الربع.
يمكنك ملاحظة الفرق من خلال إجراء قياس السرعة على الصفحة نفسها قبل وبعد اعتماد التحميل الكسول باستخدام أداة PageSpeed Insights ويمكنك ملاحظة مدى الفائدة من استخدامها.
2 – توفير الكثير من التكلفة
الفائدة الثانية الأكثر أهمية بالنسبة لك عند استخدام خاصية التحميل الكسول هي توفير الكثير من التكلفة! فخدمات الاستضافة والتخزين السحابي وشبكات التوصيل وغيرها... تحدد تكلفتها بناءً على عدد البايت المنقول.
وبالتالي عندما لا يتم تحميل كل الموارد دفعة واحدة وفي حال لم يتم تحميل الصور في نهاية المقال أبدًا (بشكل خاص بالنسبة للزوار الذين يخرجون فورًا من الصفحة أو الذين يتفاعلون مع الجزء العلوي من المحتوى فقط) فأنت ستوفر ما يصل إلى النصف من البايت المنقول.
3 – تجربة مستخدم أفضل
الفائدة من التحميل الكسول لا تتعلق بك وبموقعك فحسب بل سوف يلمسها المستخدم أيضًا، فهو سوف يختبر تجربة أفضل لأن الموقع سيبدو أكثر ديناميكية ولأن العناصر يتم تحميلها سريعًا فهذا الأمر سوف يشجعه على مواصلة التمرير والقراءة.
بالإضافة إلى أمر في غاية الأهمية فالتحميل الكسول سوف يوفر للمستخدم مقدار جيد من البيانات عندما يقوم بتصفح المواقع فبدلًا من أن يتم تحميل الموارد كاملة سوف يتم الأمر بشكل تدريجي عند الحاجة لها.
طرق تفعيل التحميل الكسول lazy loading على وورد بريس
تفعيل التحميل الكسول في وورد بريس ليس بالمهمة المعقدة، وأنت هنا أمام 3 اختيارات: الأول في الاعتماد على تحديث وورد بريس wordpress 5.5 والثاني هو الاعتماد على الإضافات والثالث في الاعتماد على الأكواد البرمجية أي بدون إضافات.
التحميل الكسول في تحديث وورد بريس WordPress 5.5+
تحديث وورد بريس WordPress 5.5+ في 11 آب 2020 أتى مع ميزات كثيرة جديدة مهمة واحدة من هذه الميزات كانت التحميل الكسول للصور lazy loading أي أنها ميزة ضمن تحديث وورد بريس ولم تعد بحاجة لإضافات أو إضافة نصوص ترميز لأجل تفعيلها.
تفعيل التحميل الكسول lazy loading بالاعتماد على الإضافات
إن تفعيل التحميل الكسول بالاعتماد على الإضافات يعتبر الاختيار الأسهل والذي يوفر لك إمكانيات كثيرة في التحكم بتحميل الصور والفيديو وطريقة عرضها، وقمنا باختيار أفضل 5 إضافات للتحميل الكسول.
1 – إضافة Lazy Load by WP Rocket
مكون إضافي مجاني يعمل على تحميل الصور عندما تكون ضمن إطار رؤية المستخدم، بالإضافة إلى إمكانية تحويل إطارات الصور إلى نصوص بديلة أو صورة مصغرة... بحيث تضمن تجربة مستخدم أفضل.
2 – إضافة A3 Lazy Load
إضافة سهلة الاستخدام وعالية الأداء فيمكن بالاعتماد عليها لتفعيل التحميل الكسول بشكل عام أو باختيار عناصر من صفحة الموقع لتعمل بالتحميل الكسول بالإضافة إلى مكانية تحديد وقت التحميل.
3 – إضافة Lazy Loader
إضافة مجانية خفيفة تعمل على تفعيل التحميل الكسول لكل من الصور ومقاطع الفيديو والملفات الصوتية، وحتى أنه يمكنك تفعيله لأجل صور الخلفية والإطارات المختلفة، توفر ميزات عديدة وإمكانيات متنوعة من التحميل الكسول بالاعتماد على نصوص ترميز بسيطة.
4 – إضافة Speed Up- Lazy Load
إضافة سهلة جدًا وخفيفة من حيث الحجم فحجمها 5 كيلو بايت فقط، كل ما عليك القيام به هو تثبيتها وانتهى الأمر بدون الحاجة لإدخال أي نصوص ترميز أو إجراء أي تعديلات.
5 – إضافة Optimole
مكون إضافي رائع سهل الاستخدام فيمكن لأي شخص مبتدئ أو لديه بعض المعرفة بالترميز أن يعتمد على هذه الإضافة، فهي تعمل على تقليل حجم الصور بشكل كبير إلى ما يزيد عن 80% من حجمها الأصلي بالإضافة إلى ضمان تحسن كبير في أداء موقعك.
نصائح وملاحظات مهمة حول التحميل الكسول lazy loading
أخيرًا إليك بعض النصائح التي يمكن من خلالها ضمان أفضل نتيجة من التحميل الكسول lazy loading:
- قبل تفعيل التحميل الكسول وبشكل خاص لو كنت ستعتمد طريقة نصوص الترميز فيفضل أن تقوم بإنشاء نسخة احتياطية من موقعك لمواجهة أي خطأ أو مشكلة قد تواجهك.
- في الصفحات القصيرة التي يمكن أن يصل المستخدم إلى نهايتها بتمريرة أو اثنتين فيمكنك تخطي التحميل الكسول لأنه لا يلعب دور كبير هنا، وبشكل خاص لو كانت هذه الصفحات لا تضم ملفات وسائط.
- اعتمد على المؤثرات مع التحميل الكسول مثل: التلاشي – الإطارات الضبابية – اعتماد إطار باللون الطاغي على الصور قبل ظهورها....
- في التحميل الكسول عادةً يتم تحميل الصور بمجرد أن تتلامس حافتها العلوية مع الحاقة السفلية لإطار رؤية المستخدم وهنا يمكن أن يتأخر تحميلها لأجزاء من الثانية في حال قام المستخدم بالتمرير سريعًا والحل في هذه الحالة يكمن في زيادة هامش التحميل أي في أن يتم اختيار قيمة 500 بكسل بين إطار الصورة العلوي وإطار العرض بدلًا من القيمة 0.
إذا كنت حقًا تريد تحسين أداء موقعك وزيادة سرعته فعليك التفكير بشكل حقيقي بالتحميل الكسول لأنه أكثر من قادر على تحقيق ما تريده لموقعك.
المصادر
- Use lazy-loading to improve loading speed - web.dev
- Browser-level image lazy-loading for the web - web.dev
- The Complete Guide to Lazy Loading Images - css-tricks