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

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

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);

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

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

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

• انتقال اسلاید: جابجایی های چیدمان که در حین انتقال اسلاید رخ می دهد معمولاً به دلیل به روز رسانی ویژگی های القای چیدمان عناصر 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 در فایل تصویر مربوطه "پخته" می شود. این رویکرد برای دسترسی، محلی سازی و نرخ فشرده سازی بد است. همچنین یک رویکرد یکسان برای ایجاد دارایی را تشویق می کند. با این حال، قالب بندی یکسان تصویر و متن به ندرت در قالب های دسکتاپ و موبایل به یک اندازه قابل خواندن است.

مختصر باشد

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

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

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

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

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

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

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

مرتبط باشید

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

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

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);

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

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

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

• انتقال اسلاید: جابجایی های چیدمان که در حین انتقال اسلاید رخ می دهد معمولاً به دلیل به روز رسانی ویژگی های القای چیدمان عناصر 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 در فایل تصویر مربوطه "پخته" می شود. این رویکرد برای دسترسی، محلی سازی و نرخ فشرده سازی بد است. همچنین یک رویکرد یکسان برای ایجاد دارایی را تشویق می کند. با این حال، قالب بندی یکسان تصویر و متن به ندرت در قالب های دسکتاپ و موبایل به یک اندازه قابل خواندن است.

مختصر باشد

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

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

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

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

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

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

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

مرتبط باشید

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

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

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);

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

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

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

• انتقال اسلاید: جابجایی های چیدمان که در حین انتقال اسلاید رخ می دهد معمولاً به دلیل به روز رسانی ویژگی های القای چیدمان عناصر 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)
• یک ظاهر طراحی وب نسل بعدی: Scroll Snap (Web.Dev)
• چرخ فلک فقط CSS (ترفندهای CSS)
• نحوه ساخت یک چرخ فلک فقط CSS (ترفندهای CSS)

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

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

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

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

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

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

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

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

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

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

تغییر در آستانه در کروم 121

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

ملاحظات دیگر

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

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

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

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

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

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

از حرکات تلفن همراه پشتیبانی کنید

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

مسیرهای ناوبری متناوب را ارائه دهید

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

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

از AutoPlay استفاده نکنید

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

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

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

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

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

مختصر باشد

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

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

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

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

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

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

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

مرتبط باشید

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