# Large Layout Shift Elements

**Priority**: Critical

**Impact**: Negative

## What issues it may cause

<ul>
  <li>
    <strong>Poor User Experience:</strong> Layout shifts can be jarring and frustrating for users, particularly if they
    are in the middle of interacting with the page.
  </li>
  <li>
    <strong>Accidental Interactions:</strong> Shifts can cause users to click on the wrong elements, such as ads or
    incorrect links, leading to a poor user experience.
  </li>
  <li>
    <strong>Negative Perception of Stability:</strong> Frequent layout shifts make a website appear unstable and
    unreliable, which can diminish user trust and satisfaction.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Set Explicit Width and Height for Media:</strong> Always define width and height attributes for images,
    videos, and other media to ensure the browser can allocate the necessary space during initial layout calculations.
  </li>
  <li>
    <strong>Reserve Space for Ad Slots:</strong> Use CSS to allocate fixed space for ads, embeds, and iframes, even if
    they are loaded asynchronously.
  </li>
  <li>
    <strong>Avoid Inserting Content Above Existing Content:</strong> Ensure any new content added to the page after the
    initial load does not push down existing content. Instead, insert it below or reserve space for it ahead of time.
  </li>
  <li>
    <strong>Use Font Display Options:</strong> Utilize CSS font-display property to control how text is rendered while
    web fonts are loading to avoid reflows. For example, use font-display: swap to ensure fallback fonts are used until
    the custom font loads. [Learn more about optimizing CLS](https://web.dev/articles/optimize-cls)
  </li>
</ul>

## What is the positive impact

<ul>
  <li>
    <strong>Improved User Experience:</strong> By minimizing layout shifts, users experience a more stable and
    predictable page, enhancing overall satisfaction.
  </li>
  <li>
    <strong>Increased Engagement:</strong> A stable layout reduces accidental clicks and interruptions, allowing users
    to interact more comfortably with the page.
  </li>
  <li>
    <strong>Enhanced Visual Stability:</strong> Reducing layout shifts improves the perceived reliability of the
    website, fostering greater trust and a positive perception of the brand.
  </li>
</ul>

## How to fetch the data for this report template

You will need to run a crawl for report template to generate report. When report has been generated and you have
crawl id you can fetch data for the report using the following query:


```graphql
query GetReportStatForCrawl(
      $crawlId: ObjectID!
      $reportTemplateCode: String!
      $after: String
     ) {
        getReportStat(
          input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
        ) {
          crawlSiteSpeedAuditOpportunities(after: $after, reportType: Basic) {
            nodes {
              opportunityDigest
              element
              title
              auditId
              exampleUrl
              layoutShiftImpactAvg
              urlCount
              layoutShiftImpactSum
              nodeNodeLabel
              gaPageviewsSum
              savingsScoreSum
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

**Variables:**
```json
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"layout_shift_elements_failed_items"}
```