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

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

Milica Mihajlija

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

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

ما معنى "التحميل التكيُّفي"؟

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

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

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

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

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

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

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

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

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

إتاحة المتصفِّح وكيفية تنفيذ "التحميل التكيُّفي"

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

Navigator.deviceMemory

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

التوافق مع المتصفح

• 63
• 79
• x
• x

المصدر

Navigator.hardwareConcurrency

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

التوافق مع المتصفح

• 37
• 15
• 48
• x

المصدر

NetworkInformation.effectiveType

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

التوافق مع المتصفح

• 61
• 79
• x
• x

المصدر

NetworkInformation.saveData

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

التوافق مع المتصفح

• 49
• ≤79
• x
• x

المصدر

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

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

React Adaptive Upload Hooks &Uileities هي حزمة لمنظومة React المتكاملة، وتسهِّل تعديل مواقعك الإلكترونية لتتوافق مع الأجهزة المتطورة. ويشمل ذلك:

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

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

• عنصر جذب useHardwareConcurrency() للتكيف بناءً على عدد النوى المنطقية لمعالج وحدة المعالجة المركزية على جهاز المستخدم.

• عنصر الجذب "useMemoryStatus()" للتوافق مع ذاكرة جهاز المستخدم (ذاكرة الوصول العشوائي).

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

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

ميزة "التحميل التكيُّفي" قيد التشغيل

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

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

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

تسجيل رقمي للشاشة يقارن بين تمرير المخطط الزمني في 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: