Slide transitions and navigation controls are the two most common sources of layout shifts in carousels: As a result of these fixes, sites should expect to see lower carousel-related layout shift scores in later versions of Chrome. Many of these bug fixes are relevant to carousels. Avoid layout shifts #Ĭhrome 88-90 shipped a variety of bug fixes related to how layout shifts are calculated. In environments like home pages, where users may only stick around for a second or two, only loading a single image may be similarly effective. This technique is most applicable to environments where you have a user's prolonged attention-this gives the additional content time to load. src = "htttp:///cat1.jpg" įor advanced carousel optimization, consider loading the first slide statically, then progressively enhancing it to include navigation controls and additional content. querySelector ( ".slides" ) Ĭonst newSlide = document. This delays image loading and can negatively impact LCP.ĭon't const slides = document. Using JavaScript to initiate the loading of carousel content is probably the single biggest performance mistake to avoid when using carousels. 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. Changes to LCP calculation for carousels in Chrome 88Ī carousel is a UX component that displays content in slideshow-like manner.
0 kommentar(er)
