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!