بهترین روش ها برای چرخ فلک ها

چرخ فلک ها را برای عملکرد و قابلیت استفاده بهینه کنید.

Katie Hempenius

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

این مقاله بهترین عملکرد و UX را برای چرخ فلک ها مورد بحث قرار می دهد.

کارایی

یک چرخ فلک که به خوبی اجرا شده است، به خودی خود، باید تأثیر بسیار کم یا بدون تأثیری بر عملکرد داشته باشد. با این حال، چرخ فلک ها اغلب دارای دارایی های رسانه ای بزرگ هستند. دارایی های بزرگ بدون توجه به اینکه در چرخ فلک نمایش داده شوند یا در جای دیگر می توانند بر عملکرد تأثیر بگذارند.

• LCP (بزرگترین رنگ محتوایی)

  چرخ فلک های بزرگ و بالای تاشو اغلب حاوی عنصر LCP صفحه هستند و بنابراین می توانند تأثیر قابل توجهی بر LCP داشته باشند. در این سناریوها، بهینه سازی چرخ فلک ممکن است به طور قابل توجهی LCP را بهبود بخشد. برای توضیح عمیق نحوه عملکرد اندازه گیری LCP در صفحات حاوی چرخ فلک، به بخش اندازه گیری LCP برای چرخ فلک ها مراجعه کنید.

• INP (تعامل با رنگ بعدی)

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

• CLS (تغییر چیدمان تجمعی)

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

بهترین شیوه های عملکرد

محتوای چرخ فلک را با استفاده از HTML بارگیری کنید

محتوای چرخ فلک باید از طریق نشانه گذاری HTML صفحه بارگیری شود تا در مراحل اولیه بارگذاری صفحه توسط مرورگر قابل شناسایی باشد. استفاده از جاوا اسکریپت برای شروع بارگیری محتوای چرخ و فلک احتمالاً بزرگترین اشتباه عملکردی است که هنگام استفاده از چرخ فلک باید از آن اجتناب کرد. این امر بارگذاری تصویر را به تاخیر می اندازد و می تواند بر LCP تأثیر منفی بگذارد.

انجام دادن

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

نکن

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

برای بهینه‌سازی چرخ فلک پیشرفته، اولین اسلاید را به‌صورت ایستا بارگیری کنید، سپس به تدریج آن را تقویت کنید تا شامل کنترل‌های پیمایش و محتوای اضافی شود. این تکنیک بیشتر برای محیط‌هایی کاربرد دارد که در آن‌ها توجه طولانی‌مدت کاربر را به خود جلب می‌کنید - این به محتوای اضافی زمان برای بارگیری می‌دهد. در محیط‌هایی مانند صفحه‌های اصلی، که کاربران ممکن است فقط برای یک یا دو ثانیه در آنجا بمانند، تنها بارگذاری یک تصویر ممکن است به همین ترتیب مؤثر باشد.

از تغییر چیدمان خودداری کنید

توجه: Chrome 88-90 انواع رفع اشکال مربوط به نحوه محاسبه تغییرات طرح‌بندی را ارسال کرد. بسیاری از این رفع اشکال مربوط به چرخ و فلک هستند. در نتیجه این اصلاحات، سایت‌ها باید انتظار داشته باشند که در نسخه‌های بعدی کروم، نمرات تغییر طرح‌بندی مرتبط با چرخ فلک کمتری را مشاهده کنند.

انتقال اسلاید و کنترل‌های ناوبری دو منبع رایج تغییر طرح‌بندی در چرخ فلک‌ها هستند:

• انتقال اسلاید: جابجایی های چیدمان که در حین انتقال اسلاید رخ می دهد معمولاً به دلیل به روز رسانی ویژگی های القای چیدمان عناصر DOM ایجاد می شود. نمونه هایی از برخی از این ویژگی ها عبارتند از: left ، top ، width و marginTop . برای جلوگیری از تغییر طرح، در عوض از ویژگی transform CSS برای انتقال این عناصر استفاده کنید. این نسخه ی نمایشی نشان می دهد که چگونه transform برای ساختن یک چرخ فلک اولیه استفاده کنید.

• کنترل‌های ناوبری: جابجایی یا افزودن/حذف کنترل‌های پیمایش چرخ و فلک از DOM می‌تواند بسته به نحوه اجرای این تغییرات باعث تغییر طرح‌بندی شود. چرخ فلک هایی که این رفتار را نشان می دهند معمولاً در پاسخ به شناور کاربر این کار را انجام می دهند.

اینها برخی از نکات رایج سردرگمی در مورد اندازه گیری CLS برای چرخ فلک ها هستند:

• پخش خودکار چرخ فلک ها: انتقال اسلاید رایج ترین منبع تغییر چیدمان مربوط به چرخ فلک است. در چرخ فلک بدون پخش خودکار، این تغییرات طرح معمولاً در فاصله 500 میلی‌ثانیه از تعامل کاربر رخ می‌دهد و بنابراین در تغییر چیدمان تجمعی (CLS) حساب نمی‌شود . با این حال، برای چرخ فلک‌های پخش خودکار، نه تنها این تغییرات طرح‌بندی می‌توانند به طور بالقوه برای CLS حساب شوند - بلکه می‌توانند به طور نامحدود تکرار شوند. بنابراین، بررسی اینکه چرخ فلک پخش خودکار منبع تغییر طرح نیست، بسیار مهم است.

• پیمایش: برخی از چرخ فلک ها به کاربران اجازه می دهند تا از اسکرول برای حرکت در اسلایدهای چرخ فلک استفاده کنند. اگر موقعیت شروع یک عنصر تغییر کند اما آفست اسکرول آن (یعنی scrollLeft یا scrollTop ) به همان میزان (اما در جهت مخالف) تغییر کند، به شرط اینکه در یک قاب اتفاق بیفتد، تغییر طرح در نظر گرفته نمی شود.

برای اطلاعات بیشتر در مورد تغییرات طرح‌بندی، به اشکال‌زدایی تغییرات طرح‌بندی مراجعه کنید.

از تکنولوژی مدرن استفاده کنید

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

با این حال، بسته به نوع چرخ فلکی که می‌سازید، ممکن است اصلاً به جاوا اسکریپت نیاز نداشته باشید. Scroll Snap API جدید این امکان را فراهم می‌کند تا انتقال‌های چرخ و فلکی را تنها با استفاده از HTML و CSS پیاده‌سازی کنید.

در اینجا منابعی در مورد استفاده از scroll-snap وجود دارد که ممکن است برای شما مفید باشد:

• ساخت مؤلفه Stories (web.dev)
• سبک وب نسل بعدی: اسکرول اسنپ (web.dev)
• CSS-Only Carousel (ترفندهای CSS)
• چگونه یک چرخ فلک فقط CSS بسازیم (ترفندهای CSS)

محتوای چرخ فلک را بهینه کنید

چرخ فلک ها اغلب حاوی برخی از بزرگترین تصاویر یک سایت هستند، بنابراین می تواند ارزش وقت شما را داشته باشد تا مطمئن شوید که این تصاویر کاملاً بهینه هستند. انتخاب فرمت تصویر و سطح فشرده سازی مناسب، استفاده از CDN تصویر ، و استفاده از srcset برای ارائه نسخه های مختلف تصویر، همگی تکنیک هایی هستند که می توانند اندازه انتقال تصاویر را کاهش دهند.

اندازه گیری عملکرد

این بخش اندازه‌گیری LCP را در رابطه با چرخ فلک‌ها مورد بحث قرار می‌دهد. اگرچه در طول محاسبه LCP با چرخ فلک ها متفاوت از هر عنصر UX دیگری رفتار نمی شود، مکانیک محاسبه LCP برای پخش خودکار چرخ فلک ها یک نقطه سردرگمی رایج است.

اندازه گیری LCP برای چرخ فلک ها

اینها نکات کلیدی برای درک نحوه عملکرد محاسبه LCP برای چرخ فلک ها هستند:

• LCP عناصر صفحه را همانطور که روی قاب نقاشی شده اند در نظر می گیرد. پس از تعامل کاربر (ضربه زدن، اسکرول یا فشار دادن کلید) با صفحه، دیگر نامزدهای جدید برای عنصر LCP در نظر گرفته نمی‌شوند. بنابراین، هر اسلاید در چرخ فلک پخش خودکار پتانسیل این را دارد که عنصر LCP نهایی باشد - در حالی که در چرخ فلک ایستا تنها اسلاید اول یک نامزد بالقوه LCP است.
• اگر دو تصویر با اندازه مساوی ارائه شوند، تصویر اول عنصر LCP در نظر گرفته می شود. عنصر LCP فقط زمانی به روز می شود که نامزد LCP بزرگتر از عنصر LCP فعلی باشد. بنابراین، اگر همه عناصر چرخ و فلک به یک اندازه باشند، عنصر LCP باید اولین تصویری باشد که نمایش داده می شود.
• هنگام ارزیابی نامزدهای LCP، LCP " اندازه قابل مشاهده یا اندازه ذاتی، هر کدام که کوچکتر باشد " را در نظر می گیرد. بنابراین، اگر یک چرخ فلک در حال پخش خودکار تصاویر را در اندازه ثابتی نمایش دهد، اما حاوی تصاویری با اندازه های ذاتی مختلف باشد که کوچکتر از اندازه نمایشگر هستند، عنصر LCP ممکن است با نمایش اسلایدهای جدید تغییر کند. در این حالت، اگر همه تصاویر در یک اندازه نمایش داده شوند، تصویری که بیشترین اندازه ذاتی را دارد عنصر LCP در نظر گرفته می شود. برای پایین نگه داشتن LCP، باید اطمینان حاصل کنید که تمام موارد موجود در چرخ فلک پخش خودکار اندازه ذاتی یکسانی دارند.

تغییرات در محاسبه LCP برای چرخ فلک ها در Chrome 88

از Chrome 88 ، تصاویری که بعداً از DOM حذف می‌شوند، به‌عنوان بزرگ‌ترین رنگ‌های پر محتوا در نظر گرفته می‌شوند. قبل از کروم 88، ​​این تصاویر از بررسی حذف شده بودند. برای سایت‌هایی که از چرخ فلک‌های پخش خودکار استفاده می‌کنند، این تغییر تعریف تأثیر خنثی یا مثبتی بر امتیازات LCP خواهد داشت.

این تغییر در پاسخ به مشاهده ای که بسیاری از سایت ها با حذف تصویر نمایش داده شده قبلی از درخت DOM، انتقال چرخ و فلک را اجرا می کنند، ایجاد شد. قبل از Chrome 88، هر بار که یک اسلاید جدید ارائه می‌شد، حذف عنصر قبلی باعث به‌روزرسانی LCP می‌شد. این تغییر فقط بر پخش خودکار چرخ فلک‌ها تأثیر می‌گذارد، بزرگترین رنگ‌های پر محتوا فقط قبل از اینکه کاربر برای اولین بار با صفحه تعامل داشته باشد رخ می‌دهد.

تغییرات آستانه در Chrome 121

Chrome 121 رفتار تصاویر اسکرول افقی مانند چرخ فلک را تغییر داد. اینها اکنون از آستانه های مشابه پیمایش عمودی استفاده می کنند. این به این معنی است که برای مورد استفاده از چرخ فلک، تصاویر قبل از اینکه در ویوپورت قابل مشاهده باشند بارگذاری می شوند. این بدان معناست که بارگذاری تصویر کمتر برای کاربر قابل توجه است، اما به قیمت دانلود بیشتر است. برای مقایسه رفتار در کروم با سافاری و فایرفاکس از دمو بارگذاری تنبل افقی استفاده کنید.

ملاحظات دیگر

در این بخش بهترین شیوه های UX و محصول مورد بحث قرار می گیرد که باید هنگام اجرای چرخ فلک ها به خاطر داشته باشید. چرخ فلک ها باید اهداف تجاری شما را پیش ببرند و محتوا را به گونه ای ارائه کنند که به راحتی قابل پیمایش و خواندن باشد.

بهترین شیوه های ناوبری

کنترل های ناوبری برجسته را ارائه دهید

کنترل‌های ناوبری چرخ فلک باید به راحتی قابل کلیک و قابل مشاهده باشند. این چیزی است که به ندرت به خوبی انجام می شود، اکثر چرخ و فلک ها دارای کنترل های ناوبری هستند که هم کوچک و هم ظریف هستند. به خاطر داشته باشید که یک رنگ یا سبک کنترل ناوبری به ندرت در همه شرایط کار می کند. به عنوان مثال، فلشی که به وضوح در پس زمینه تاریک قابل مشاهده است ممکن است در پس زمینه روشن دشوار باشد.

پیشرفت ناوبری را نشان می دهد

کنترل‌های پیمایش چرخ فلک باید زمینه‌ای را درباره تعداد کل اسلایدها و پیشرفت کاربر از طریق آنها فراهم کند. این اطلاعات به کاربر کمک می کند تا به یک اسلاید خاص پیمایش کند و بفهمد کدام محتوا قبلاً مشاهده شده است. در برخی موقعیت‌ها، ارائه پیش‌نمایش از محتوای آینده - خواه گزیده‌ای از اسلاید بعدی باشد یا فهرستی از تصاویر کوچک - نیز می‌تواند مفید باشد و تعامل را افزایش دهد.

پشتیبانی از حرکات موبایل

در تلفن همراه، علاوه بر کنترل‌های پیمایش سنتی (مانند دکمه‌های روی صفحه) باید از ژست‌های سوایپ نیز پشتیبانی شود.

مسیرهای ناوبری جایگزین را ارائه دهید

از آنجا که بعید است اکثر کاربران با تمام محتوای چرخ و فلک درگیر شوند، محتوایی که چرخ فلک اسلاید به آن پیوند می دهد باید از مسیرهای پیمایش دیگر قابل دسترسی باشد.

بهترین شیوه های خوانایی

از پخش خودکار استفاده نکنید

استفاده از پخش خودکار دو مشکل تقریباً متناقض ایجاد می‌کند: انیمیشن‌های روی صفحه تمایل کاربران را منحرف می‌کنند و چشم‌ها را از محتوای مهم‌تر دور می‌کنند. به طور همزمان، از آنجایی که کاربران اغلب انیمیشن ها را با تبلیغات مرتبط می کنند، از چرخ فلک هایی که به صورت خودکار پخش می شوند، چشم پوشی می کنند.

بنابراین، به ندرت پیش می‌آید که پخش خودکار انتخاب خوبی باشد. اگر محتوا مهم است، استفاده نکردن از پخش خودکار، قرار گرفتن در معرض آن را به حداکثر می‌رساند. اگر محتوای چرخ و فلک مهم نباشد، استفاده از پخش خودکار محتوای مهم تر را کاهش می دهد. علاوه بر این، خواندن خودکار چرخ فلک‌ها می‌تواند دشوار باشد (و همچنین آزاردهنده). مردم با سرعت‌های مختلف مطالعه می‌کنند، بنابراین به ندرت پیش می‌آید که چرخ فلک به طور مداوم در زمان «مناسب» برای کاربران مختلف جابجا شود.

در حالت ایده آل، ناوبری اسلاید باید توسط کاربر از طریق کنترل های ناوبری هدایت شود. اگر باید از پخش خودکار استفاده کنید، پخش خودکار باید در شناور کاربر غیرفعال شود. علاوه بر این، نرخ انتقال اسلاید باید محتوای اسلاید را در نظر بگیرد - هر چه متن یک اسلاید بیشتر باشد، مدت زمان بیشتری باید روی صفحه نمایش داده شود.

متن و تصاویر را جدا نگه دارید

محتوای متنی چرخ فلک اغلب به جای نمایش جداگانه با استفاده از نشانه گذاری HTML در فایل تصویر مربوطه "پخته" می شود. این رویکرد برای دسترسی، محلی سازی و نرخ فشرده سازی بد است. همچنین یک رویکرد یکسان برای ایجاد دارایی را تشویق می کند. با این حال، قالب بندی یکسان تصویر و متن به ندرت در قالب های دسکتاپ و موبایل به یک اندازه قابل خواندن است.

مختصر باشد

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

بهترین شیوه های محصول

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

با این حال، چرخ فلک ها همیشه به طور موثر استفاده نمی شوند.

• چرخ فلک ها، به خصوص اگر حاوی تبلیغات یا پیشرفت خودکار باشند، به راحتی با تبلیغات توسط کاربران اشتباه گرفته می شوند. کاربران تمایل دارند تبلیغات را نادیده بگیرند - پدیده ای که به عنوان کوری بنر شناخته می شود.
• چرخ فلک ها اغلب برای آرام کردن بخش های مختلف و اجتناب از تصمیم گیری در مورد اولویت های تجاری استفاده می شوند. در نتیجه چرخ و فلک ها می توانند به راحتی به محل تخلیه محتوای بی اثر تبدیل شوند.

فرضیات خود را آزمایش کنید

تأثیر تجاری چرخ فلک ها، به ویژه آنهایی که در صفحات اصلی هستند، باید ارزیابی و آزمایش شوند. نرخ کلیک چرخ و فلک می تواند به شما کمک کند تعیین کنید که آیا یک چرخ فلک و محتوای آن موثر است یا خیر.

مرتبط باشید

چرخ فلک ها زمانی بهترین عملکرد را دارند که حاوی محتوای جالب و مرتبطی باشند که با زمینه ای واضح ارائه شود. اگر محتوا باعث جذب کاربر خارج از چرخ و فلک نمی شود، قرار دادن آن در چرخ و فلک عملکرد آن را بهتر نمی کند. اگر باید از چرخ فلک استفاده کنید، محتوا را اولویت بندی کنید و اطمینان حاصل کنید که هر اسلاید به اندازه کافی مرتبط است که کاربر بخواهد روی اسلاید بعدی کلیک کند.