التحميل التكيُّفي: تحسين أداء الويب على الأجهزة البطيئة

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

تختلف إمكانيات الأجهزة واتصالات الشبكات كثيرًا. إنّ المواقع الإلكترونية التي تسرّ المستخدمين على الأجهزة العالية الأداء قد تكون غير قابلة للاستخدام على الأجهزة المنخفضة الأداء. إنّ المواقع الإلكترونية التي يتم تحميلها بسلاسة على الشبكات السريعة قد تتوقف عن التحميل على الشبكات البطيئة. يمكن لأي مستخدم الشعور ببطء الموقع الإلكتروني، لذلك قد لا تنجح دائمًا حلول "الحجم الواحد يناسب الجميع" .

في محادثة Chrome Dev Summit، يوضّح "أدي أوسماني" من Google و"نيت شلوس" من Facebook حلًا لهذه المشكلة، وهو نمط لعرض الصفحات التي تلبي بشكل أفضل مجموعة متنوعة من قيود المستخدمين. ويُطلقون على هذه العملية اسم التحميل التكيُّفي.

ما هي ميزة "التحميل التكيُّفي"؟

يتضمن التحميل التكيُّفي تقديم تجارب مختلفة للمستخدمين المختلفين استنادًا إلى قيود الشبكة والأجهزة، وتحديدًا:

• تجربة سريعة للوظائف الأساسية لجميع المستخدمين (بما في ذلك الأجهزة المنخفضة التكلفة)

• إضافة ميزات متطورة تدريجيًا، إذا كانت شبكة المستخدم وأجهزةه تتيح ذلك

من خلال تحسين الأداء وفقًا لقيود معيّنة للأجهزة والشبكات، يمكنك مساعدة كل مستخدم في الحصول على أفضل تجربة ممكنة على جهازه. يمكن أن يشمل تخصيص التجربة لقيود المستخدمين ما يلي:

• عرض صور وفيديوهات بجودة منخفضة على الشبكات البطيئة

• تقييد عدد اللقطات في الثانية للصور المتحركة على الأجهزة المنخفضة المواصفات

• تجنب العمليات المكلفة من الناحية الحاسوبية على الأجهزة منخفضة المواصفات.

• حظر النصوص البرمجية التابعة لجهات خارجية على الأجهزة البطيئة

• تحميل JavaScript غير المهم للتفاعل فقط على وحدات المعالجة المركزية السريعة

توافُق المتصفّح وطريقة تنفيذ التحميل التكيُّفي

في ما يلي الإشارات التي يمكنك استخدامها للتحميل التكيُّفي. يتم أيضًا تضمين توافق المتصفّح لكل إشارة:

Navigator.deviceMemory

تُستخدَم السمة navigator.deviceMemory لتقليل استهلاك الذاكرة على الأجهزة المنخفضة المستوى.

Navigator.hardwareConcurrency

سمة navigator.hardwareConcurrency هي عدد نوى وحدة المعالجة المركزية. ويتم استخدامه للحد من تنفيذ JavaScript المكلف وتقليل المنطق الذي تستهلكه وحدة المعالجة المركزية (CPU) عندما لا يتمكن الجهاز من التعامل معها بشكل جيد.

NetworkInformation.effectiveType

تُستخدَم السمة navigator.connection.effectiveType لتحسين نقل البيانات لاستخدام قدر أقل من معدل نقل البيانات.

NetworkInformation.saveData

يتم استخدام الموقع الإلكتروني navigator.connection.saveData للاستفادة من الإعدادات المفضّلة للمستخدم في ميزة "توفير البيانات".

هناك مكانان يمكنك فيهما اتخاذ قرار بشأن ما يجب عرضه للمستخدمين: العميل والخادم. على العميل، تتوفّر لك واجهات برمجة تطبيقات JavaScript المذكورة أعلاه. على الخادم، يمكنك استخدام مَعلمات البرنامج للحصول على إحصاءات عن إمكانات جهاز المستخدم والشبكة التي يتصل بها.

التحميل التكيُّفي في React

إنّ React Adaptive Upload Hooks &Utilities عبارة عن مجموعة من الأدوات في منظومة React المتكاملة التي تسهِّل تعديل مواقعك الإلكترونية لتتوافق مع الأجهزة ذات المواصفات المنخفضة. ويشتمل هذا البرنامج على:

• عنصر الربط useNetworkStatus() للتكيّف استنادًا إلى حالة الشبكة (slow-2g أو 2g أو 3g أو 4g)

• عنصر الجذب useSaveData() للتكيّف استنادًا إلى إعدادات "توفير البيانات" المفضّلة لدى المستخدم.

• useHardwareConcurrency() hook للتكيّف استنادًا إلى عدد معالجات وحدة المعالجة المركزية (CPU) اللوجستية على جهاز المستخدم

• useMemoryStatus() hook للتكيّف استنادًا إلى ذاكرة جهاز المستخدم (RAM)

يقبل كلّ خطاف وسيطة اختيارية لضبط القيمة الأولية. يكون هذا الخيار مفيدًا في سيناريوهَين: عندما لا يتيح متصفّح المستخدم استخدام واجهة برمجة التطبيقات ذات الصلة، وللعرض من جهة الخادم حيث يمكنك استخدام بيانات تلميح العميل لضبط القيمة الأولية على الخادم. على سبيل المثال، يمكن أن يستخدِم العنصر المخطَّط useNetworkStatus() القيمة الأولية التي تم تمريرها من تلميح العميل لمعالجة العرض من جهة الخادم، وعند تنفيذه على العميل، يمكنه تعديل نفسه في حال تغيّر النوع الفعال للشبكة.

يتم تنفيذ أدوات وخطافات التحميل التكيُّفي في React باستخدام واجهات برمجة تطبيقات منصّة الويب (معلومات الشبكة، ذاكرة الجهاز والمعالجة المتزامنة للأجهزة). يمكنك استخدام واجهات برمجة التطبيقات نفسها لتطبيق مفاهيم التحميل التكيُّفي على إطارات العمل والمكتبات الأخرى، مثل Angular، Vue، وغيرها.

مثال على التحميل التكيُّفي

يتناول هذا القسم عروضًا توضيحية حول كيفية استخدام ميزة "التحميل التكيُّفي" و مثالًا على استخدامها في مواقع إلكترونية مثل Facebook وeBay وTinder وغيرها.

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

يتيح تطبيق Twitter ميزة "وضع توفير البيانات" المصمّمة بهدف تقليل مقدار البيانات المستخدَمة. في هذا الوضع، يتم تحميل صور المعاينة بدقة منخفضة ولا يتم تحميل الصور الكبيرة إلا عند النقر على معاينتها. بعد تفعيل هذا الخيار، خفض مستخدمو أجهزة iOS وAndroid استخدام البيانات بنسبة %50 من الصور، بينما خفض مستخدمو الويب هذا الاستخدام بنسبة %80. في ما يلي عرض توضيحي لتفاعل يستخدم ميزة Save Data لإعادة إنشاء المخطط الزمني على Twitter. جرِّب فتح لوحة شبكة أدوات مطوّري البرامج والاطّلاع على الفرق في كمية البيانات التي يتم نقلها أثناء التنقّل عندما تكون ميزة "حفظ البيانات" غير مفعَّلة مقارنةً بوقت تفعيلها.

يشغِّل eBay ميزات أو يوقفها بشكل مشروط، مثل التكبير أو التصغير عندما لا تتوافق معها معدّات المستخدم أو ظروف الشبكة لديه. يمكنك تحقيق ذلك من خلال تقسيم الرمز البرمجي وتحميله بشكلٍ تكيُّفي، وهي طريقة لتحميل مكوّنات أكثر تفاعلاً بشكل مشروط أو تنفيذ عمليات أكثر كثافة من الناحية الحسابية على الأجهزة العالية الأداء، مع عدم إرسال تلك النصوص البرمجية إلى المستخدمين على الأجهزة البطيئة. يمكنك مشاهدة الفيديو بعد 16 دقيقة حيث تُظهر "آدي" هذا النمط الذي تم تنفيذه من خلال React.lazy() وSuspense على صفحة إصدار تجريبي لمنتج eBay.

يستخدم Tinder عددًا من أنماط التحميل التكيُّفية في الويب وتطبيقه البسيط للحفاظ على سرعة تجربة الاستخدام للجميع. إذا كان المستخدم متصلاً بشبكة بطيئة أو كانت ميزة "توفير البيانات" مفعّلة، يوقف التشغيل التلقائي للفيديو ويحدّ من الجلب المسبق للمسار ويحدّ من تحميل الصورة التالية في لوحة العرض الدوّارة إلى تحميل الصور واحدة تلو الأخرى بينما يمرر المستخدمون سريعًا. بعد تنفيذ هذه التحسينات، لاحظ الفريق تحسينات كبيرة في متوسط عدد التمريرات السريعة في بلدان مثل إندونيسيا.

التحميل التكيُّفي في Facebook

من المشاكل التي تظهر في التحميل التكيُّفي هي تجميع الأجهزة في فئات عالية الأداء ومنخفضة الأداء استنادًا إلى الإشارات المتاحة. على الأجهزة الجوّالة، توفر سلسلة وكيل المستخدم (UA) اسم الجهاز الذي يمكّن Facebook من استخدام البيانات المتاحة للجمهور حول خصائص الجهاز لتجميع أجهزة الجوّال في صفوف. ومع ذلك، على أجهزة الكمبيوتر المكتبي، فإنّ المعلومات ذات الصلة الوحيدة التي تقدّمها Universal Analytics هي نظام التشغيل للجهاز.

لتجميع أجهزة الكمبيوتر المكتبي، يسجِّل Facebook البيانات المتعلّقة بنظام التشغيل ونواة وحدة المعالجة المركزية (CPU) (من navigator.hardwareConcurrency) وذاكرة الوصول العشوائي (RAM) (navigator.deviceMemory) في عملية مراقبة الأداء. بعد تحليل العلاقات بين الأنواع المختلفة من الأجهزة والأداء،صنّف الفريق الأجهزة إلى خمس فئات. ومن خلال دمج فئات الأجهزة في ميزة مراقبة الأداء، يحصل الفريق على صورة أكثر اكتمالاً عن كيفية استخدام المستخدمين لمنتجات Facebook استنادًا إلى أجهزتهم، ويمكنه تحديد حالات التراجع بشكلٍ أسهل.

يمكنك مشاهدة الفيديو في 24 دقيقة، حيث يشرح "نيت" كيفية تعامل Facebook مع تجميع الأجهزة واستخدامه للتحميل المتكيّف للرسوم المتحرّكة وتحميل JavaScript.

مزيد من المعلومات حول التحميل التكيُّفي

يهدف التحميل التكيُّفي إلى تصميم مواقعك الإلكترونية مع وضع الشمولية في الاعتبار. أنشئ تجربة أساسية تناسب الجميع، ثم فعِّل أو أضِف ميزات تجعلها أكثر روعة إذا كان لدى المستخدم ذاكرة أو وحدة معالجة مركزية أو شبكة سريعة. لمعرفة المزيد من المعلومات عن ميزة "التحميل التكيُّفي"، يُرجى الاطّلاع على العروض التوضيحية المتاحة ومشاهدة محاضرة من مؤتمر Chrome Dev Summit: