How I increased load time performance of a page with 12+ repeaters and 200+ images to <5s

Only stared to use Wix recently but like many other users I experienced significant page load performance issues when using repeaters. Despite optimising images etc and reading dozens of posts on the forum I couldn't find a solution. So I decided to experiment with different approaches and here's by best effort so far.

I hope this all makes sense and I'd love for someone to tell me there is a better/easier/faster way to do this??

#MerryChristmas

Page is here www.technortheast.co.uk/ecosystem albeit it seems to work faster again if you go to the homepage www.technortheast.co.uk and select VIEW ECOSYSTEM from the menu (not sure why this would be the case unless the Wix framework is loaded with the home page making the ecosystem page seem faster.

The technique I had the best results with was to ditch the repeater control panel completely and do everything with code instead... and rather than keep hitting the dataset for each repeater, I use a data array. e.g.

1. Use wixData.query to read the contents of my database into an array originalDataset []

2. I then call the function renderRepeater('#repeater1', '#image1', 'Leading'); #repeater1 and #image reference the repeater and 'Leading' is the keyword that I want to filter originalDataset with *** however I only do this for the first repeater as I can only see the first repeater on load and it's much faster only loading what you can see ... the rest are loaded incrementally as I scroll own the page***

import wixData from "wix-data"; let originalDataset = []; var paintSection1 = 0; var paintSection2 = 0; var paintSection3 = 0; var paintSection4 = 0; $w.onReady(function () { //Query to get the information from the database and store in 'originalDataset array for future use         wixData.query("Entity_Details")         .limit(1000)         .ascending("title")         .find()         .then((results) => {             originalDataset = results.items;

// Render the first repeater only onReady and load the rest as the user browses down the page // using 4x repeater viewportLeave events             renderRepeater('#repeater1', '#image1', 'Leading');         })         .catch((err) => { let errorMsg = err;         }); });

3. Within my renderRepeater() function I set the repeaters data to the results of the function function filterCompanies(companies, match) ... and show() the repeater and set the three attributes of image src, url link, and tooltip *** I made he repeater hidden on load thinking that might speed up load times but I'm not sure if this is so***

function renderRepeater(repeaterID, ImageID, categoryFilter) { // Filter the originalDataset using the categoryFilter element passed into the function     $w(repeaterID).data = filterCompanies(originalDataset, categoryFilter);     $w(repeaterID).show() //Set the information to the repeater        $w(repeaterID).onItemReady(($w, itemData) => { //add here all the relevant elements of the repeater         $w(ImageID).src = itemData.profile_image;         $w(ImageID).link = itemData.website;         $w(ImageID).tooltip = itemData.title;     }) }

// Simple Array Filter function function filterCompanies(companies, match) { return originalDataset.filter(company => company.category.includes(match)); }

4. Then as I scroll down the page I load the other repeaters three at a time (I use the var paintSection1 (2,3,4) the check of I've done this already as I only need to render each of repeaters once in batches of 3 ... loading one repeater ahead to make the scroll look seamless ) *** then I have 3x more viewportLeave functions for repeaters 3,6 and 9 ***

export function repeater1_viewportLeave(event) { //Test to see if the section has already been displayed, if not then display if (paintSection1 === 0) {         renderRepeater('#repeater2', '#image2', 'Core');         renderRepeater('#repeater3', '#image3', 'Rising');         renderRepeater('#repeater4', '#image4', 'Service');         paintSection1 = 1;     } }

#THEEND