gregv commented 5 months ago

Cumulative Layout Shift (CLS) is one of the three Core Web Vitals metrics. It measures the instability of content by combining how much visible content has shifted in the viewport with the distance the affected elements moved.

Layout shifts can be distracting to users. Imagine you've started reading an article when all of a sudden elements shift around the page, throwing you off and requiring you to find your place again. This is very common on the web, including when reading the news, or trying to click those 'Search' or 'Add to Cart' buttons. Such experiences are visually jarring and frustrating. They're often caused when visible elements are forced to move because another element was suddenly added to the page or resized.

To provide a good user experience, sites should strive to have a CLS of 0.1 or less for at least 75% of page visits.

Improving CLS - Task Breakdown

The goal is to reduce Cumulative Layout Shift (CLS) on our website to improve user experience, aiming for a CLS of 0.1 or less for at least 75% of page visits. Below are the tasks to achieve this:

1. Placeholders

[ ] Look at using placeholders while content is loading: Our main design system is MUI which uses Skeleton to do this.

2. Image Optimization

[ ] Set image dimensions: Ensure all images have explicit width and height attributes to prevent layout shifts.
[ ] Use placeholder techniques: Implement CSS or SVG placeholders for images that load asynchronously.

3. Ad and Embed Handling

[ ] Reserve space for ads: Allocate static space for ads and third-party embeds using CSS to prevent shifts when they load.
[ ] Implement lazy loading: Use lazy loading for ads and embeds with reserved space to minimize impact on initial layout.

4. Font Loading Optimization

[ ] Use font-display: swap: Apply font-display: swap in CSS to ensure text remains visible during webfont loading.
[ ] Preload key fonts: Use <link rel="preload"> to load key fonts faster and avoid layout shifts due to late font loading.

5. Dynamic Content Management

[ ] Avoid inserting content above existing content: Ensure dynamically loaded content (e.g., ads, banners) does not push existing content down.
[ ] Use animation for transitions: Implement animations for content changes to make them smoother and less jarring.

6. UI Component Stabilization

[ ] Assign fixed dimensions to UI components: Ensure all UI components (buttons, forms, containers) have fixed dimensions or constraints.
[ ] Audit third-party scripts: Review and optimize third-party scripts that may cause layout shifts.

We have 20 issues with our website where all are Cumulative Layout Shift (CLS) issues. You can team up with people to solve these, or work on them on your own, and these usually make for a good first issue to work on.