تعویض دنده برای تجربه کاربری بهتر تور دو فرانسه

Summarize this content to 400 words in Persian Lang
به عنوان یک علاقه‌مند به دوچرخه‌سواری، تور دو فرانس همیشه برای من تماشایی بوده است. اما امسال برای اولین بار روز به روز در رویداد عمیق تر می پردازم که باعث شد بیشتر با برنامه رویداد تعامل داشته باشم، جایی که متوجه فرصت هایی برای بهبود تجربه کاربری شدم.

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

به عنوان مثال، هر مرحله دارای یک بخش قهرمان با 3 تصویر بزرگ با وضوح بالا است، در حالی که از نظر بصری خیره کننده است، این تصاویر می توانند باعث عملکرد کند بارگذاری به خصوص در اتصالات کندتر یا دستگاه های پایین تر شوند، اجازه دهید نگاهی به تب شبکه در اینجا بیاندازیم.

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

class=”rider”>

src=”rider-image1-large.png”
srcset=”
rider-image1-small.png 480w,
rider-image1-medium.png 800w,
rider-image1-large.png 1200w
”
sizes=”(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px”
alt=”Rider Image”
/>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

srcset فهرستی از منابع تصویر را با اندازه های مربوطه ارائه می دهد. مرورگر بهترین تصویر را بر اساس اندازه و وضوح صفحه نمایش دستگاه انتخاب می کند.
rider-image1-small.png 480w: اگر عرض صفحه نمایش 480 پیکسل یا کمتر باشد از این تصویر استفاده می شود.
همین امر برای سایزهای متوسط ​​و بزرگ نیز صدق می کند.

sizes عرض تصویر را در نمای طرح بندی مشخص می کند، که به مرورگر کمک می کند تصمیم بگیرد کدام تصویر را از بین انتخاب کند. srcset.

(max-width: viewport max width size in pixels) image-size

در اینجا یک مثال کامل است: https://codepen.io/majidzeno/full/WNqwxNr

اما اگر اتصال کاربر کند باشد چه؟ نشان داد که ما تجربه کاربری یکسانی را برای هر کاربر ارائه می کنیم؟

در حالت ایده آل، بله. با این حال، در دنیای واقعی همه دستگاه‌ها قابلیت‌ها و سرعت اتصال یکسانی ندارند. بنابراین باید برای بدترین سناریوها برنامه ریزی کنیم.

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

به عنوان مثال:

class=”rider”>
id=”rider-image” src=”loader.gif” alt=”Rider Image” />

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
// I will assume 3g is low quality connection
const isLowQuality = connection.effectiveType.includes(‘2g’) ||
connection.effectiveType.includes(‘3g’) ||
connection.saveData;
document.getElementById(‘rider-image’).src =
isLowQuality ? ‘rider-image-low.jpg’ : ‘rider-image-large.png’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اگر نوع اتصال 2G، 3G باشد یا دستگاه در حال صرفه جویی در داده باشد، آن را با کیفیت پایین در نظر می گیریم.

این به ما کمک می کند تا تصمیم بگیریم کدام تصویر را بر اساس سرعت اتصال بارگذاری کنیم.

این تکنیک به نام بارگذاری تطبیقی، اینجا یک مثال کامل است https://codepen.io/majidzeno/full/ExBKZvR

در این مثال بارگذاری عادی را بررسی کنید و سعی کنید اتصال آهسته را شبیه سازی کنید، در موارد عادی تصاویر بزرگ را بارگذاری خواهیم کرد.

با این حال، اگر اتصال را به کندی تغییر دهیم، برای حفظ سرعت بارگذاری قابل قبول، تصاویر بسیار کوچک‌تری را بارگذاری می‌کنیم.

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

نکته آخر، شایان ذکر است که برنامه وب تور از Intersection Observer API استفاده می کند. این به بهبود عملکرد با بارگیری فقط محتوای مورد نیاز کاربران در حین حرکت در صفحه کمک می کند. این به ویژه برای تصاویری که با تنبلی بارگذاری می شوند مفید است.

این ترفندها می‌توانند برنامه را برای همه روان‌تر کنند، بدون توجه به دستگاه یا اتصال آنها که می‌تواند تجربه دیجیتالی تور دو فرانس را به اندازه خود مسابقه هیجان‌انگیز کند.

من هم این را در Medium به صورت متقاطع ارسال کردم.

 class="rider">
    
       src="rider-image1-large.png"
       srcset="
        rider-image1-small.png   480w,
        rider-image1-medium.png  800w,
        rider-image1-large.png  1200w
       "
       sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
       alt="Rider Image"
    />
 

 class="rider">
   id="rider-image" src="loader.gif" alt="Rider Image" />

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
// I will assume 3g is low quality connection
const isLowQuality = connection.effectiveType.includes('2g') ||
                      connection.effectiveType.includes('3g') ||
                      connection.saveData;
document.getElementById('rider-image').src = 
    isLowQuality ? 'rider-image-low.jpg' : 'rider-image-large.png';