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

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

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

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

على سبيل المثال، لنفترض أنّك أدرجت FiraSans من 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) لا يستدعِه أبدًا. ذي صلة، بدلاً من ذلك. إنه ليس لطيفًا مثل Fira Sans، ولكن قد يكون من الأفضل لهؤلاء المستخدمين الذين يحاولون تمديد خطط بياناتهم.

ملخّص

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

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

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

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