How we improved Core Web Vitals of our client project | Factile

Factile is an Edu-tech web app for creating Jeopardy-style review games in the classroom developed by Deligence Technologies Inc. for Solis Creative LLC. The app is created in ReactJs.

Challenge

The code had a lot of HTML, CSS, and JavaScript, making it capable of having a lot of features and functionalities but at the same time, it became very heavy, and as a result, it was failing the Core Web Vitals test.

Our team recognized this issue in Q3 of 2023. When we first recognized the issue, the key Core Web Vitals metrics were as follows:

Desktop

FCP = 5.2 sec
LCP = 5.8 sec

Mobile

LCP = 8.9 sec
FCP = 9.4 sec

These metrics were for the Home Page, but every page of the website was more or less similar.

Our main challenge was to improve the Core Web Vitals while also maintaining all the features and functionalities of the project.

Detailed screenshots of all the metrics of Core Web Vitals are as follows:

Challenge

Our team recognized this issue in Q3 of 2023. When we first recognized the issue, the key Core Web Vitals metrics were as follows:

Desktop

FCP = 5.2 sec
LCP = 5.8 sec

Mobile

LCP = 8.9 sec
FCP = 9.4 sec

These metrics were for the Home Page, but every page of the website was more or less similar.

Our main challenge was to improve the Core Web Vitals while also maintaining all the features and functionalities of the project.

Detailed screenshots of all the metrics of Core Web Vitals are as follows:

Solution

We divided this challenge into two phases:

Phase 1:

In the first phase, we did the following:

Converted all the images to a .webp or .avif image format.
Connected all third-party domains to pre-connect and preloaded the LCP image.
Removed all extra server requests, audio files, and unwanted CSS and JavaScript.

All the activities performed in Phase 1 resulted in:

Desktop

FCP = Improved by 0.8 Seconds
LCP = Improved by 1.4 Seconds

Mobile

LCP = Improved by 2.5 Seconds
FCP = Improved by 2.6 Seconds

Detailed screenshots of all the metrics of Core Web Vitals after Phase 1 are as follows:

We had some Google and Microsoft Bing scripts that blocked the browser’s main thread so we integrated PartyTown for running those scripts in web workers. This helped us to reduce the FCP and LCP by half a second.

The activities that we performed helped to improve our Core Web Vitals’ status, however, it did not fix it completely, and our status was still showing as “Failed”.

So we started the second phase of improvements.

Phase 2:

After some R&D with the team, we decided to restructure the app with a different technology and break down our single React app into two different apps:

The existing React app for gameplay and functionality
A new app optimized for page load times for Core Web Vitals and SEO

As we were using React technology we looked for a technology to reuse our code while boosting the app page speed and performance. For this, we had narrowed down to two options:

NextJs
GatsbyJs

To reach a conclusion on which one to choose, we converted the project’s homepage into both technologies and compared and analyzed the results. Our requirements for better SEO and Core Web Vitals were best fit by GastbyJs.

After successfully migrating the app into GastbyJs we faced another challenge: deploying both apps onto a single server that serves different apps for different routes. After testing different deployment strategies, we deployed both apps onto a single server.

It took us approximately one month of R&D and one month of testing before we successfully deployed both apps.