Lazy Loading
عند استخدام منصة عبر الإنترنت مثل موقع ويب، تصبح سرعة التحميل والتحسين ضرورية، حيث يطلب المستخدمون المزيد والمزيد من السرعة والاستجابة.
لهذا السبب، أصبح نمط تصميم الصفحات المعروف بـ lazy loading ذا أهمية متزايدة. لكن ما هو lazy loading (التحميل المؤجل) بالضبط؟
هذا ما سنُغطِّيه أدناه.
ما هو Lazy Loading؟
تحديدًا، lazy loading هو تقنية ونمط تصميم برمجي يُطبَّق على المواقع، حيث لا يتم تحميل العناصر والموارد بالكامل، بل تُنفَّذ على الفور أو عند الطلب (on-demand) وفقًا لاستخدام المستخدم، مما يخلق "تحميلًا مؤجلًا" للمحتوى.
بهذه الطريقة، تُحسَّن الموارد ويتم تحميل المحتوى مثل النصوص والفيديوهات والصور وغيرها من المواد فقط عند الحاجة، مما يُحسِّن السرعة، استخدام الذاكرة والمعالجة، الاستجابة، وزمن التحميل. يتناقض هذا مع التحميل الكامل (full loading) حيث يتم تحميل الموقع أو الصفحة بالكامل حتى لو لم يستخدم المستخدم كل العناصر.
المزايا العامة لـ Lazy loading
نظرًا لأن الغرض الرئيسي من lazy loading هو تحسين تحميل العناصر فقط عند استخدامها، فإن لها مزايا متعددة يمكن تلخيصها على النحو التالي:
- سرعة عرض العناصر الرئيسية للموقع.
- تحسين كبير في تجربة المستخدم (UX) للموقع.
- تحسين الأداء على الأجهزة المحمولة، خاصةً عندما تكون موارد الاتصال بالشبكة محدودة؛ مع تفعيل Lazy Loading، يمكن تصفح الصفحات حتى في ظروف تغطية ضعيفة لن تكون قابلة للاستخدام بدونه.
- التحسين العام والشامل لموارد الجهاز المحمول مثل CPU و RAM والبطارية.
- زيادة وقت البقاء في الصفحة دون مشاكل تحميل، مما يؤدي بشكل غير مباشر إلى تحسين الترتيب.
- تقليل معدل الارتداد.
كذلك، فإن نهج برمجة lazy loading له، من منظور تقني أكثر، المزايا والمستجدات التالية:
- Lazy loading متوافق تمامًا مع أُطر JS مثل React و Angular، وكذلك مع منصات CMS مثل WordPress. في الواقع، أُفيد مؤخرًا بأن lazy loading للصور سيكون مُضمَّنًا افتراضيًا اعتبارًا من إصدار WordPress 5.5.
- بفضل API IntersectionObserver، لا يُخفي الصور عن محركات البحث.
- يدعم أنواعًا متعددة من المحتوى مثل الصور والموارد ذات الفئات responsive.
- يسمح بفهرسة صور الموقع، وهو أمر مهم جدًا لـ SEO.
- إنه مورد ودود لـ SEO بنسبة 100% لأنه يُحسِّن العديد من النقاط الأساسية لـ SEO، سواء بشكل مباشر أو غير مباشر.
كيف نُطبِّق lazy loading في WordPress؟
إذا كان لديك موقع على WordPress، فاعلم أن لديك ميزة كبيرة، حيث توجد العديد من الحلول لتطبيق lazy loading لجعل الصفحات تُحمَّل بشكل أسرع بكثير. توضح لقطة الشاشة التالية بعض الحلول الممكنة في مستودع plugins:
رؤية أبرز plugins WordPress لتنفيذ lazy loading.
لإجراء هذا التنفيذ، لديك عدة خيارات:
- اختيار plugin محدد لـ lazy loading مثل "Lazy loader" أو "a3 lazy load"...
- اختيار plugin لتحسين الويب مثل "WP Rocket"، الذي يتضمن هذا الخيار افتراضيًا مع تحسينات أخرى.
الجوانب المتعلقة بـ SEO في Lazy Loading
نعرف بالفعل المهمة الرئيسية للتحميل المؤجل ومزاياه الأساسية، وكيف يؤثر على تحسين أداء الصفحة، UX، و SEO.
علينا الآن استخدام التحميل المؤجل بحكمة للاستفادة منه قدر الإمكان، لأن استخدامه بشكل غير صحيح قد يُسبب التأثير المعاكس.
على سبيل المثال، يستخدم lazy loading الـ cache لتحسين السرعة، لذا إذا تم تخزين الكثير من المحتوى هناك، فقد يحدث بطء أو أخطاء إذا لم يتم تنفيذه بشكل صحيح، وقد يمنع حتى Google من فهرسة الصفحة وعناصرها، مما يؤثر بشدة على ترتيب الموقع. بعض النصائح هي:
- تحسين الـ cache واستخدامه بحكمة.
- استخدام Google Search Console للتحقق من المحتوى الذي يُجري Google له crawl في الموقع.
- إضافة نص ALT لكل صورة حتى يستطيع Google فهرستها.
- استخدام API IntersectionObserver دائمًا.
- بفضل ميزة Blink LazyLoad في متصفح Chrome، أضف خاصية loading إلى iframe أو المحتوى المضمَّن من صفحات أو مصادر أخرى. تنطبق على الصور والصور الفوتوغرافية والفيديوهات والنصوص والمحتويات الأخرى.
Lazy loading و UX
فيما يتعلق بالموقع، فإن التحسين التقني والعام لتقديم تجربة مستخدم (UX) جيدة فيما يتعلق بزمن التحميل والاستجابة واستخدام الموارد والسلوك العام أمر ضروري. إذا كان الموقع غير سريع الاستجابة، فسيرتفع معدل الارتداد، وستكون تجربة المستخدم سيئة، مما سيؤثر على حركة المرور والرؤية وحتى SEO.
مع التحميل المؤجل، الهدف هو تحميل المحتوى تدريجيًا وعندما يحتاجه المستخدم أثناء تمرير الصفحة، سواء كانت صورًا أو نصوصًا، مما يُحسِّن استخدام الموارد بشكل كبير مقارنة بتحميل المنصة بأكملها التي قد تعرض عناصر غير ذات أهمية للمستخدم، وهكذا تتحسن تجربة المستخدم للموقع بشكل جذري في خطوة واحدة فقط.
Lazy loading الأصلي في Chrome (HTML)
لإظهار الأهمية التي يوليها Google لـ UX، أصبح من الممكن منذ عام 2020 ومن الإصدار 75 لمتصفح Chrome إضافة lazy loading أصلي إلى وسوم HTML للصفحات والمحتوى الوسائطي مثل الصور والفيديوهات وأكثر.
بإضافة خاصية lazy loading لـ HTML تلقائيًا بهذه الطريقة، يفهم متصفح Chrome أن محتوى الصفحة يُحمَّل وفقًا لتصفح المستخدم وليس كله مرة واحدة، مما يُحسِّن السرعة والاستجابة. لاستخدام ذلك، أضف خاصية loading بقيمة lazy إلى كل وسم من الموارد البصرية والوسائطية وفي iframe:
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe> يمكن استخدام هذا المورد في الصور، والتي تُمثِّل جزءًا كبيرًا من المعلومات التي يتعين على المتصفح تنزيلها. وأيضًا في iframe. تذكر أننا نستخدمها لتضمين موارد خارجية في الموقع.
من المهم تسليط الضوء على استخدامه في iframe، لأنها قد تُمثِّل نقطة تحميل مهمة في الموقع.
كعيب، فإن lazy loading الأصلي متوافق فقط مع Chrome، ولكن في حالة عدم وجود دعم كما يحدث في Mozilla Firefox، يمكن تنفيذ استخدامه في متصفحات أخرى من خلال مكتبات متوافقة.
استخدام Lazy loading
كما ذكرنا، يُركِّز lazy loading على تأخير تحميل عناصر الصفحة لتحسين الاستجابة. بهذا المعنى، يُركِّز الاستخدام المعطى للأداة على جميع الموارد البصرية، لكن مع التركيز على الصور والفيديوهات و iframes التي قد تتضمن مستندات وملفات أخرى، كل ذلك من خلال تعديل الوسوم وإدراج خاصية loading بقيمة lazy، مما يُحسِّن السرعة العامة للموقع حتى مع وجود عناصر ثقيلة أو محتوى وسائطي كبير.
هل لديك أسئلة حول lazy loading أو ترغب في تنفيذه في مشروعك؟ سنساعدك!
التوثيق والمراجع:
بقلم: David Kaufmann
قضيتُ السنوات العشر الأخيرة منشغلًا تمامًا بـ SEO — وبصراحة، لم أكن لأبدّل ذلك بأي شيء آخر.
تطوّرت مسيرتي إلى مستوى جديد عندما عملت أخصّائيَّ SEO أوّل في Chess.com — أحد أكثر 100 موقع زيارةً على الإنترنت بأكمله. العمل على هذا النطاق علّمني ما لم تعلّمه لي أي دورة أو شهادة.
من هذه التجربة، أسّستُ SEO Alive — وكالة للعلامات التجارية الجادّة بشأن النموّ العضوي. وبما أنّي لم أجد أداةً تُتقن العالَمَين الكلاسيكي وعصر الذكاء الاصطناعي، بنيتُ SEOcrawl. إن كنت تبحث عن شريك SEO خبير يعشق هذا المجال — يسعدني التواصل معك!
اكتشف المزيد من محتوى هذا الكاتب
