تقديم تطبيقات سريعة وخفيفة باستخدام Save-Data

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

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

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

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

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

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

عنوان طلب Save-Data

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

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

دعم المتصفح

• يعلن الإصدار 49 من Chrome والإصدارات الأحدث عن 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). على سبيل المثال، قد ترغب في تقديم تجربة خفيفة لأي مستخدم على اتصال بشبكة الجيل الثاني حتى إذا لم يتم تفعيل 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 superglobal في الفهارس التي تبدأ بـ 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، مثل 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، وحذف هذه الصور نفسها في حال توفّر Save-Data.

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