در زمینه سئوی تکنیکال، همیشه می توانیم کارهای بیشتری در مورد سایت و سرور انجام دهیم. از دیدگاه یک مشاور سئو و یا انجام بهینه سازی برای موتور جستجو، بهتر است که در توصیه هایی که می کنیم یا کارهای که انجام می دهیم، مواردی مانند ترافیک سایت، رقابت و بودجه را نیز در نظر داشته باشیم.
تکنیک های مختلفی برای بهینه سازی CSS، جاوااسکریپت، عکس، ویدیو و غیره وجود دارد. علاوه بر روشهای اپتیمایز کردن منابع مرسوم، اگر برخی از منابع را برای کاربرانی که دارای سرعت اینترنت کم هستند و یا به هر دلیلی، لود صفحه برای آنها با کندی انجام می شود، با انتقال میزان کمتری از دیتا ارائه دهیم، توانسته ایم تجربه کاربری بهتری به آن دسته از کاربران بدهیم.
prefers-reduced-data یک تکنولوژی experimental یا آزمایشی است که هنوز به صورت گسترده مورد استفاده قرار نگرفته است و می تواند به کاربرانی که با کندی لود صفحات مواجه هستند کمک می کند که تجربه کاربری بهتری از نظر سرعت لود داشته باشند. برای اینکه prefers-reduced-data را بهتر درک کند، لازم است که save-data request header را بشناسید.
save-data request header چیست؟
save-data یک HTTP request header است که بیانگر این است که تنظیمات مرورگر کاربر در حالت استفاده از دیتای کمتر برای لود صفحات یا همان است. مرورگر می تواند save-data: on را در HTTP request header به سرور ارسال کند و دلیل آن می تواند کانکشن با سرعت کم، کندی ناشی از رم و پردازنده ضعیف و یا هر دلیل دیگری که منجر به کندی سرعت لود صفحه شود، باشد.
در نمونه زیر می توانید save-data: on را در request header مشاهده کنید:
Host: webyooz.com
accept-encoding: gzip, deflate, br
save-data: on
کدام مرورگرها از Save-data پشیبانی می کنند؟
طبق مستندات موزیلا، بیشتر مرورگرهای معروف از save-data request header پشتیبانی می کنند. مرورگر گوگل کروم از ورژن 49 از save data پشتیبانی می کند و در حال حاضر تنها مرورگر معروفی که از save-data پشتیبانی نمی کند، مرورگر Safari شرکت اپل است.
مدیا کوئری چیست؟
توسط مدیا کوئری می توانیم شرایطی را برای لود شدن یک داکیومنت تعیین کنیم. به عنوان نمونه می توانیم از عرض viewport، نوع دستگاه یا جهت دستگاه (افقی یا عمودی) به عنوان شرایط لود یک داکیومنت استفاده کنیم. مدیا کوئری در طراحی سایت موبایل فرندلی بسیار کاربردی است.
نمونه های زیر، دو نمونه کاربرد مدیا کوئری در CSS است که نمونه اول دارای شرط ماکزیمم عرض 768 پیکسل و نمونه دوم دارای شرط افقی بودن دستگاه است.
نمونه های مدیا کوئری:
@media only screen and (max-width: 768px) {
body {
background-color: green;
}
}
@media only screen and (orientation: landscape) {
body {
background-color: green;
}
}
@media print {
body {
background-color: white;
}
}
مدیا کوئری prefers-reduced-data
آقای اندی عثمانی در همایش گوگل دولوپر سال 2019، مدیا کوئری prefers-reduced-data را معرفی کرد. ایشان توضیح داد که مدیا کوئری prefers-reduced-data به شما این امکان را می دهد که بتوانید یک ورژن با حجم کمتر یا data-reduced از سایت خود را برای کاربرانی که مشکل سرعت لود دارند را طراحی کنید.
prefers-reduced-data می تواند “reduce” یا “no-preference” باشد. reduce به معنی آن است که کاربر، data saver را روشن کرده است و یا به عبارت دیگر، درخواست های کاربر با save-data: on به سرور فرستاده می شود. No-preference بیانگر این است که درخواست های کاربر به وب سرور بدون save-data: on است.
کدام مرورگر ها از prefers-reduced-data پشتیبانی می کنند؟
prefers-reduced-data یک تکنولوژی experimental یا آزمایشی است. مرورگرها گوگل کروم 86+ و گوگل کروم اندروید 85+ و مایکروسافت Edge کرومیوم 85+ از این تکنولوژی پشتیبانی می کنند. بنابراین از prefers-reduced-data به صورت هوشمندانه استفاده کنید.
از prefers-reduced-data می توان مانند مدیاکوئری های دیگر استفاده کرد. به عنوان نمونه شما می توانید از prefers-reduced-data در CSS یا در HTML استفاده کنید.
چگونه از مدیا کوئری prefers-reduced-data در HTML استفاده کنیم؟
همان طور که گفتیم، prefers-reduced-data می تواند در HTML نیز به کار برده شود. به عنوان نمونه امکان استفاده از آن در تگ <picture> و <link> و هر جای دیگری که امکان استفاده از مدیا کوئری وجود داشته باشد هست.
در نمونه زیر، فایل font.woff2 تنها زمانی preload می شود که data-saver روشن نباشد یا به عبارت دیگر save-data: on در HTTP request header نباشد.
<head>
<link rel="preload" href="font.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin>
</head>
در نمونه زیر، کاربران با سرعت لود صفحه پایین یا سرعت اینترنت کم یا در حالت روشن بودن data saver مرورگر، عکس data-sever-on.png را خواهند دید و دیگر کاربران نیز عکس data-sever-off.png را مشاهده خواهند کرد.
<picture>
<source media="(prefers-reduced-data: reduce)" srcset="/data-sever-on.png" type="image/png" >
<source media="(prefers-reduced-data: no-preference)" srcset="/data-sever-off.png" type="image/png">
<img src="/data-sever-off.png" alt="prefers data savar test image" width="618" height="314">
</picture>
چگونه از مدیا کوئری prefers-reduced-data در CSS استفاده کنیم؟
در نمونه زیر، از آنجایی که مدیا کوئری prefers-reduced-data: no-preference به معنی این است که save-data: on در request header وجود نداشته باشد، می توانیم از نوشتن این مدیا کوئری صرف نظر کنیم و فقط از مدیا کوئری prefers-reduced-data: reduce برای لود عکس small-image.jpg برای درخواست هایی که با save-data: on ارسال می شود استفاده کنیم.
@media (prefers-reduced-data: reduce) {
/* Save-Data: On */
.body {
background-image: url("small-image.jpg");
}
}
@media (prefers-reduced-data: no-preference) {
/* Save-Data: Off */
.body {
background-image: url("large-image.jpg");
}
}
چگونه prefers-reduced-data را در گوگل کروم شبیه سازی کنیم؟
جهت فعال کردن شبیه سازی prefers-reduced-data در گوگل کروم نسخه 86 به بعد، طبق راهنمای زیر عمل نمایید:
1- قابلیت experimental web platform features گوگل کروم 86+ را فعال کنید.
به آدرس chrome://flags/#enable-experimental-web-platform-features بروید و Experimental Web Platform features را در حالت Enabled قرار داده و بروزر خود را ببندید و مجدد باز کنید.
2- command menu را در DevTools گوگل کروم باز کنید.
ابتدا با فشار دادن دکمه های Control+Shift+C یا دکمه F12 در ویندوز، لینوکس یا کروم OS، یا با فشار دادن دکمه های Command+Option+C محیط DevTools گوگل کروم را باز کنید. سپس با فشردن دکمه های Control+Shift+P منوی command را باز کنید و کلمه render را تایپ کنید و روی گزینه Show Rendering کلیک نمایید.
3- روی تب Rendering کلیک کنید.
4- گزینه prefers-reduced-data: reduce را در Emulate CSS media feature انتخاب کنید
در قسمت Emulate CSS media feature prefers-reduced-data، گزینه No emulation را به “prefers-reduced-data: reduce
Change “No emulation” to “prefers-reduced-data: reduce” from the “Emulate CSS media feature prefers-reduced-data” drop down.
نکته: با توجه به اینکه تعداد 5 عدد Emulate CSS media محتلف در تب Rendering وجود دارد، دقت کنید که تغییر لازم را در گزینه Emulate CSS media feature prefers-reduced-data انجام دهید.
نمونه عملی برای prefers-reduced-data
اگر طبق راهنمای بالا، شبیه ساز prefers-reduced-data را در حالت reduce یا در حالت No emulation بگذارید، با هر بار سوییچ کردن گزینه های مذکور، بدون ریلود شدن صفحه، عکس زیر تغییر خواهد کرد. فقط دقت داشته باشید که این امکان در گوگل کروم نسخه 86 به بعد وجود دارد.nt images.
جمع بندی
prefers-reduced-data یک تکنولوژی آزمایشی است که امکان داشتن تجربه کاربری یا UX بهتر را برای کاربرانی که به هر دلیل با مشکل کندی لود صفحه مواجه هستند می دهد. صفحاتی که با prefers-reduced-data لود می شوند، در حقیقت با استفاده از دیتای کمتر نسبت به حالتی که مشکل کندی سرعت وجود ندارد، صفحه را در اختیار کاربر قرار می دهند. از آنجایی که prefers-reduced-data یک مدیا کوئری است، شما می توانید از آن در هر المانی که از مدیا کوئری پشتیبانی می کند استفاده کنید. به عنوان نمونه می توانیم به <picture> و <video> و <link> اشاره کرد.
پرسش های متداول در مورد prefers-reduced-data
1- آیا همه مرورگر های از prefers-reduced-data پشتیبانی می کنند؟
خیر. در حال حاضر مرورگر های گوگل کروم نسخه 86 به بعد در دسکتاپ و گوگل کروم نسخه 85 به بعد در اندروید و مرورگر Microsoft Edge Chromium نسخه 85 به بعد از prefers-reduced-data پشتیبانی می کنند.
2- آیا می توانیم از prefers-reduced-dataجهت بارگذاری فرمت های مختلف ویدیو استفاده کنیم؟
شما می توانید از prefers-reduced-data در هر المانی که از مدیا کوئری پشتیبانی می کند استفاده کنید. به عنوان نمونه امکان استفاده از prefers-reduced-data در تگ video، picture، link و CSS وجود دارد.
3- چگونه می توانیم prefers-reduced-data را روی دسکتاپ تست کنیم؟
امکان شبیه سازی prefers-reduced-data در DevTools گوگل کروم نسخه 86 به بعد در ویندوز، لینوکس یا مک وجود دارد.
