هدر درخواست راهنمایی Save-Data در کلاینت که در مرورگرهای کروم، اپرا و یاندکس موجود است، به توسعهدهندگان اجازه میدهد برنامههای سبکتر و سریعتری را برای کاربرانی که حالت صرفهجویی در داده را در مرورگر خود فعال میکنند، ارائه دهند.
نیاز به صفحات سبک
همه موافقند که صفحات وب سریعتر و سبکتر، تجربه کاربری رضایتبخشتری را ارائه میدهند، امکان درک و حفظ بهتر محتوا را فراهم میکنند و نرخ تبدیل و درآمد را افزایش میدهند. تحقیقات گوگل نشان داده است که «... صفحات بهینهسازی شده چهار برابر سریعتر از صفحه اصلی بارگذاری میشوند و از 80٪ بایت کمتری استفاده میکنند. از آنجا که این صفحات بسیار سریعتر بارگذاری میشوند، ما همچنین شاهد افزایش 50 درصدی ترافیک این صفحات بودهایم.»
و اگرچه تعداد اتصالات 2G سرانجام رو به کاهش است، اما 2G همچنان فناوری شبکه غالب در سال 2015 بود. نفوذ و در دسترس بودن شبکههای 3G و 4G به سرعت در حال رشد است، اما هزینههای مالکیت و محدودیتهای شبکه مرتبط با آن هنوز عامل مهمی برای صدها میلیون کاربر است.
اینها استدلالهای محکمی برای بهینهسازی صفحه هستند.
روشهای جایگزینی برای بهبود سرعت سایت بدون دخالت مستقیم توسعهدهنده وجود دارد، مانند مرورگرهای پروکسی و سرویسهای تبدیل کد. اگرچه چنین سرویسهایی بسیار محبوب هستند، اما دارای اشکالات قابل توجهی هستند - فشردهسازی ساده (و گاهی غیرقابل قبول) تصویر و متن، عدم توانایی در پردازش صفحات امن (HTTPS)، بهینهسازی صفحات بازدید شده از طریق نتایج جستجو و موارد دیگر. محبوبیت این سرویسها خود نشانگر این است که توسعهدهندگان وب به درستی به تقاضای بالای کاربران برای برنامهها و صفحات سریع و سبک پاسخ نمیدهند. اما رسیدن به این هدف، مسیری پیچیده و گاهی دشوار است.
هدر درخواست Save-Data
یک تکنیک نسبتاً ساده این است که به مرورگر اجازه دهید با استفاده از هدر درخواست Save-Data request header) کمک کند. با شناسایی این هدر، یک صفحه وب میتواند سفارشیسازی شود و یک تجربه کاربری بهینه را به کاربرانی که از نظر هزینه و عملکرد محدود هستند، ارائه دهد.
مرورگرهای پشتیبانیشده (در زیر) به کاربر اجازه میدهند حالت *صرفهجویی در مصرف داده- را فعال کند که به مرورگر اجازه میدهد مجموعهای از بهینهسازیها را برای کاهش میزان دادههای مورد نیاز برای رندر صفحه اعمال کند. هنگامی که این ویژگی در معرض دید قرار میگیرد یا تبلیغ میشود، مرورگر ممکن است تصاویر با وضوح پایینتری را درخواست کند، بارگیری برخی منابع را به تعویق بیندازد یا درخواستها را از طریق سرویسی که بهینهسازیهای خاص محتوا مانند فشردهسازی منابع تصویر و متن را اعمال میکند، هدایت کند.
پشتیبانی مرورگر
- کروم ۴۹+ وقتی کاربر گزینه «صرفهجویی در مصرف داده» را در موبایل یا افزونه «صرفهجویی در مصرف داده» را در مرورگرهای دسکتاپ فعال میکند ،
Save-Dataرا تبلیغ میکند. - اپرا ۳۵+ وقتی کاربر حالت « اپرا توربو » را در دسکتاپ یا گزینه « صرفهجویی در داده » را در مرورگرهای اندروید فعال میکند،
Save-Data» را تبلیغ میکند. - یاندکس ۱۶.۲+ هنگام فعال بودن حالت توربو در مرورگرهای دسکتاپ یا موبایل،
Save-Dataتبلیغ میکند.
تشخیص تنظیمات Save-Data
برای تعیین زمان ارائه تجربه "سبک" به کاربران، برنامه شما میتواند هدر درخواست Save-Data client hint" را بررسی کند. این هدر درخواست، ترجیح کلاینت برای کاهش مصرف داده به دلیل هزینههای بالای انتقال، سرعت پایین اتصال یا دلایل دیگر را نشان میدهد.
وقتی کاربر حالت صرفهجویی در داده را در مرورگر خود فعال میکند، مرورگر هدر درخواست Save-Data را به تمام درخواستهای خروجی (هم HTTP و هم HTTPS) اضافه میکند. در زمان نگارش این مطلب، مرورگر فقط یک * on - token را در هدر نمایش میدهد ( Save-Data: on )، اما این ممکن است در آینده برای نشان دادن سایر ترجیحات کاربر گسترش یابد.
علاوه بر این، میتوان تشخیص داد که آیا Save-Data در جاوا اسکریپت فعال است یا خیر:
if ('connection' in navigator) {
if (navigator.connection.saveData === true) {
// Implement data saving operations here.
}
}
بررسی وجود شیء connection object) درون شیء navigator بسیار حیاتی است، زیرا نشاندهندهی API اطلاعات شبکه (Network Information API) است که فقط در مرورگرهای کروم، کروم اندروید و سامسونگ پیادهسازی شده است. از آنجا، فقط باید بررسی کنید که آیا navigator.connection.saveData برابر با true است یا خیر، و میتوانید هرگونه عملیات ذخیره داده را در آن شرایط پیادهسازی کنید.
اگر برنامه شما از یک سرویس ورکر استفاده میکند ، میتواند هدرهای درخواست را بررسی کرده و منطق مربوطه را برای بهینهسازی تجربه کاربری اعمال کند. از طرف دیگر، سرور میتواند تنظیمات اعلام شده در هدر درخواست Save-Data را جستجو کرده و پاسخی جایگزین - نشانهگذاری متفاوت، تصاویر و ویدیوهای کوچکتر و غیره - را برگرداند.
نکات اجرایی و بهترین شیوهها
- هنگام استفاده از
Save-Data، برخی از دستگاههای رابط کاربری را که از آن پشتیبانی میکنند، فراهم کنید و به کاربران اجازه دهید به راحتی بین تجربیات مختلف جابجا شوند. به عنوان مثال:- به کاربران اطلاع دهید که از
Save-Dataپشتیبانی میشود و آنها را به استفاده از آن تشویق کنید. - به کاربران اجازه دهید با استفاده از دستورالعملهای مناسب و دکمههای روشن/خاموش یا کادرهای انتخاب، حالت مورد نظر را شناسایی و انتخاب کنند.
- وقتی حالت صرفهجویی در مصرف داده انتخاب شد، اعلام کنید و در صورت تمایل، راهی آسان و واضح برای غیرفعال کردن آن و بازگشت به حالت عادی ارائه دهید.
- به کاربران اطلاع دهید که از
- به یاد داشته باشید که برنامههای سبک، برنامههای کماهمیتتری نیستند. آنها عملکردها یا دادههای مهم را حذف نمیکنند، بلکه فقط از هزینههای مربوطه و تجربه کاربری آگاهتر هستند. برای مثال:
- یک برنامه گالری عکس ممکن است پیشنمایشهایی با وضوح پایینتر ارائه دهد، یا از مکانیزم چرخشی (carousel) با کدنویسی کمتر استفاده کند.
- یک برنامه جستجو ممکن است در یک زمان نتایج کمتری را برگرداند، تعداد نتایج سنگین رسانهای را محدود کند، یا تعداد وابستگیهای مورد نیاز برای رندر صفحه را کاهش دهد.
- یک سایت خبری ممکن است داستانهای کمتری نشان دهد، دستهبندیهای کمطرفدارتر را حذف کند یا پیشنمایشهای رسانهای کوچکتری ارائه دهد.
- منطق سرور را برای بررسی هدر درخواست
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 در کد سمت سرور به زبان مورد استفاده بستگی دارد، اما ایده اصلی باید برای هر back-end برنامه یکسان باشد. برای مثال، در 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) برای صفحه نمایشهای با وضوح بالا (مثلاً صفحه نمایش رتینا ). این دسته از صفحه نمایشهای با وضوح بالا لزوماً محدود به دستگاههای رده بالا نیستند و به طور فزایندهای رایج میشوند. در مواردی که تجربه برنامه سبکتر ترجیح داده میشود، ارسال تصاویر با وضوح پایینتر (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 آپاچی ، به همان نتیجه برسید. مثالهایی از چگونگی دستیابی به این هدف با پیکربندی نسبتاً کم وجود دارد.
شما همچنین میتوانید این مفهوم را به ویژگیهای 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 از مجموعه فونتهای گوگل را در سایت خود قرار دادهاید. 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> از فونتهای گوگل را در جای خود باقی بگذارید، زیرا مرورگر به صورت حدسی منابع CSS (از جمله فونتهای وب) را با اعمال سبکها به DOM و سپس بررسی اینکه آیا عناصر HTML منابع موجود در برگه سبک را فراخوانی میکنند یا خیر، بارگذاری میکند. اگر کسی با Save-Data روشن از کنار آن عبور کند، Fira Sans هرگز بارگذاری نخواهد شد زیرا DOM سبکدار هرگز آن را فراخوانی نمیکند. در عوض، Arial شروع به کار خواهد کرد. به خوبی Fira Sans نیست، اما ممکن است برای کاربرانی که سعی در افزایش حجم اینترنت خود دارند، ترجیح داده شود.
خلاصه
هدر Save-Data تفاوت چندانی ندارد؛ یا روشن است یا خاموش، و برنامه صرف نظر از دلیل، بار ارائه تجربیات مناسب را بر اساس تنظیمات خود بر عهده دارد.
برای مثال، برخی از کاربران ممکن است در صورت شک به از دست رفتن محتوا یا عملکرد برنامه، حتی در شرایط اتصال ضعیف، حالت صرفهجویی در مصرف داده را فعال نکنند. برعکس، برخی از کاربران ممکن است این حالت را به عنوان یک امر بدیهی فعال کنند تا صفحات را تا حد امکان کوچک و ساده نگه دارند، حتی در شرایط اتصال خوب. بهتر است برنامه شما فرض کند که کاربر تجربه کامل و نامحدود را میخواهد تا زمانی که از طریق یک اقدام صریح کاربر، خلاف آن را به روشنی نشان دهید.
به عنوان صاحبان سایت و توسعهدهندگان وب، بیایید مسئولیت مدیریت محتوای خود را بر عهده بگیریم تا تجربه کاربری را برای کاربرانی که با محدودیت داده و هزینه مواجه هستند، بهبود بخشیم.
برای جزئیات بیشتر در مورد Save-Data و مثالهای عملی عالی، به «به کاربران خود Save Data کمک کنید» مراجعه کنید.