Improvement Needed for High CLS on CERN Open Data Portal (UI, Load performance improvement)

[Shruti-lab]

Description:

I would like to bring to your attention an issue regarding the website's performance, specifically related to Cumulative Layout Shift (CLS) metrics. After running an analysis using Google Lighthouse, I observed that the site exhibits a high CLS score, which negatively impacts the user experience.

Details:

Date of Performance Tested: 28/10/2024
Lighthouse Report Link: Report Link
CLS Score: 1.165 ( very poor)

Observations:

The site dynamically fetches data from the database, which is the cause of layout shifts as content loads.

Proposed suggestions:

Use placeholders or skeleton screens for dynamically loaded content to reduce layout shifts. Also to monitor and analyze the CLS score regularly and make adjustments as needed.

I am eager to work on this issue to help enhance the performance of the CERN Open Data Portal. I believe that improving the CLS score will greatly enhance the overall user experience and make the portal more user-friendly.

Thank you for considering these suggestions!

[psaiz]

Hi @Shruti-lab,
Thanks for reporting the issue, and for looking into this. For the improvements, feel free to open pull requests with the changes that you suggest, and we will evaluate them.

Best regards,
pablo

[Shruti-lab]

Hi Pablo,

Thank you for your prompt response! I appreciate the opportunity to contribute. I’ll take a look at the code and prepare a pull request with my suggestions soon.

Best regards,
Shruti

[Shruti-lab]

Hello @psaiz ,

I'm encountering a couple of issues while trying to set up the local development environment using the provided docker-compose-dev.yml file, I needed some help in this:-

1) Warning About the Version Attribute
I received the following warning when running the command: docker compose -f docker-compose-dev.yml build

and this command docker compose -f docker-compose-dev.yml up -d

2) Service Configuration Error
Additionally, I encountered this error on typing the command: docker exec -i -t opendatacernch-web-1 /code/scripts/populate-instance.sh

I’ve checked the configuration, but I’m unsure how to correctly specify the build context or image for the web service. Could you please provide guidance on how to resolve these issues? Thank you!

[psaiz]

Hi @Shruti-lab,
Note that the docker-compose-dev.yml depends on the docker-compose.yml. It only passes the values that it overwrites.
Both files should be passed to the docker command. Please, check if:

docker compose -f docker-compose.yml -f docker-composed-dev.yaml build

fixes the issues that you reported.

[Shruti-lab]

Thanks @psaiz I'll try again!

[psaiz]

Hi @Shruti-lab ,
Thanks again for creating the ticket. I was wondering if there is any update on the status of this ticket.

Best,
pablo

[Shruti-lab]

Hello @psaiz
Thank you for following up! I apologize for the delay in providing an update on the issue. The project requires Docker, and I initially used my institute's computer to download and work on it. Unfortunately, since my semester has ended, I have not had access to that computer due to the end-of-semester exams.

At the moment, I cannot access that system, and acquiring a new one will take some time. I estimate that I will need about a week to resolve the issue and implement the necessary improvements. Thank you for your understanding and patience. I will keep you updated on my progress as soon as possible.

Best regards
Shruti