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

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

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

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

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

ملخّص

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

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

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

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