توفير تطبيقات سريعة وخفيفة باستخدام ميزة "حفظ البيانات"

ديف غاش

إيليا غريغوريك

جيريمي واغنر

يتيح عنوان طلب تلميح العميل Save-Data المتاح في متصفّحات Chrome وOpera وYandex للمطوّرين إمكانية تقديم تطبيقات أخف وأسرع للمستخدمين الذين فعّلوا وضع توفير البيانات في متصفحاتهم.

الحاجة إلى صفحات خفيفة

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

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

وهي وسيطات قوية لتحسين الصفحة.

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

عنوان الطلب Save-Data

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

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

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

• يُعلن Chrome 49+ عن Save-Data عندما يفعِّل المستخدم خيار "توفير البيانات" على الأجهزة الجوّالة، أو الإضافة "توفير البيانات" على المتصفّحات المتوافقة مع أجهزة الكمبيوتر المكتبي.
• يُعلِن Opera 35 والإصدارات الأحدث عن Save-Data عندما يفعِّل المستخدم وضع Opera Turbo" على الكمبيوتر المكتبي، أو خيار "توفير البيانات" على متصفّحات Android.
• يعرض التطبيق Yandex 16.2 أو الإصدارات الأحدث الإعلانات عن Save-Data عند تفعيل وضع Turbo على أجهزة الكمبيوتر المكتبي أو متصفّحات الأجهزة الجوّالة.

جارٍ رصد الإعداد Save-Data

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

عندما يفعّل المستخدم وضع حفظ البيانات في المتصفّح، يُلحق المتصفّح عنوان طلب Save-Data بجميع الطلبات الصادرة (في كل من HTTP وHTTPS). بناءً على ذلك، يعلن المتصفّح عن رمز مميّز واحد *on فقط في العنوان (Save-Data: on)، ولكن يمكن توسيعه في المستقبل للإشارة إلى خيارات المستخدمين المفضّلة الأخرى.

بالإضافة إلى ذلك، يمكن اكتشاف ما إذا تم تفعيل Save-Data في JavaScript أم لا:

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

إنّ التأكّد من توفُّر الكائن connection ضمن كائن navigator أمر حيوي، إذ إنّه يمثّل واجهة برمجة التطبيقات Network Information API التي لا يتم تنفيذها إلا على متصفّحات Chrome وChrome لنظام Android وSamsung والإنترنت. بعد ذلك، ما عليك سوى التحقّق ممّا إذا كان navigator.connection.saveData يساوي true، ومن أنّه يمكنك تنفيذ أي عمليات لحفظ البيانات في هذه الحالة.

فعِّل إضافة "توفير البيانات" في متصفّح Chrome على الكمبيوتر المكتبي.

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

نصيحة: إذا كنت تستخدم PageSpeed لـ Apache أو Nginx لتحسين صفحاتك، يمكنك الاطّلاع على هذه المناقشة لمعرفة كيفية تفعيل توفير Save-Data للمستخدمين._

نصائح التنفيذ وأفضل الممارسات

1. عند استخدام السمة Save-Data، يجب توفير بعض الأجهزة المزوّدة بواجهة مستخدم تتوافق معها وتتيح للمستخدمين التبديل بين التجارب بسهولة. على سبيل المثال:
   • أبلِغ المستخدمين بأنّ "Save-Data" متاحة وشجِّعهم على استخدامه.
   • اسمح للمستخدمين بتحديد الوضع واختياره مع المطالبات المناسبة وأزرار التشغيل/الإيقاف البديهية أو مربعات الاختيار.
   • عند اختيار وضع توفير البيانات، يمكنك الإعلان عن وضع توفير البيانات وتوفير طريقة سهلة وواضحة لإيقافه والعودة إلى التجربة الكاملة إذا أردت ذلك.
2. تذكر أن التطبيقات الخفيفة ليست تطبيقات أقل حجمًا. إنها لا تحذِف الوظائف أو البيانات المهمة، بل هي مدركة أكثر للتكاليف المرتبطة بها وتجربة المستخدم. على سبيل المثال:
   • قد يوفّر تطبيق معرض الصور معاينات بدقة أقل أو يستخدم آلية أقل كثافة للوحة العرض الدوّارة.
   • قد يعرض تطبيق بحث نتائج أقل في كل مرة أو يحدّ من عدد النتائج الكثيفة الوسائط أو يقلل عدد التبعيات المطلوبة لعرض الصفحة.
   • قد يعرض الموقع الإلكتروني المتخصّص في الأخبار عددًا أقل من الأخبار أو يحذف فئات أقل رواجًا أو قد يوفّر معاينات بحجم أصغر للوسائط.
3. وفِّر منطق الخادم للتحقق من عنوان طلب Save-Data ومراعاة تقديم استجابة بديلة أقل سرعة للصفحة عند تفعيلها، مثل تقليل عدد الموارد والتبعيات المطلوبة وتطبيق ضغط أكثر صرامة للموارد، وما إلى ذلك.
   • إذا كنت تعرض استجابة بديلة استنادًا إلى عنوان Save-Data، لا تنسَ إضافته إلى قائمة Vary، وهي Vary: Save-Data، لإعلام ذاكرات التخزين المؤقت الرئيسية بأنّها يجب أن تحتفظ بنسخة احتياطية من هذا الإصدار وتعرضه فقط في حال توفّر عنوان طلب Save-Data. للحصول على مزيد من التفاصيل، يمكنك الاطّلاع على أفضل الممارسات للتفاعل مع ذاكرات التخزين المؤقت.
4. إذا كنت تستخدم مشغّل خدمات، يمكن للتطبيق اكتشاف وقت تفعيل خيار حفظ البيانات عن طريق التحقّق من توفُّر عنوان طلب Save-Data أو التحقّق من قيمة السمة navigator.connection.saveData. إذا كان هذا الخيار مفعّلاً، يُرجى مراعاة ما إذا كان بإمكانك إعادة كتابة الطلب لجلب عدد أقل من وحدات بايت، أو استخدام استجابة سبق جلبها.
5. يمكنك زيادة استخدام Save-Data بإشارات أخرى، مثل المعلومات المتعلّقة بنوع اتصال المستخدم وتقنياته (راجِع NetInfo API). على سبيل المثال، قد تريد توفير التجربة البسيطة لأي مستخدم متصل بشبكة الجيل الثاني حتى إذا لم يكن Save-Data مفعّلاً. وبالعكس، لا يعني مجرد استخدام المستخدم لاتصال "سريع" من الجيل الرابع أنه غير مهتم بحفظ البيانات - على سبيل المثال، عند التجوال. بالإضافة إلى ذلك، يمكنك تعزيز ظهور Save-Data من خلال تلميح العميل Device-Memory للتكيّف بشكل أكبر مع المستخدمين على الأجهزة ذات الذاكرة المحدودة. يتم الإعلان أيضًا عن ذاكرة جهاز المستخدم في تلميح برنامج navigator.deviceMemory.

Recipes

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

جارٍ التحقّق من Save-Data في الرمز من جهة الخادم

على الرغم من أنّ حالة Save-Data يمكنك رصدها في JavaScript من خلال السمة navigator.connection.saveData، قد يكون من المفضّل أحيانًا رصدها من جهة الخادم. يمكن أن يتعذّر تنفيذ JavaScript في بعض الحالات. بالإضافة إلى ذلك، فإن الرصد من جهة الخادم هو الطريقة الوحيدة لتعديل الترميز قبل إرساله إلى العميل، وهو ما يشارك في بعض حالات الاستخدام الأكثر إفادةً لـ Save-Data.

تعتمد البنية المحددة لرصد عنوان Save-Data في الرمز من جهة الخادم على اللغة المستخدمة، ولكن يجب أن تكون الفكرة الأساسية هي نفسها لجميع الواجهات الخلفية للتطبيق. في لغة PHP، على سبيل المثال، يتم تخزين عناوين الطلبات في صفيف $_SERVER عالمي فائق في فهارس تبدأ بـ HTTP_. هذا يعني أنّه يمكنك اكتشاف عنوان Save-Data من خلال التحقّق من وجود متغير $_SERVER["HTTP_SAVE_DATA"] وقيمته على النحو التالي:

// false by default.
$saveData = false;

// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
  // `Save-Data` detected!
  $saveData = true;
}

في حال إجراء عملية التحقّق هذه قبل إرسال أي ترميز إلى العميل، سيحتوي المتغيّر $saveData على حالة Save-Data، وسيكون متاحًا للاستخدام في أي مكان على الصفحة. مع توضيح هذه الآلية، لنلقِ نظرة على بعض الأمثلة حول كيف يمكننا استخدامها للحد من كمية البيانات التي نرسلها إلى المستخدم.

عرض صور منخفضة الدقة للشاشات العالية الدقة

هناك حالة استخدام شائعة للصور على الويب تتضمن عرض الصور في مجموعات من اثنين: صورة للشاشات "القياسية" (1x)، وصورة أخرى أكبر بمرتين (2x) للشاشات عالية الدقة (على سبيل المثال، شاشة Retina). لا تقتصر هذه الفئة من الشاشات العالية الدقة بالضرورة على الأجهزة المتطورة، وأصبحت شائعة بشكل متزايد. في الحالات التي يُفضَّل فيها استخدام تجربة استخدام أخف، من الأفضل إرسال صور منخفضة الدقة (1x) إلى هذه الشاشات، بدلاً من استخدام صيغ أكبر (2x). لإجراء ذلك عند توفّر العنوان Save-Data، نعدّل الترميز الذي نرسله إلى العميل ببساطة:

if ($saveData === true) {
  // Send a low-resolution version of the image for clients specifying `Save-Data`.
  ?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
  // Send the usual assets for everyone else.
  ?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}

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

يمكنك أيضًا توسيع هذا المفهوم ليشمل سمات background-image في CSS من خلال إضافة فئة إلى العنصر <html>:

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

من هنا، يمكنك استهداف الفئة save-data على العنصر <html> في CSS لتغيير طريقة عرض الصور. يمكنك إرسال صور خلفية منخفضة الدقة إلى شاشات عالية الدقة كما هو موضح في مثال HTML أعلاه، أو حذف بعض الموارد تمامًا.

حذف الصور غير الأساسية

بعض محتوى الصور على الويب غير ضروري. قد تضيف هذه الصور جمالاً معيّنًا إلى المحتوى، إلا أنّ المستخدمين الذين يحاولون الاستفادة من خطط البيانات الخاضعة للقياس قد لا يربونك. وفي ما قد يكون أبسط حالات استخدام Save-Data، يمكننا استخدام رمز رصد PHP في وقت سابق وحذف ترميز الصور غير الأساسي تمامًا:

<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
  // Only send this image if `Save-Data` hasn't been detected.
  ?><img src="meme.jpg" alt="One does not simply consume data."><?php
}

يمكن أن يكون لهذه التقنية تأثير واضح، كما يظهر في الشكل التالي:

مقارنة بين الصور غير المُهمّة التي يتم تحميلها عند عدم توفّر ميزة "حفظ البيانات"، بين الصور نفسها التي يتم حذفها عند توفّر ميزة "حفظ البيانات"

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

حذف خطوط الويب غير الأساسية

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

قد يكون من المنطقي أنك قد ترغب في استبعاد خطوط الويب غير الأساسية للمستخدمين الذين يريدون تجارب مستخدم أقل. يسهّل Save-Data هذا الإجراء

على سبيل المثال، لنفترض أنّك أدرجت Fira Sans من Google Fonts على موقعك الإلكتروني. Fira Sans هو خط ممتاز لنسخ النص الأساسي، ولكن ربما لا يكون بالغ الأهمية للمستخدمين الذين يحاولون حفظ البيانات. من خلال إضافة فئة save-data إلى العنصر <html> عند توفّر الرأس Save-Data، يمكننا كتابة أنماط تستدعي الخط الطباعي غير الأساسي في البداية، ثم يوقفه عند توفّر الرأس Save-Data:

/* Opt into web fonts by default. */
p,
li {
  font-family: 'Fira Sans', 'Arial', sans-serif;
}

/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
  font-family: 'Arial', sans-serif;
}

وباستخدام هذا الأسلوب، يمكنك ترك مقتطف <link> من Google Fonts في مكانها، لأنّ المتصفح يحمّل بشكل مبني على توقّع موارد CSS (بما في ذلك خطوط الويب) من خلال تطبيق الأنماط على DOM أولاً، ثم التحقّق مما إذا كانت هناك أي عناصر HTML تستدعي أيًا من الموارد في ورقة الأنماط. إذا حدث شخص ما من خلال تفعيل Save-Data، لن يتم تحميل Fira Sans مطلقًا لأن نموذج DOM المستند لن يستدعيه أبدًا. سوف تبدأ شبكة Arial، بدلاً من ذلك. إنها ليست لطيفة مثل Fira Sans، لكنها قد تكون أفضل من أولئك المستخدمين الذين يحاولون توسيع خطط البيانات الخاصة بهم.

ملخّص

لا يتضمّن عنوان Save-Data فارقًا بسيطًا، فهو إمّا مفعّل أو غير مفعّل، وتحمل التطبيق عبء توفير التجارب المناسبة استنادًا إلى إعداداته، بغض النظر عن السبب.

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

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

للحصول على مزيد من التفاصيل حول Save-Data والأمثلة العملية الممتازة، يمكنك مراجعة مساعدة المستخدمينSave Data.