كيفية استخدام Lazy Loading للحصول على نتيجة سرعة مثالية على الأجهزة المحمولة

هل يجتاز موقعك اختبار سرعة موقع Google للجوال؟ رقم؟ قد ترغب في إلقاء نظرة على صور التحميل البطيئة.

أداء موقع الويب أمر بالغ الأهمية. إذا كان تحميل مدونتك أو موقعك الإلكتروني بطيئًا ، فهذا أمر مروع لتجربة المستخدم.

لن ينتظر أي شخص خمس أو عشر ثوانٍ حتى يتم تحميل موقعك. يجب أن تكون سرعة الإنترنت أو سرعة التنزيل سريعة. سيؤدي موقع الويب البطيء إلى زيادة معدل الارتداد وخفض معدل التحويل.

عند إجراء اختبار سرعة موقع الويب لموقعك ، فإن سرعة سطح المكتب لديك عادة ما تكون على ما يرام. ولكن كيف تعمل صفحاتك في اختبار سرعة الأجهزة المحمولة؟

استعد لمستخدمي الهاتف المحمول

تم تصميم معظم برامج المدونات ومواقع الويب بشكل جيد لعرضها على سطح المكتب.

يستخدمون تصميمًا سريع الاستجابة لتقديم إصدار محمول.

في حين أن هذا حل عملي ، إلا أن له عيبًا كبيرًا.

إذا كان موقعك متجاوبًا ، فسيعمل على الأجهزة المحمولة.

لكن أحجام ملفات صورك مخصصة لسطح المكتب ، لذا فإن سرعة موقع الجوال الخاص بك تكون أبطأ بكثير.

إذا أجريت اختبار Google Pagespeed Insights ، فقد تكون نتيجتك معقولة وباللون الأخضر لسطح المكتب ، لكنها تبدو هكذا لإصدار هاتفك المحمول.

عندما تفكر في أن نصف زوار موقعك على الويب أو أكثر يستخدمون الأجهزة المحمولة ، فأنت تحتاج حقًا إلى تحسين وقت تحميل صفحتك وسرعة الهاتف المحمول.

تتجه Google إلى استخدام فهرس الجوال أولاً كعامل ترتيب.

هناك العديد من خدمات اختبار سرعة الموقع المجانية التي يمكنك استخدامها لمراقبة الأداء.

ومع ذلك ، لا تقيس جميع تطبيقات speedtest سرعات موقع الجوال. لذلك لا تطمئن إلى النتائج الجيدة لسرعة صفحة موقع سطح المكتب.

يتيح لك WebpageTest تحديد إصدارات مختلفة للجوال ، لذا فهو بديل لـ Google.

تأكد دائمًا من أنه يمكنك التحقق من إصدار هاتفك المحمول لأن الأجهزة تتصل بسرعة اتصال إنترنت أبطأ بكثير.

إذا كانت نتائجك غير مرضية ، فعليك العمل.

كيف تحسن أداء هاتفك المحمول؟

تساهم العديد من العوامل في إبطاء سرعة الموقع على كل من أجهزة سطح المكتب والجوّال.

يمكن تحميل ملفات Javascript و CSS مبكرًا جدًا وتمنع العرض. إذا كنت تستخدم WordPress ، فيمكنك إصلاح ذلك بسهولة باستخدام مكون إضافي للتخزين المؤقت.

قد تكون لديك مشكلة مع مضيف الويب الخاص بك مما يجعل TTFB (Time To First Byte) أعلى قليلاً من نصف ثانية.

ومع ذلك ، فإن معظم المضيفين يزيدون بنسبة 10 إلى 20 في المائة فقط عن هذا الوقت ، وهي ليست مشكلة كبيرة.

تكون المشكلة الأكبر دائمًا هي الصور وإطارات iframe. عند إضافة صورة إلى منشور ، لا يتم ضغطها أو تغيير حجمها أو تنسيقها للجوال.

يمكنك استخدام البرنامج المساعد للمساعدة. Smush هو مكون إضافي شائع لضغط الصور عند التحميل. ستؤدي النتيجة إلى تحسين إصدار سطح المكتب قليلاً ، ولكن ليس إصدار هاتفك المحمول.

لتحسين وقت تحميل الصفحة على الهاتف المحمول ، تحتاج إلى عرض صور أصغر بكثير. لكن هذا يتطلب الكثير من العمل.

حتى وقت قريب ، كان الحل الأفضل هو الحصول على إصدار محمول منفصل لموقعك أو استخدام صفحات AMP. في كلتا الحالتين ، يجب استبدال جميع الصور الموجودة على الموقع الحالي بصور من الجيل التالي.

قد يستغرق العمل المتضمن في أي من الحلين أسابيع أو شهورًا ، حسب حجم موقعك.

بالنسبة لمعظم مالكي المواقع ، إذا كنت لا تعرف واجهة برمجة تطبيقات مراقب التقاطع أو img src أو سمة src البيانات أو class lazy أو img tags أو img class ، فلن تقوم بإنشاء موقع جوال جديد.

لنواجه الأمر. الأمر كله صعب للغاية ويستغرق وقتًا طويلاً.

المزيد من القراءة: كيفية إيقاف نموذج الاتصال والتعليق غير المرغوب فيه

تطبيق سلوك التحميل البطيء

لحسن الحظ ، هناك طريقة سهلة لإصلاح وقت تحميل صفحتك على الجوال. الجواب هو جعل كل صورك محملة ببطء.

التحميل الكسول يؤخر تسليم الصور حتى يحتاجها القارئ. أثناء قيام القارئ بتمرير صفحة ويب ، يتم الاحتفاظ بالصور الموجودة أسفل ما هو قابل للعرض.

من خلال القيام بذلك ، يتم تقليل وقت التحميل الأولي للصفحة بشكل كبير عن وقت التحميل الشغوف. هناك العديد من المكونات الإضافية والحلول لإضافة التحميل البطيء إلى مدونتك أو موقعك على الويب.

إجراء اختبارات الحمل البطيء

خلال الأسابيع القليلة الماضية ، كنت أقوم باختبار تجريبي لطريقة جديدة لإنشاء موقع للجوّال زينغ.

ربما تكون قد سمعت عن شبكات توصيل المحتوى والتحميل البطيء والصور المؤجلة خارج الشاشة.

إذا لم تقم بذلك ، فهي عناصر تخدم الصور فقط عندما يتم تحميل الصفحة وعندما يقوم المستخدم بالتمرير لأسفل الصفحة. ربما تكون قد شاهدت هذا في العمل على مواقع مثل ميديوم.

عندما تزور موقعًا لأول مرة ، ستظهر الصورة ضبابية لجزء من الثانية. يطلق عليهم صور العناصر النائبة.

ثم تظهر الصورة بوضوح في لحظة.

هذا هو التحميل البطيء في العمل. أثناء قيام المستخدم بالتمرير لأسفل الصفحة ، لا يتم تحميل الصور إلا بعد الحاجة إليها.

يجعل الصفحة تعمل بسرعة فائقة ، خاصة على الأجهزة المحمولة. يمكن تطبيق أداة التحميل البطيئة على أي عدد من الصور على صفحات الويب.

لكن لا يزال هناك عنصر واحد مفقود من هذا الحل. الصور ليست بتنسيقات الجيل التالي.

لحسن الحظ ، يوجد الآن حل ، لذا لن تضطر إلى استبدال جميع صورك. Optimole هو مكون إضافي لبرنامج WordPress يقوم بالكثير من المهام الثقيلة.

لا يقتصر الأمر على تحميل الصور كسولًا فحسب ، بل إنه يستبدل أيضًا صورك بعنوان URL جديد للصورة يوفر صورًا من الجيل التالي.

علاوة على ذلك ، يقوم بتغيير حجم الصور أثناء التنقل.

وضع Optimole على المحك

لقد أجريت الكثير من الاختبارات ، وفي كل مرة أتحقق فيها من إحدى الصفحات ، كانت النتيجة عالية جدًا في اختبار سرعة الهاتف المحمول من Google.

كان أحد اختباراتي باستخدام صفحة ويب كاملة العرض تحتوي على عشر صور كبيرة غير مضغوطة وغير بحجم.

بعبارة أخرى ، لقد قمت للتو بصفع كومة من الصور الكبيرة على إحدى الصفحات ونشرتها. (كانت الصور مقدمة من Pixabay ، لذا لم تكن بحاجة إلى إسناد المشاع الإبداعي.)

كانت الصفحة كبيرة جدًا لدرجة أنني لم أتمكن من عرض صورة لك. لذا ، سأريكم ذلك في مقطع فيديو.

عندما اختبرت الصفحة على Google ، كانت هذه هي النتيجة.

ليس من المستغرب ، بالنظر إلى حجم كل الصور.

ثم قمت بتنشيط Optimole. يمكنك رؤية الإعدادات التي استخدمتها أدناه. هذا كل ما عليك القيام به.

لذلك ماذا كانت النتيجة؟

لسطح المكتب ، درجة ممتازة.

للجوال ، درجة شبه مثالية.

على GTmetrix ، كانت النتيجة قريبة من الكمال مرة أخرى.

تذكر أن هذه نتائج حقيقية لصفحة مليئة بالصور الضخمة بدقة عالية.

استغرق تثبيت المكون الإضافي والحصول على مفتاح API بضع دقائق فقط ، وثواني قليلة فقط بعد ذلك لتنشيط الإعدادات.

لذلك في أقل من خمس دقائق ، كان لدي موقع وموقع محمول شبه مثاليين.

تعلم المزيد عن Optimole

لمشاهدة البرنامج المساعد قيد التشغيل في العالم الحقيقي ، قم بزيارة موقع CodeinWP على الويب. إنه يعمل على Optimole ، لذا يمكنك إجراء اختبارات على سرعة موقعه.

يمكنك التحقق من موقعك بالانتقال إلى موقع Optimole.

انقر فوق الزر التحقق من موقعي وأدخل عنوان URL الخاص بموقعك. سترى قائمة بجميع صورك والمدخرات التي يمكن تحقيقها على موقع الويب الخاص بك.

إذا كان لديك موقع صغير ، فهناك إصدار مجاني متاح من المكون الإضافي. ولكن إذا كان لديك موقع كبير ، فقد ترغب في التفكير في خيار ممتاز.

لقد استغرقت قراءة هذه المقالة وقتًا أطول مما ستستغرقه لتشغيل موقع الويب الخاص بك بسرعة فائقة لزوار هاتفك المحمول. فما تنتظرون؟

المزيد من بدائل التحميل البطيئة

إذا كنت لا ترغب في إعداد تسليم CDN لصور Nextgen ، فهناك الكثير من الخيارات المجانية التي يمكنك استخدامها.

يتضمن WordPress الآن التحميل البطيء افتراضيًا. ومع ذلك ، لديك القليل من التحكم في كيفية عملها. من الأفضل عادةً استخدام مكون إضافي حتى تتمكن من ضبط الأداء.

يعد Smush مكونًا إضافيًا شائعًا ومجانيًا في WordPress لتقليل الصور عند تحميلها في مكتبة الوسائط الخاصة بك.

لكن لديه خيار لتنشيط التحميل البطيء. لقد جربته على عدد قليل من المواقع الخاصة بي ، وهو يعمل بشكل لا تشوبه شائبة. ما عليك سوى تنشيط الخيار ، وتكون قد انتهيت.

A3 Lazy Load هو مكون إضافي مجاني آخر. لقد استخدمته لفترة طويلة الآن في العديد من مواقعي ، بما في ذلك هذا الموقع.

ما يعجبني فيه هو أنه يمكنني تحسين الكثير من الخيارات. لديه خيار استبعاد عناصر واجهة المستخدم ، والذي يحل بعض مشكلات القفز مع بعض السمات.

كان BJ Lazy Load موجودًا منذ فترة طويلة. لديها أكثر من 90000 مستخدم. ومع ذلك ، لم يتم تحديثه منذ فترة.

Lazy Load هو مكون إضافي مجاني يحتوي على 60000 تثبيت. إنه مكون مجاني من WP Rocket ، وهو حل شامل لتحسين سرعة الموقع.

آخر مكون إضافي هو Lazy Load for Videos. إنها أداة جيدة للاستخدام إذا كان لديك الكثير من مقاطع فيديو Youtube على موقعك.

يا له من خيار! الآن ليس لديك أي سبب على الإطلاق لامتلاك موقع ويب بطيء للجوال.

ملاحظة: ليس لدي أي ارتباط بهذا المنتج. تستند مراجعة My Optimole إلى تجربتي كمستخدم.

المزيد من القراءة: أدوات التحقق من مواقع الويب المجانية وأدوات تحسين محركات البحث (SEO)