‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

ارائه برنامه‌های سریع و سبک با Save-Data

Dave Gash

Ilya Grigorik

Jeremy Wagner

سرایند درخواست اشاره کارخواه Save-Data که در مرورگرهای Chrome،‏ Opera، و Yandex دردسترس است به توسعه‌دهندگان امکان می‌دهد برنامه‌های سبک‌تر و سریع‌تری را به کاربرانی که حالت ذخیره داده را در مرورگرشان فعال کرده‌اند ارائه دهند.

نیاز به صفحه‌های سبک

آمار Weblight

همه موافقند که صفحه‌های وب سریع‌تر و سبک‌تر تجربه کاربری رضایت‌بخش‌تری ارائه می‌دهند، امکان درک و حفظ بهتر محتوا را فراهم می‌کنند، و تبدیل‌ها و درآمد را افزایش می‌دهند. تحقیقات Google نشان داده است که «…صفحه‌های بهینه‌سازی‌شده چهار برابر سریع‌تر از صفحه اصلی بار می‌شود و ۸۰٪ بایت کمتری استفاده می‌کند. چون این صفحه‌ها خیلی سریع‌تر بار می‌شوند، شاهد افزایش ۵۰ درصدی ترافیک این صفحه‌ها نیز بودیم.»

و اگرچه تعداد اتصالات 2G سرانجام درحال کاهش است، 2G همچنان فناوری شبکه غالب در سال ۲۰۱۵ بود. نفوذ و دردسترس بودن شبکه‌های 3G و 4G به‌سرعت درحال رشد است، اما هزینه‌های مالکیت مرتبط و محدودیت‌های شبکه همچنان عامل مهمی برای صدها میلیون کاربر است.

این‌ها دلایل محکمی برای بهینه‌سازی صفحه هستند.

روش‌های جایگزینی برای بهبود سرعت سایت بدون دخالت مستقیم توسعه‌دهنده وجود دارد، مانند مرورگرهای پراکسی و خدمات تراتبدیل. اگرچه چنین سرویس‌هایی بسیار محبوب هستند، اما معایب قابل‌توجهی دارند — فشرده‌سازی ساده (و گاهی غیرقابل‌قبول) تصویر و نوشتار، ناتوانی در پردازش صفحه‌های امن (HTTPS)، فقط بهینه‌سازی صفحه‌های بازدیدشده ازطریق نتیجه جستجو، و غیره. محبوبیت بسیار زیاد این سرویس‌ها خود نشان‌دهنده این است که توسعه‌دهندگان وب به‌درستی به تقاضای بالای کاربران برای برنامه‌ها و صفحه‌های سریع و سبک پاسخ نمی‌دهند. اما رسیدن به این هدف مسیری پیچیده و گاهی دشوار است.

سرایند درخواست `Save-Data`

یک روش نسبتاً ساده این است که اجازه دهید مرورگر بااستفاده از سرایند درخواست Save-Data کمک کند. با شناسایی این سرایند، صفحه وب می‌تواند تجربه کاربری را برای کاربران با محدودیت هزینه و عملکرد سفارشی‌سازی و بهینه‌سازی کند.

مرورگرهای پشتیبانی‌شده (در زیر) به کاربر اجازه می‌دهند حالت *ذخیره داده* را فعال کند که به مرورگر اجازه می‌دهد مجموعه‌ای از بهینه‌سازی‌ها را برای کاهش مقدار داده‌های موردنیاز برای ارائه صفحه اعمال کند. وقتی این ویژگی درمعرض دید قرار می‌گیرد یا تبلیغ می‌شود، مرورگر ممکن است تصاویر با وضوح پایین‌تر درخواست کند، بار کردن برخی منابع را به‌تأخیر بیندازد، یا درخواست‌ها را ازطریق سرویسی هدایت کند که بهینه‌سازی‌های خاص محتوای دیگری مانند فشرده‌سازی منابع تصویر و نوشتار را اعمال می‌کند.

پشتیبانی مرورگر

Chrome 49+ Save-Data را زمانی که کاربر گزینه «صرفه‌جویی داده» را در تلفن همراه یا افزونه «صرفه‌جویی داده» را در مرورگرهای رایانه فعال می‌کند، تبلیغ می‌کند.
Opera 35+ وقتی کاربر حالت «Opera Turbo» را در رایانه، یا گزینه «صرفه‌جویی داده» را در مرورگرهای Android فعال می‌کند، Save-Data را تبلیغ می‌کند.
Yandex 16.2+ Save-Data را تبلیغ می‌کند وقتی حالت Turbo در مرورگرهای رایانه یا تلفن همراه فعال باشد.

درحال تشخیص تنظیم `Save-Data`

برای تعیین زمان ارائه تجربه «سبک» به کاربران، برنامه‌تان می‌تواند سرایند درخواست اشاره کارخواه Save-Data را بررسی کند. این سرایند درخواست نشان‌دهنده اولویت مشتری برای کاهش مصرف داده به‌دلیل هزینه‌های بالای انتقال، سرعت اتصال پایین، یا دلایل دیگر است.

وقتی کاربر حالت ذخیره داده را در مرورگر خود فعال می‌کند، مرورگر سرایند درخواست Save-Data را به همه درخواست‌های خروجی (هم HTTP و هم HTTPS) اضافه می‌کند. درحال‌حاضر، مرورگر فقط یک کد *on- را در سرصفحه تبلیغ می‌کند (Save-Data: on)، اما ممکن است در آینده برای نشان دادن سایر اولویت‌های کاربر گسترش یابد.

علاوه‌براین، می‌توان تشخیص داد که آیا Save-Data در جاوا اسکریپت روشن است یا نه:

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

بررسی وجود شیء connection در شیء navigator حیاتی است، زیرا نشان‌دهنده Network Information API است که فقط در مرورگرهای Chrome،‏ Chrome for Android، و Samsung Internet پیاده‌سازی شده است. از آنجا، فقط باید بررسی کنید که آیا navigator.connection.saveData با true برابر است یا نه، و می‌توانید هرگونه عملیات ذخیره داده را در آن شرایط پیاده‌سازی کنید.

سرصفحه
Save-Data که در «ابزارهای توسعه‌دهنده» Chrome نشان داده شده است، همراه با
افزونه «صرفه‌جویی داده» در تصویر دیده می‌شود. — فعال کردن افزونه «صرفه‌جویی داده» در Chrome برای رایانه.

اگر برنامه شما از یک سرویس‌کار استفاده می‌کند، می‌تواند سرایندهای درخواست را بررسی کند و منطق مربوطه را برای بهینه‌سازی تجربه اعمال کند. یا سرور می‌تواند اولویت‌های تبلیغ‌شده را در سرایند درخواست Save-Data جستجو کند و پاسخ جایگزینی برگرداند — نشانه‌گذاری متفاوت، تصاویر و ویدیوهای کوچک‌تر، و غیره.

نکات پیاده‌سازی و روال‌های مطلوب

هنگام استفاده از Save-Data، چند دستگاه با میانای کاربر که از آن پشتیبانی می‌کنند ارائه دهید و به کاربران اجازه دهید به‌راحتی بین تجربه‌ها جابه‌جا شوند. برای مثال:
- به کاربران اطلاع دهید که از Save-Data پشتیبانی می‌شود و آن‌ها را به استفاده از آن تشویق کنید.
- به کاربران اجازه دهید حالت را با پیام‌واره‌های مناسب و دکمه‌های روشن/خاموش یا چارگوش‌های انتخاب بصری شناسایی و انتخاب کنند.
- وقتی حالت ذخیره داده انتخاب می‌شود، آن را اعلام کنید و روشی آسان و واضح برای غیرفعال کردن آن و بازگشت به تجربه کامل درصورت تمایل ارائه دهید.
به‌خاطر داشته باشید که برنامه‌های سبک برنامه‌های کم‌ارزشی نیستند. آن‌ها عملکرد یا داده‌های مهم را حذف نمی‌کنند، بلکه فقط نسبت به هزینه‌های مربوطه و تجربه کاربری آگاه‌تر هستند. برای مثال:
- برنامه گالری عکس ممکن است پیش‌نمایش‌هایی با وضوح پایین‌تر ارائه دهد یا از سازوکار گردونه‌ای با کد سبک‌تر استفاده کند.
- برنامه جستجو ممکن است نتایج کمتری را در یک زمان برگرداند، تعداد نتایج با رسانه سنگین را محدود کند، یا تعداد وابستگی‌های موردنیاز برای ارائه صفحه را کاهش دهد.
- سایت‌های خبری ممکن است داستان‌های کمتری نشان دهند، دسته‌های کمتر محبوب را حذف کنند، یا پیش‌نمایش‌های رسانه‌ای کوچک‌تری ارائه دهند.
منطق سرور را برای بررسی سرایند درخواست Save-Data ارائه دهید و درنظر بگیرید که وقتی فعال است، پاسخ صفحه جایگزین و سبک‌تری ارائه دهید — مثلاً تعداد منابع و وابستگی‌های موردنیاز را کاهش دهید، فشرده‌سازی منابع را با شدت بیشتری اعمال کنید، و غیره.
- اگر پاسخ جایگزینی براساس سرایند Save-Data ارائه می‌دهید، به‌یاد داشته باشید که آن را به فهرست Vary (تغییر) — Vary: Save-Data — اضافه کنید تا به حافظه‌های پنهان بالادستی بگویید که باید این نسخه را فقط درصورتی ذخیره و ارائه کنند که سرایند درخواست Save-Data وجود داشته باشد. برای جزئیات بیشتر، روال‌های مطلوب برای تعامل با حافظه‌های پنهان را ببینید.
اگر از کارگر سرویس استفاده می‌کنید، برنامه‌تان می‌تواند با بررسی وجود سرایند درخواست Save-Data یا با بررسی مقدار ویژگی navigator.connection.saveData، تشخیص دهد که گزینه ذخیره داده فعال است یا نه. اگر فعال است، ببینید آیا می‌توانید درخواست را بازنویسی کنید تا بایت‌های کمتری واکشی کند، یا از پاسخی که قبلاً واکشی شده است استفاده کنید.
توصیه می‌کنیم Save-Data را با سیگنال‌های دیگر، مثل اطلاعات مربوط به فناوری و نوع اتصال کاربر، تقویت کنید (به NetInfo API مراجعه کنید). برای مثال، ممکن است بخواهید تجربه سبک را به هر کاربری که از اتصال 2G استفاده می‌کند ارائه دهید، حتی اگر Save-Data فعال نباشد. برعکس، فقط به این دلیل که کاربر از اتصال 4G «سریع» استفاده می‌کند، به این معنی نیست که او علاقه‌ای به صرفه‌جویی در مصرف داده ندارد — برای مثال، هنگام رومینگ. علاوه‌براین، می‌توانید حضور Save-Data را با اشاره کارخواه Device-Memory تقویت کنید تا با کاربران در دستگاه‌های دارای حافظه محدود بیشتر سازگار شوید. حافظه دستگاه کاربر در اشاره کارخواه navigator.deviceMemory نیز تبلیغ می‌شود.

دستور پخت

آنچه می‌توانید ازطریق Save-Data به‌دست آورید فقط به آنچه می‌توانید به آن فکر کنید محدود می‌شود. برای اینکه ایده‌ای از آنچه ممکن است به شما بدهیم، بیایید چند مورد استفاده را بررسی کنیم. ممکن است هنگام خواندن این مطلب، موارد استفاده دیگری به ذهنتان برسد، بنابراین آزادید که آزمایش کنید و ببینید چه چیزهایی ممکن است!

درحال بررسی `Save-Data` در کد سمت سرور

درحالی‌که وضعیت Save-Data چیزی است که می‌توانید در جاوا اسکریپت ازطریق ویژگی navigator.connection.saveData شناسایی کنید، شناسایی آن در سمت سرور گاهی ترجیح داده می‌شود. در برخی موارد، جاوا اسکریپت ممکن است اجرا نشود. به‌علاوه، تشخیص سمت سرور تنها راه برای اصلاح نشان‌گذاری قبل‌از ارسال آن به کارخواه است که در برخی‌از مفیدترین موارد استفاده 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). این کلاس از صفحه‌نمایش‌های با وضوح بالا لزوماً به دستگاه‌های رده‌بالا محدود نمی‌شود و به‌طور فزاینده‌ای رایج می‌شود. در مواردی که تجربه برنامه سبک‌تر ترجیح داده می‌شود، ممکن است ارسال تصاویر با وضوح پایین‌تر (۱ برابر) به این صفحه‌ها به‌جای انواع بزرگ‌تر (۲ برابر) عاقلانه باشد. برای دستیابی به این هدف وقتی سرصفحه 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
}

این مورد استفاده نمونه‌ای عالی از این است که چقدر تلاش کمی برای برآورده کردن درخواست کسی که به‌طور خاص از شما می‌خواهد داده کمتری برایش ارسال کنید لازم است. اگر دوست ندارید نشانه‌گذاری را در پس‌بک اصلاح کنید، می‌توانید بااستفاده از یک ماژول بازنویسی نشانی وب مانند Apachemod_rewrite نیز به همین نتیجه برسید. نمونه‌هایی از نحوه دستیابی به این هدف با پیکربندی نسبتاً کم وجود دارد.

همچنین می‌توانید این مفهوم را به ویژگی‌های CSS background-image گسترش دهید با افزودن یک کلاس به عنصر <html>:

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

از اینجا می‌توانید کلاس save-data را در عنصر <html> در CSS خود هدف قرار دهید تا نحوه ارائه تصاویر را تغییر دهید. می‌توانید تصاویر پس‌زمینه با وضوح پایین را به صفحه‌نمایش‌های با وضوح بالا ارسال کنید، همان‌طور که در مثال HTML بالا نشان داده شده است، یا برخی منابع را به‌طور کامل حذف کنید.

تصاویر غیرضروری را حذف کنید

برخی‌از محتواهای تصویری در وب صرفاً غیرضروری هستند. While such imagery can make for nice asides to content, they may not be desirable by those trying to squeeze all they can out of metered data plans. In what is perhaps the simplest use case of Save-Data, we can use the PHP detection code from earlier and omit non-essential image markup altogether:

<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 وجود ندارد، درمقابل حذف همان تصاویر وقتی 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 مراجعه کنید.