Making the fastest home page

So in previous post How I made my home page load faster I explained how I implemented video and FAQ section and didn't used any apps for that while achieving a lighthouse score of 58.

Today is a new day, and I redesign the landing page (in the next month we will redesign the whole website) and achieved the fastest score almost possible.

The web site Apartments Near Me is a brand website for the company that owns and operate apartments complex in USA. In addition the website provide ability to renters to read how to do better affordable housing, submit work orders and payment and search for apartments to rent. Based on this services the website provides the core vitals are vitals to increase organic traffic to the website and the technical features are important.

We wanted our home page to have the below specifications:

Taking into consideration the above and learning that loading process of a website hosted by wix is not the best for performance (you will always have a trade off between how is it is for the user in comparison the optimization), we were able to achieve a score of 98!!! yes it is 2 points shy of perfect 100!

And this is how I did it.

Graphics:

First, after understanding that wix img loading and process are not that great we used a free tool called FormatFactory (its contain a lot of ads and some of the programs out there have viruses so i'm not recommending) we converted every img to webp format with a specific size. The type of pictures we choose was illustrations (we got them from Reepik). The main reason is that illustrations in general after changed of format have a very very low size.

The main picture we actually used SVG file - which making it load supper fast. also to compress the svg we used the service of vecta nano that helped us to get the size down to almost nothing (please note that a good svg img will have a very high amount of DOM elements which will increase the processing time).

No the functionality part:

The main goal is to lower the amount of JS needed (critical path) to process in order to show the website. taking in to account that OnReady of the header run first and blocking the OnReady of the page until fully done, we need to create an event based execution - this why it will run in parallel after the JS paras.

Log in button:

the button need to be hiden if the user is logged in, and should avoid running when a user move to a new page.

Header:

in Onready

 if (wixWindow.rendering.env === "browser") {
        if (wixUsers.currentUser.loggedIn && session.getItem("username")) {
            showtext();
        } else if (wixUsers.currentUser.loggedIn) {
            on_login_();
        }
    }
    

Out side of the Onready:

async function on_login_() {
    await get_name();
    showtext();
}

async function get_name() {

    await wixData.query("Members/PrivateMembersData").eq("_id", wixUsers.currentUser.id).find().then((item) => {
        if (item.length > 0) {
            session.setItem("username", item.items[0].name);
        }
    }).catch(error => { console.log(error); });
}

function showtext() {
    $w("#userName").text = "Hi, " + session.getItem("username");
    $w("#userName").show();
    $w("#LoginButton").collapse();
}

For the text banner:

OnRead:

let doonce=0;
    $w("#columnStrip3").onViewportEnter( (event) => {
        if (wixWindow.rendering.env === "browser" && doonce===0) {
        button_change();
        setInterval(button_change, 3000);
        doonce=1;
        }  
    });

Outside the OnReady:

let manu_link_count = Math.floor(Math.random() * Math.floor(6));
let manue_animation = {
    "duration": 500,
    "direction": "top",
};
let manue_animation_out = {
    "duration": 500,
    "direction": "bottom",
};

let manuslide = [{ text: "🏠🏠 How To Be Approved For An Apartment 🏠🏠", link: "https://www.apartmentsnearme.biz/how-to-be-approved-for-an-apartment", color: "rgb(255,69,0)" },
    { text: "☑️☑️ How To Pass A Background Check ☑️☑️", link: "https://www.apartmentsnearme.biz/how-to-pass-a-background-check", color: "rgb(0,71,119)" },
    { text: "📝📝 Application Evaluation 📝📝", link: "https://www.apartmentsnearme.biz/application-evaluation", color: "rgb(163,0,0)" },
    { text: "🔑🔑 How To Find The Right Apartment 🔑🔑", link: "https://www.apartmentsnearme.biz/how-to-find-the-right-apartment", color: "rgb(0,175,181)" },
    { text: "💳💳 Poor Credit and Application Approval 💳💳", link: "https://www.apartmentsnearme.biz/poor-credit-and-application-approva", color: "rgb(239,71,111)" },
    { text: "✨✨ First Time Renter ✨✨", link: "https://www.apartmentsnearme.biz/first-time-renter", color: "rgb(6,214,160)" },
    { text: "🚀🚀 Housing Application FAQ 🚀🚀", link: "https://www.apartmentsnearme.biz/housing-application-faq", color: "rgb(152,166,212)" }
];


function button_change() {
    $w("#MenuB1").hide("flip", manue_animation_out)
        .then(() => {
            $w("#MenuB1").label = manuslide[manu_link_count].text;
            $w("#MenuB1").link = manuslide[manu_link_count].link;
            $w("#MenuB1").style.color = manuslide[manu_link_count].color;
            $w("#MenuB1").show("flip", manue_animation);

        });
    manu_link_count++;
    if (manu_link_count >= manuslide.length) {
        manu_link_count = 0;
    }
}

For the blog posts we used a repeater on the page with event to load the data only on viewport enter:

function loadblogs(){
  if (bload === 0) {
        $w("#repeater1").onItemReady(($item, itemData, index) => {
            $item("#Rimg").src = itemData.coverImage;
            $item("#Rimg").link = itemData.postPageUrl;
            $item("#Rtitle").text = itemData.title;
            $item("#Rbt").link = itemData.postPageUrl;
        });
        bload = 1; //to run only once even if the event called serval times
        wixData.query("Blog/Posts")
            .descending("publishedDate")
            .limit(3)
            .find()
            .then((results) => {
                $w("#repeater1").data = results.items;
            });
    }
} 

I'm sure there is a lot more that can be done. But achieving this score made us rethinking about wix and what we can do to continue working on this platform.

My Main hope, is that one day Wix will have a team of website optimizer to hire, so they will be able to do website optimization to wix clients as an added value.

To me its took 2 years to understand how wix is loading, how the code being papars, and whats going on under the hood. Most of this time could have been saved if there was a technical documentation that explain how everything influencing everything.