Save-Data و تاثیر آن در بهینه سازی صفحات و سرعت سایت

header ای به نام Save-Data

همه ما می دانیم که در عصر ما سرعت بارگذاری صفحات سایت ها بسیار مهم است و کاربران بیش از هر زمان دیگری از شما انتظار سرعت را دارند. این مسئله در مورد کاربران موبایل بسیار شدیدتر است و در برخی از تحقیقات گزارش شده است که اکثر کاربران موبایل پس از 3 ثانیه انتظار وب سایت را رها خواهند کرد. به همین خاطر گوگل در سال 2010 سرعت بارگذاری سایت را به عنوان یکی از فاکتورهای رتبه بندی سایت ها در نظر گرفت و در الگوریتم خود قرار داد. بنابراین شما به عنوان یک وبمستر باید سرعت را یکی از عوامل مهم سئو تلقی کنید و در هر مرحله از کدنویسی خود آن را رعایت کنید چرا که طبق برخی گزارشات هر نیم ثانیه تاخیر می تواند تا 20 درصد از ترافیک ورودی را از شما بگیرد!

به همین دلیل مرورگرهای امروزی ویژگی نسبتا جدیدی را در قالب یک header به نام save-data ارائه کرده اند. Web Concepts مفهوم save-data را اینطور تعریف می کند:

A token that, in requests, indicates client’s preference for reduced data usage, due to high transfer costs, slow connection speeds or other reasons.

ترجمه:

توکنی که تمایل کاربر را برای ذخیره ی داده، به دلایل هزینه‌ی اینترنت یا سرعت پایین اینترنت یا دلایل دیگر، در درخواست ارسال شده به سرور می گنجاند.

این قابلیت در سه مرورگر زیر و از منوی options قابل فعال سازی است:

chrome 49 و جدیدتر: هر زمانی که کاربر گزینه ی Data Saver را روی موبایل یا extension آن را روی نسخه ی دسکتاپ فعال کند به او پیشنهاد فعال کردن Save-Data داده می شود.
Opera 35 و جدیدتر: هر زمان کاربر ویژگی Opera Turbo را روی دسکتاپ یا Data savings را روی اندروید فعال کند قابلیت Save-Data نیز فعال می شود.
Yandex 16.2 و جدیدتر: هر زمان که کاربر ویژگی Turbo mode را فعال کند Save-Data نیز فعال می شود.

زمانی که این گزینه در مرورگر کاربر فعال باشد و توسعه دهنده نیز قسمتی از محتوای سایت را برای این کار در نظر گرفته باشد (محتوای کم حجم تر برای این مرورگر)، مرورگرها نسخه ای streamlined از صفحات وب را برمی گردانند تا تجربه ی کاربری را ارتقاء بدهند. این ویژگی می تواند سنگین تر شدن وب سایت ها را جبران کند (از سال 2010 تا 2016 حجم وب سایت ها تقریبا 3 برابر شده است).

تا قبل از معرفی این ویژگی کاربرانی که می خواستند حجم سایت های مورد علاقه شان را کمتر کنند باید از سرویس های transcoding یا proxy browser ها استفاده می کردند. این سرویس ها تصاویر را فشرده کرده و قسمت های اضافی سایت را حذف می کردند تا نسخه ای سبک تر از سایت را مشاهده کنند. مشکل آنجا بود که نه کاربران و نه وبمستران تعیین کننده ی عناصر حذف شده یا فشرده شده بودند. بنابراین تجربه ی کاربری در این وب سایت ها کاملا تغییر پیدا می کرد. حال دیگر دوران آن ها گذشته است و خود وبمستران می توانند به سلیقه ی خودشان عناصر فشرده تری به کاربران ارائه دهند تا کاربر نسخه ی سبک تری از وب سایت را مشاهده کند. خوبی این موضوع این است که دیگر UX (تجربه ی کاربری) هیچ تغییری نمی کند.

چرا Save-Data برای توسعه دهندگان مهم است؟

بر اساس گزارشات، کاربران موبایل با نرخ رشد 2.1 گیگابایت در ماه در حال رشد هستند.

با اینکه 67 درصد از کاربران از طرح اینترنت نامحدود برخوردار هستند اما هنوز هم قسمت اعظم کاربران در حال تلاش برای ذخیره ی ترافیک هستند چرا که:

اگر کاربران اینترنت نامحدود نداشته باشند با ذخیره ی ترافیک منتقل شده می توانند سرعت را افزایش داده و در عین حال هزینه های اینترنت خود را کاهش دهند.
اگر کاربران اینترنت نامحدود داشته باشند با ذخیره ی ترافیک می توانند حداقل سرعت خود را بالاتر ببرند.

به طور مثال حتی کاربرانی که اینترنت نامحدود دارند ممکن است از سرویس های 4G و ... برخوردار نباشند. از طرفی استفاده از سرویس 3G نیز در وب سایت های امروزی آنقدر ها سریع عمل نمی کند بنابراین حتی این نوع کاربران نیز تمایل زیادی به کاهش حجم عناصر انتقالی دارند. حتی اگر کاربران به اینترنت 4G دسترسی داشته باشند اما وب سایت ها به صورت بهینه برنامه نویسی نشده باشند سرعت را به شدت کاهش خواهند داد.

از طرفی save-data به توسعه دهندگان کمک می کند تا سرعت بارگذاری وب سایت خود را بدون به هم ریختن طرح و یا ظاهر آن بالاتر ببرند. از طرف دیگر با ارائه ی منابع کم حجم تر و کمتر پهنای باند سرور ما نیز حفظ می شود و هر چقدر که کاربران سود کنند ما نیز سود خواهیم کرد.

این موضوع فقط در سطح فنی نیست. زمانی که برای کاربر save-data فعال باشد، سرعت وب سایت ها تا 4 برابر هم افزایش پیدا می کند و در عین حال 80 درصد از حجم صفحات نیز کم می شود! بر اساس گزارشات گوگل ترکیبی از تصاویر فشرده تر و ویدیوهای کم حجم تر می تواند ترافیک ورودی وب سایت شما را تا 50 درصد افزایش دهد. همچنین از آنجا که 47 درصد کاربران موبایل انتظار دارند صفحات وب در کمتر از 2 ثانیه بارگذاری شوند با بالا رفتن زمان بارگذاری ترافیک بسیار زیادی را از دست خواهیم داد. بنابراین جدا از جنبه ی فنی و کاهش پهنای باند مصرفی بازدید سایت ما نیز شدیدا تحت تاثیر سرعت بارگذاری و عواملی مانند save-data است.

نحوه ی استفاده از Save-Data

چندین روش برای این کار معرفی شده است. برخی از تاکتیک های مورد استفاده در Save-Data از این قرار هستند:

پایین آوردن DPI تصاویر
حذف تصاویری که به محتوا وابسته نیستند
حذف یا تغییر عناصر markup سنگین
ویرایش کد های CSS برای حذف عناصر HTML سنگین

مثال زیر که توسط آقای Jeremy Wagner نوشته شده است به ما نشان می دهد که با استفاده از بازنویسی یکی از قوانین در Apache server می توانیم به وب سایت بگوییم در صورتی که کاربر از save-data استفاده نمی کند تصاویر با کیفیت را برایش ارسال کن و در غیر این صورت از تصاویر کم کیفیت تر استفاده کن:

RewriteCond %{HTTP:Save-Data} =on [NC]
RewriteRule ^(.*)-2x.(png|jpe?g|webp)$ $1-1x.$2 [L]

این مثال به دنبال درخواست های تصاویر PNG و JPEG و WebP میگردد که آخرشان 2x- داشته باشد (که به DPI بالا مربوط است) و آن ها را تبدیل به 1x- (یعنی DPI پایین) می کند.

مثال دیگر استفاده از کلاس save-data. در HTML است:

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

سپس در فایل CSS باید استایل ها را برای تگ عادی body (یا هر تگی که مد نظرتان است) بنویسیم سپس استایل های save-data body. را جداگانه بنویسید:

body {
    background-image: url("/img/high-res-background.png");
    font-family: Open Sans;
}

.save-data body {
    background-image: url("/img/low-res-background.png");
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

همانطور که می بینید برای کاربران عادی از تصاویر با کیفیت و فونت Open Sans گوگل استفاده کرده اما برای کاربرانی که save-data را روشن کرده اند از فونت های سیستمی و تصاویر کم کیفیت تر استفاده کرده ایم.