Moving carousel to a separate AJAX script

Forum Moderators: phranque

Message Too Old, No Replies

Moving carousel to a separate AJAX script

csdude55

1:04 am on Mar 30, 2018 (gmt 0)

I have a classifieds page, and this page will allow the user to submit an unlimited number of photos. The pics are resampled when they submit them so they're not HUGE, but they can potentially add up to a lot.

The carousel will load all of them on the page, too, although all but one will be overflow: hidden. There will also be thumbnails so that the site visitor can click to see the larger version. So imagine if there are 20 images that are 300x250 @ about 10-25kb each, then another 20 that are 65x50 @ 1-2kb each... that's 40 HTTP connections and about 500kb of download.

So the question is, do you guys think I should move this entire carousel to a separate script that's opened by AJAX? It would mean that the pics wouldn't download until last, so it will be a tad slower for the end user although it might APPEAR to be faster. And it might be better for Google?

NickMNS

2:30 am on Mar 30, 2018 (gmt 0)

I would load one or a few pictures with the page, then once the user interacts with the carousel load the other with AJAX. Like this the user will see the pictures without any delay right from the start and you only load the other pictures if the user wants to see them, thus saving you the user bandwidth for request of image that are never seen.

This is also good use case for AMP/PWA. The first view is AMP with all the images loaded server side such that the page can be cached, then in a background you load the service-worker with JS for the AJAX (XHR_requests), then on interaction the service worker takes over and you can load the remaining images with XHR-Requests. Its super fast for the user and should reduce the load on your servers.

csdude55

3:44 am on Mar 30, 2018 (gmt 0)

Doing it that way, I would realistically have to load at least 3 larger images (the one within the viewport, and the ones on either side), and at least 7 thumbnails (5 within the viewport, and the ones on either side); otherwise, clicking back and next would have a delay while the next image loads. Granted, that's a lot better! But still 10 HTTP connections and about 75kb of download.

It also gives me a second issue... the user scrolls on the thumbnails to the 2nd or 3rd one, but it's not preloaded. So he clicks it, then has a delay while it and the adjacent pics load. Which, still, a delay for that particular instance is probably better than a delay for everybody, but is there still a better way?

I know you've been working with AMP a lot, but it's Greek to me... I was hoping to cross that particular hurdle on the NEXT rebuild! lol