👍👍👍 If (wixWindow.rendering.env === "backend") {return}

Show and tell
,
1

Just wanted to share my top tip on site loading speed after researching load times on gtmetrix for quite a while. I found that the first page load greatly slows down if there are any backend calls, database queries etc. Instead of loading these in the server-side rendering cycle, you can just use default values.

This is especially true for the home page because it is often the first page visitors see, and the place where server-side rendering takes place. And also for the masterpage because it gets loaded on each page.

I logged the server-side rendering time of a backend function with a simple database “get” query within it and it varies between 150ms and 4000ms. Often it becomes lower on reloading the page because of caching. Fetch requests take even longer, minimum of 2000ms in the server-side rendering.

Put the line of code above in your onready function before any backend calls and database queries. These will then only be loaded in the second rendering cycle (in the browser). The first paint and largest contentful paint will be much quicker.

For more info https://www.wix.com/velo/reference/wix-window/rendering-obj/env

2

I’m not sure this is a good advise. SSR is made to speed up rendering. If you wait the CSR to make your request it should take even longer to load the data. The page might be available sonner but without data.

Moreover you should not do any callback in $w.onReady . This callback is used to bind data as well as listenners to UI elements.

I believe (but might be wrong) that using the following technical is the most efficient

const backendRequest1 = requestData();
const backendRequest2 = anotherRequest();

$w.onReady(() => ({
    backendRequest1.then(bindDataToRepeater);
    backendRequest2.then(showElementIfTrue);
})

also you are not block the onReady function with async calls

3

Hi Kentin that’s a good point that I partially agree with. It’s true that the data loads quicker with SSR request however I am questioning if it’s worth it.

My reason for minimalizing requests in server side rendering these days is that if the first page does not have any first paint for 3-6 seconds, a lot of visitors might leave because they think the site is not working well. They might leave before anything is loaded on the screen.

On the other side skipping server side rendering requests makes the first paint a lot quicker. If the page shows something sensible while the data is loading, that could actually work well.

I do agree that initiating the callbacks before $w.onReady is a good optimization that would save around 50ms for each rendering cycle. However I might implement this optimization only for client side rendering as follows:

let cs = wixWindow.rendering.env === "browser"
const backendRequest1 = cs ? requestData() : undefined
const backendRequest2 = cs ? anotherRequest() : undefined

$w.onReady(()=>({
If (wixWindow.rendering.env === "backend") {return}
backendRequest1.then(bindDataToRepeater);     
backendRequest2.then(showElementIfTrue);
})