I'm building a website that is set up as follows:
Tech Stack:
- React >> Next.js upgrade
- Google sheets database
- Image assets via Cloudinary url (fetched in google sheets)
- Video assets via Vimeo url (fetched in google sheets)
Design
- One page website.
- Full screen containers that feature one project (of images / videos / or both).
- The user can navigate horizontally through each project by clicking left or right through the project assets.
- The user can navigate vertically through different projects.
- Lazy loading is implemented, which I think is causing the videos to load slowly (as they are only loading on demand).
- But without lazy loading implemented, the whole site slows down.
Questions:
- Are there ways to pre-load embedded vimeo videos or pre-load x number of projects before browser refresh?
- Do you have any tips to improve the performance and speed - would a CMS be better then fetching data from a google sheets database?
Thanks!