Performance best practices # Load carousel content using HTML #Ĭarousel content should be loaded via the page's HTML markup so that it is discoverable by the browser early in the page load process. To avoid this issue, avoid using non-composited animations in your carousel (for example, during slide transitions). This type of CLS typically isn't apparent to the human eye, which makes the issue easy to overlook. On pages with autoplaying carousels, this has the potential to cause infinite CLS. Ī surprising number of carousels use janky, non-composited animations that can contribute to CLS.If you discover that your site's carousel has long-running scripts, you should consider replacing your carousel tooling. Ĭarousels have minimal JavaScript requirements and therefore should not impact page interactivity.For an in-depth explanation of how LCP measurement works on pages containing carousels, refer to the LCP measurement for carousels section. In these scenarios, optimizing the carousel may significantly improve LCP. Large, above-the-fold carousels often contain the page's LCP element, and therefore can have a significant impact on LCP. Large assets can impact performance regardless of whether they are displayed in a carousel or elsewhere. However, carousels often contain large media assets. Performance #Ī well-implemented carousel, in and of itself, should have very minimal or no impact on performance. This article discusses performance and UX best practices for carousels. Although carousels can be used elsewhere, they are most frequently used to display images, products, and promotions on homepages. Carousels can "autoplay" or be navigated manually by users.
0 Comments
Leave a Reply. |