 Large images are one of the biggest performance problems on the web. The average website has around 800 kilobytes of images. What's worse than one large image? Several large images stuffed into what's called an image slider or an image carousel. A poorly designed image carousel can be very slow, but this doesn't have to happen. Let's see how. Some image carousels load all of the images before displaying any. This means the user can flip through all the images once they're loaded, but until that happens, the user is staring at a big blank space. Other image carousels appear right away, but still load all the images simultaneously. This means images that are on the screen get loaded at the same time as off-screen images, so the ones your user would see right away get delayed by the ones they can't see yet. And often that carousel starts as the images are loading, so the user ends up looking at a parade of partially loaded images. So what's a developer to do? You can solve this by following the principle behind this whole video series. If the user sees it first, you should load it first. So our carousel should load first the images the user will see first. For the remaining images, we have two choices. One, lazy load those remaining images. That is, don't load them until we think the user is about to see them. Or two, preload all the remaining images after the first one loads. With many popular image carousels, making this happen is easy. In the slick carousel, to let slick choose when to load images, change each image's source attribute to data lazy. To lazy load images as the user slides towards them, set lazy load to on demand. To load the first images first, then preload the rest, simply set lazy load to progressive. The owl carousel is similar. Change each image source attribute to data source and add the owl lazy class. To lazy load images, set lazy load to true. To preload a number of images, say four, set lazy load eager to that number. If you're using accelerated mobile pages, or AMP, you can simply use the built-in AMP carousel component. As AMP strives to load resources only when they'll be needed, AMP carousel has lazy loading built in. If you know JavaScript and CSS at all, it's also easy to make your own image carousel and to make it work just the way you like. Thanks for watching. See you next time. And check out our other videos for more tips to make your site even faster.