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!