We have a website that contains 20,000+ media. It serves images and videos per post(500 post as of now). Opening posts takes a very long time to open because it contains images(500+) and videos(50+).
Each post displays gallery/collection of images thumbnail(150x150) and if the images are clicked then it will popup a lightbox displaying it with fullscreen with a swipe functions.
Added to that, There are videos(100+) that uses videojs in each post also not just the image gallery.
-We cannot try to serve it via webp as the images are not in our server (Uploaded directly to CDN). -We don't compress the images as we wanted it to be high resolution and it takes too much storage.(Added CDN costs for storages.)
We have tried to disable some scripts and css but it cannot help to load too much images.
We also tried to use cache but it doesnt help also (we have login/dynamic page)
We also tried using a3 lazy load but doesn't help either
We need more suggestions to reduce the amount of time to load. We are thinking about load the page first then image one by one so that the users do not feel boredom as the page takes time to load but the post loads all image not being lazy loaded or just delay the load of images for that the page will load faster first.
Any suggestion? Thanks!
VPS 2GB RAM 2CPU Apache2