بارگیری تطبیقی: بهبود عملکرد وب در دستگاه های کند

بیاموزید که چگونه اطمینان حاصل کنید که هر کاربر بهترین تجربه ممکن را با بهینه سازی سایت های خود برای محدودیت های سخت افزاری و شبکه خاص دریافت می کند.

میلیکا میهاجلیا

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

آدی عثمانی از گوگل و نیت اشلوس از فیس بوک در سخنرانی خود در Chrome Dev Summit، راه حلی برای این مشکل را بررسی می کنند – الگویی برای ارائه صفحاتی که بهتر به انواع محدودیت های کاربر پاسخ می دهند. آنها آن را بارگذاری تطبیقی ​​می نامند.

بارگذاری تطبیقی ​​چیست؟

بارگذاری تطبیقی ​​شامل ارائه تجربیات مختلف به کاربران مختلف بر اساس محدودیت های شبکه و سخت افزار است، به ویژه:

  • یک تجربه هسته ای سریع برای همه کاربران (از جمله دستگاه های ارزان قیمت).

  • اگر شبکه و سخت‌افزار کاربر بتواند از عهده آن برآید، به تدریج ویژگی‌های سطح بالا اضافه می‌شود.

با بهینه سازی برای سخت افزار و محدودیت های شبکه خاص، هر کاربر را قادر می سازد تا بهترین تجربه ممکن را برای دستگاه خود داشته باشد. تطبیق تجربه با محدودیت های کاربران می تواند شامل موارد زیر باشد:

  • ارائه تصاویر و فیلم های با کیفیت پایین در شبکه های کند.

  • کاهش نرخ فریم انیمیشن ها در دستگاه های ارزان قیمت.

  • اجتناب از عملیات گران قیمت محاسباتی در دستگاه های ارزان قیمت.

  • مسدود کردن اسکریپت های شخص ثالث در دستگاه های کندتر.

  • بارگیری جاوا اسکریپت غیر بحرانی برای تعامل فقط در CPUهای سریع.

پشتیبانی از مرورگر و نحوه اجرای بارگذاری تطبیقی

سیگنال هایی که می توانید برای بارگذاری تطبیقی ​​استفاده کنید در زیر فهرست شده اند. پشتیبانی مرورگر نیز برای هر سیگنال گنجانده شده است:

ویژگی navigator.deviceMemory برای کاهش مصرف حافظه در دستگاه های ارزان قیمت استفاده می شود.

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

  • 63
  • 79
  • ایکس
  • ایکس

منبع

ویژگی navigator.hardwareConcurrency تعداد هسته CPU است. این برای محدود کردن اجرای پرهزینه جاوا اسکریپت و کاهش منطق فشرده CPU زمانی که دستگاه نمی تواند به خوبی از عهده آن برآید استفاده می شود.

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

  • 37
  • 15
  • 48
  • ایکس

منبع

NetworkInformation.effectiveType

ویژگی navigator.connection.effectiveType برای تنظیم دقیق انتقال داده ها برای استفاده از پهنای باند کمتر استفاده می شود.

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

  • 61
  • 79
  • ایکس
  • ایکس

منبع

NetworkInformation.saveData

ویژگی navigator.connection.saveData برای استفاده از تنظیمات برگزیده Data Saver کاربر استفاده می شود.

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

  • 49
  • ≤79
  • ایکس
  • ایکس

منبع

دو مکان وجود دارد که می توانید در مورد اینکه چه چیزی به کاربران ارائه دهید تصمیم بگیرید: مشتری و سرور. در کلاینت، APIهای جاوا اسکریپت که در بالا ذکر شد را دارید. در سرور، می‌توانید از راهنمایی‌های سرویس گیرنده برای دریافت بینش در مورد قابلیت‌های دستگاه کاربر و شبکه‌ای که به آن متصل هستند استفاده کنید.

بارگذاری تطبیقی ​​در React

React Adaptive Loading Hooks & Utilities مجموعه‌ای برای اکوسیستم React است که تطبیق سایت‌های شما با دستگاه‌های پایین‌رده را آسان‌تر می‌کند. آن شامل:

  • قلاب useNetworkStatus() برای تطبیق بر اساس وضعیت شبکه ( slow-2g ، 2g ، 3g ، یا 4g ).

  • قلاب useSaveData() برای تطبیق بر اساس تنظیمات برگزیده Data Saver کاربر.

  • قلاب useHardwareConcurrency() برای تطبیق بر اساس تعداد هسته‌های پردازنده منطقی پردازنده در دستگاه کاربر.

  • قلاب useMemoryStatus() برای تطبیق بر اساس حافظه دستگاه (RAM) کاربر.

هر هوک یک آرگومان اختیاری برای تنظیم مقدار اولیه می پذیرد. این گزینه در دو حالت مفید است: زمانی که مرورگر کاربر از API مربوطه پشتیبانی نمی‌کند و برای رندر سمت سرور که می‌توانید از داده‌های راهنمایی مشتری برای تنظیم مقدار اولیه روی سرور استفاده کنید. به عنوان مثال، قلاب useNetworkStatus() می تواند از مقدار اولیه ارسال شده از راهنمایی مشتری برای رندر سمت سرور استفاده کند و در صورت اجرای روی کلاینت، در صورت تغییر نوع موثر شبکه، خود را به روز کند.

React Adaptive Loading Hooks & Utilities با استفاده از API های پلتفرم وب ( اطلاعات شبکه ، حافظه دستگاه و همزمانی سخت افزار ) پیاده سازی می شوند. می‌توانید از همان APIها برای اعمال مفاهیم بارگیری تطبیقی ​​در چارچوب‌ها و کتابخانه‌های دیگر، مانند Angular ، Vue و غیره استفاده کنید.

بارگذاری تطبیقی ​​در عمل

این بخش به بررسی نمایش‌هایی می‌پردازد که چگونه می‌توانید از بارگیری تطبیقی ​​و نمونه‌های دنیای واقعی از سایت‌هایی مانند فیس‌بوک، eBay، Tinder و دیگران استفاده کنید.

نسخه ی نمایشی React Movie نشان می دهد که چگونه می توان سرویس رسانه را بر اساس وضعیت شبکه تطبیق داد . این برنامه ای برای مرور فیلم است که پوسترها، خلاصه ها و لیست بازیگران را نشان می دهد. بر اساس نوع اتصال مؤثر کاربر، پوسترهای با کیفیت بالا در اتصالات سریع و پوسترهای با کیفیت پایین در موارد کند ارائه می دهد.

توییتر حالت Data Saver دارد که برای کاهش حجم داده های استفاده شده طراحی شده است. در این حالت، تصاویر پیش‌نمایش با وضوح پایین بارگیری می‌شوند و تصاویر بزرگ تنها زمانی بارگیری می‌شوند که روی پیش‌نمایش ضربه بزنید. با فعال کردن این گزینه، کاربران iOS و Android 50 درصد در مصرف داده های تصاویر صرفه جویی کردند و کاربران در وب 80 درصد صرفه جویی کردند. در اینجا نسخه آزمایشی React وجود دارد که از قلاب Save Data برای تکرار خط زمانی توییتر استفاده می کند. سعی کنید پانل DevTools Network خود را باز کنید و به تفاوت مقدار داده های منتقل شده در حین حرکت در زمانی که Save Data غیرفعال است در مقایسه با زمانی که فعال است نگاه کنید.

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

زمانی که سخت افزار یا شرایط شبکه کاربر به خوبی از آنها پشتیبانی نمی کند، eBay به طور مشروط ویژگی هایی مانند بزرگنمایی را روشن و خاموش می کند. شما می توانید از طریق تقسیم کد تطبیقی ​​و بارگذاری کد به این مهم دست یابید - راهی برای بارگیری مشروط اجزای بسیار تعاملی یا اجرای عملیات محاسباتی سنگین تر در دستگاه های پیشرفته، در حالی که این اسکریپت ها برای کاربران دستگاه های کندتر ارسال نمی شود. ویدیو را در 16 دقیقه ببینید که در آن Addy این الگوی پیاده‌سازی شده با React.lazy() و Suspense را در صفحه محصول eBay نمایشی نشان می‌دهد.

نموداری از ماژول‌های ارسال شده برای صفحه محصول در دستگاه‌های سطح پایین و سطح بالا: هر دو نسخه شامل

Tinder از تعدادی الگوهای بارگیری تطبیقی ​​در وب و برنامه Lite خود استفاده می کند تا تجربه را برای همه سریع نگه دارد. اگر کاربر در یک شبکه کند باشد یا «بهینه‌سازی داده» را فعال کرده باشد، پخش خودکار ویدیو را غیرفعال می‌کند، واکشی از پیش مسیر را محدود می‌کند و بارگیری تصویر بعدی در چرخ فلک را به بارگیری تصاویر به‌صورت یک‌به‌بار با کشیدن انگشت کاربران محدود می‌کند. پس از اجرای این بهینه‌سازی‌ها، آن‌ها شاهد پیشرفت‌های قابل توجهی در میانگین تعداد سوایپ در کشورهایی مانند اندونزی بوده‌اند.

اسکرین شات از دو نسخه چت Tinder: با پخش خودکار ویدیو و با یک ویدیو با پوشش دکمه پخش. تصویری از نمایه Tinder با عنوان «تصاویر چرخ و فلک را در Data Saver یا 3G محدود کنید». یک قطعه کد برای واکشی از پیش ویدیوهای درون پورت فقط در 4G.

بارگیری تطبیقی ​​در فیس بوک

یکی از مسائلی که در بارگذاری تطبیقی ​​مطرح می‌شود، گروه‌بندی دستگاه‌ها به کلاس‌های سطح بالا و پایین بر اساس سیگنال‌های موجود است. در دستگاه‌های تلفن همراه، رشته کاربر-عامل (UA) نام دستگاه را ارائه می‌کند که فیس‌بوک را قادر می‌سازد تا از داده‌های در دسترس عموم بر روی ویژگی‌های دستگاه برای گروه‌بندی دستگاه‌های تلفن همراه در کلاس‌ها استفاده کند. با این حال، در دستگاه‌های رومیزی تنها اطلاعات مرتبطی که UA ارائه می‌کند، سیستم عامل دستگاه است.

برای گروه‌بندی دستگاه‌های رومیزی، فیس‌بوک داده‌های مربوط به سیستم عامل، هسته‌های CPU (از navigator.hardwareConcurrency ) و حافظه RAM ( navigator.deviceMemory ) را در نظارت بر عملکرد آنها ثبت می‌کند. آنها با نگاهی به روابط بین انواع مختلف سخت افزار و عملکرد، دستگاه ها را به پنج دسته طبقه بندی کردند. با کلاس‌های سخت‌افزاری که در نظارت بر عملکرد ادغام شده‌اند، آنها تصویر کامل‌تری از نحوه استفاده افراد از محصولات فیس بوک بسته به دستگاه خود دریافت می‌کنند و می‌توانند رگرسیون‌ها را راحت‌تر شناسایی کنند.

ویدیو را در 24 دقیقه تماشا کنید، جایی که نیت به نحوه نزدیک شدن فیس بوک به گروه بندی دستگاه ها و استفاده از بارگذاری تطبیقی ​​برای انیمیشن ها و بارگیری جاوا اسکریپت می پردازد.

درباره بارگیری تطبیقی ​​بیشتر بدانید

بارگذاری تطبیقی ​​همه چیز در مورد طراحی سایت شما با در نظر گرفتن جامعیت است. یک تجربه اصلی بسازید که برای همه عالی باشد، سپس ویژگی‌هایی را تغییر دهید یا لایه‌بندی کنید که اگر کاربر حافظه کافی، CPU یا شبکه سریع داشته باشد، آن را حتی جذاب‌تر می‌کند. برای کسب اطلاعات بیشتر درباره بارگیری تطبیقی، نسخه‌های نمایشی موجود را بررسی کنید و سخنرانی Chrome Dev Summit را تماشا کنید: