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:

Log in button - header
After a use logs in or if he is logged in, the button is hided and his name is showing

ever changing Text banner - header
The text will be changed on time interval and will change the color and the text

3 most recent blog post - body
a collection that shows the most recent posts
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.

Ok, have read your post, also have seen your post moving into this section.

  1. Created within 5min a totaly new wix-project with a totaly BLANK-PAGE on itโ€ฆ
    -non dynamic
    -without any CODE
    -without any STUFF
    -without ANYTHING
    -just one single EMPTY page!

Now i would like to know, how to get my 98%

AT LEAST โ†’ WITHOUT ANY STUFF ON MY PAGE! :grin::grin::grin: :grin::grin: :grin::grin: :grin::grin: :grin::grin: :grin::grin: :grin::grin: :grin::grin: :grin:

Perhaps i have to change my location? Where are you located?

I did the TEST โ†’ 3 more times with same setup โ†’ RESULTSโ€ฆ

72%
66%
74%

What do tell me all these results? โ†’ BULLSHIT ?

We are based in TN USA. I think Also wix have some performance priority based on regular traffic. From what i experienced, the more visitors your have the fester its loads.
Wix also have a โ€œwebsite compilerโ€ this is like an engine that take what you build and than compile it to an efficient delivery

Also from my experience, there is performance difference from a free website to a paid one.

@ricprud
Ok, i will test my payed one the next time, when i cleared all content, letโ€™s have a look on it! โ†’ Very exited to see the result.

What i wanted to say is โ†’ i already met CUSTOMERS they even were not able to get a RESULT higher than 60% on a totaly empty-page!

My conclusion: Wix themselves already have enough package to be loaded, which will also have a negative influence onto the siteโ€™s loading-times.

Let us make a little โ†’ survey โ†’ Want to see results all over the world!

HEY YOU! โ†’ AND WHAT IS YOUR SITEโ€™s LOADING-TIME? (blank-page/full-content-page) ??? (free/payed) ???

@russian-dima You need to check your code, your apps, and marketing codes you added in addition to the page.
I have a special page on my website Nonindex that I used to test performance. so you can use this. But to receive a good score you need to lower the blocking time and to lower the media cost combined.
also blank will not be good, as you have a measurement of first content load and largest content load.

1 Like