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

Dave Gash

Ilya Grigorik

Jeremy Wagner

يتيح عنوان طلب تلميح العميل 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. يشير عنوان طلب HTTP هذا إلى أنّ العميل يفضّل تقليل استخدام البيانات بسبب ارتفاع تكاليف النقل أو بطء سرعات الاتصال أو لأسباب أخرى.

عندما يفعّل المستخدم وضع توفير البيانات في المتصفّح، يضيف المتصفّح عنوان الطلب 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 Internet. بعد ذلك، ما عليك سوى التحقّق مما إذا كانت navigator.connection.saveData تساوي true، ويمكنك تنفيذ أي عمليات لحفظ البيانات في هذه الحالة.

إذا كان تطبيقك يستخدم برنامجًا لخدمة الخلفية، يمكنه فحص عناوين الطلبات وتطبيق المنطق المناسب لتحسين التجربة. بدلاً من ذلك، يمكن للخادم البحث عن الإعدادات المفضّلة المُعلن عنها في عنوان طلب 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 مفعّلاً. في المقابل، لا يعني توفّر اتصال 4G "سريع" أنّ المستخدم غير مهتم بتوفير البيانات، مثلاً عند التجوال. بالإضافة إلى ذلك، يمكنك تحسين ظهور Save-Data باستخدام تلميح العميل Device-Memory للتكيّف بشكل أكبر مع المستخدمين على الأجهزة ذات الذاكرة المحدودة. يتم أيضًا الإعلان عن ذاكرة جهاز المستخدم في تلميح العميل navigator.deviceMemory.

وصفات طعام

لا حدود لما يمكنك تحقيقه باستخدام 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 Display). ولا يقتصر هذا النوع من الشاشات العالية الدقة على الأجهزة المتطورة، بل أصبح شائعًا بشكل متزايد. في الحالات التي يُفضّل فيها توفير تجربة تطبيق أخف وزنًا، قد يكون من الأفضل إرسال صور بدقة أقل (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، مثل mod_rewrite من Apache. تتوفّر أمثلة على كيفية تحقيق ذلك باستخدام عدد قليل نسبيًا من الإعدادات.

يمكنك أيضًا توسيع هذا المفهوم ليشمل خصائص CSS background-image من خلال إضافة فئة إلى العنصر <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 على موقعك الإلكتروني. 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.