search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.44k stars 5.88k forks source link

Performance - Slick carousel takes a long time to load #3362

Open code-mattclaffey opened 6 years ago

code-mattclaffey commented 6 years ago

Hey I was just wondering why Slick carousel takes a long time to load?

I have my site here: https://www.webpagetest.org/video/compare.php?tests=180308_XC_c71aa19c5b9f425a0ea72fbe92d140a0-r:1-c:0

it takes around 7s on fast 3G before the carousel loads.

Slick is contained within vendor.bundle.js which finishes loading at 5.5s and the initiator is in common.js

The scripts are set to defer.

I feel like slick carousel is firing the init on load or it is waiting for all the images to load before it fires.

filmstrip 1

If there is a faster way to spin up slick then are I am open to suggestions.

pscdodd commented 6 years ago

I guess you are using lazy loading for the images?

Gesendet von Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 für Windows 10

Von: Matthew Claffeymailto:notifications@github.com Gesendet: Donnerstag, 8. März 2018 17:04 An: kenwheeler/slickmailto:slick@noreply.github.com Cc: Subscribedmailto:subscribed@noreply.github.com Betreff: [kenwheeler/slick] Performance - Slickk carousel takes a long time to load (#3362)

Hey I was just wondering why Slick carousel takes a long time to load?

I have my site here: https://www.webpagetest.org/video/compare.php?tests=180308_XC_c71aa19c5b9f425a0ea72fbe92d140a0-r:1-c:0

it takes around 7s on fast 3G before the carousel loads.

Slick is contained within vendor.bundle.js which finishes loading at 5.5s and the initiator is in common.js

The scripts are set to defer.

I feel like slick carousel is firing the init on load or it is waiting for all the images to load before it fires.

[filmstrip 1]https://user-images.githubusercontent.com/10598938/37161210-f9f65cc6-22e9-11e8-87e9-f53ce07bb4cb.png

If there is a faster way to spin up slick then are I am open to suggestions.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/kenwheeler/slick/issues/3362, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AFmRU5rCshwhUpW-EohV2LcLvDdgsUAWks5tcVZwgaJpZM4Si6tt.

code-mattclaffey commented 6 years ago

@pscdodd not the carousel images. I am preloading the images in the carousel so they have a higher priority in the network.

code-mattclaffey commented 6 years ago

Also lazyloading with Picture does not work on slick.

pscdodd commented 6 years ago

See http://kenwheeler.github.io/slick/ «layzy loading» - worked for me

Gesendet von Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 für Windows 10

Von: Matthew Claffeymailto:notifications@github.com Gesendet: Freitag, 9. März 2018 11:15 An: kenwheeler/slickmailto:slick@noreply.github.com Cc: Dodd, Paul Sutton (UB)mailto:paul.dodd@ub.unibe.ch; Mentionmailto:mention@noreply.github.com Betreff: Re: [kenwheeler/slick] Performance - Slick carousel takes a long time to load (#3362)

Also lazyloading with Picture does not work on slick.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/kenwheeler/slick/issues/3362#issuecomment-371770013, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AFmRU9bZ2XoM_nBWVJgCqo11helm2tNcks5tclSrgaJpZM4Si6tt.

dharmeshds commented 2 years ago

One thing I found great use with the carousel performance is load all your media urls with rxjs forkjoin() in parallel asynchronously and populate the results as blob urls in your media array. This greatly reduced the load time for me with around 12 carousels and 10 assets in each (image/video or audio) shown at any time as a gallery in my angular app.. Love slick to get us more adventurous :)