Load your page faster: high performance image carousels
Load your page faster: high performance image carousels
Image carousels are one of the biggest performance problems on the web today. Fortunately, it’s simple to make your image carousel much faster. Learn how!
Please note that native image lazy-loading is now available in Chrome: https://goo.gle/2m2KuZj
Series playlist → https://goo.gle/2GFvRCv
Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs
Content
0.03 -> large images are one of the biggest
1.949 -> performance problems on the web the
4.319 -> average website has around 800 kilobytes
6.66 -> of images what's worse than one large
9.09 -> image several large images stuffed into
12.179 -> what's called an image slider or an
14.13 -> image carousel a poorly designed image
16.83 -> carousel can be very slow but this
19.199 -> doesn't have to happen let's see how
23.35 -> [Music]
25.14 -> [Applause]
26.2 -> [Music]
28 -> some image carousels load all the images
31.01 -> before displaying any this means the
33.68 -> user can flip through all the images
34.58 -> once they're loaded but until that
36.44 -> happens these are staring at a big blank
38.87 -> space other image carousels appear right
41.72 -> away but still load all the images
44.059 -> simultaneously
45.07 -> this means images that are on the screen
47.66 -> get loaded at the same time as off
49.55 -> screen images so the ones your user
51.83 -> would see right away get delayed by the
54.23 -> ones that can't see yet and often that
56.66 -> carousel starts as the images are
58.82 -> loading so the user ends up looking at a
60.92 -> parade of partially loaded images so
64.28 -> what's a developer to do you can solve
67.729 -> this by following the principle behind
69.53 -> this whole video series if the user sees
72.44 -> it first you should load it first so our
75.95 -> carousel should load first the images
78.38 -> the user will see first for the
81.32 -> remaining images we have two choices one
84.77 -> lazy load those remaining images that is
88.009 -> don't load them until we think the user
90.59 -> is about to see them or to preload all
94.729 -> the remaining images after the first one
96.59 -> loads with many popular image carousels
99.56 -> making this happen is easy and the
102.38 -> Select carousel to let select choose one
104.929 -> to load images change each image source
107.509 -> attribute to data lazy to lazy load
110.03 -> images as user slides towards them set
113.36 -> lazy load on-demand to load the first
116.33 -> images first then preload the rests
118.85 -> simply set lazy load to progressive the
122.84 -> owl carousel is similar change each
125.39 -> image source attribute the data source
127.459 -> and add the owl lazy class to lazy load
131 -> images set lazy load to true and to pre
134.93 -> load a number of images say for set lazy
138.709 -> load eager to that number if you're
141.59 -> using accelerated mobile pages or amp
144.23 -> you can simply use the built-in amp
146.69 -> carousel components as amp strives to
149.93 -> load resources only when they'll be
151.49 -> needed amp carousel has lazy loading
154.91 -> built-in if you know JavaScript and CSS
157.819 -> at all it's also easy to make your own
160.159 -> image care
161.269 -> and to make it work just the way you
163.459 -> like thanks for watching see you next
166.249 -> time
166.67 -> and check out our other videos for more
169.249 -> tips to make your site even faster
173.19 -> [Music]
Source: https://www.youtube.com/watch?v=Vz3CCBZWkG8