Skip to main content

Large Layout Shift Elements

Priority: Critical

Impact: Negative

What issues it may cause​

  • Poor User Experience: Layout shifts can be jarring and frustrating for users, particularly if they are in the middle of interacting with the page.

  • Accidental Interactions: Shifts can cause users to click on the wrong elements, such as ads or incorrect links, leading to a poor user experience.

  • Negative Perception of Stability: Frequent layout shifts make a website appear unstable and unreliable, which can diminish user trust and satisfaction.

How do you fix it​

  • Set Explicit Width and Height for Media: 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.

  • Reserve Space for Ad Slots: Use CSS to allocate fixed space for ads, embeds, and iframes, even if they are loaded asynchronously.

  • Avoid Inserting Content Above Existing Content: 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.

  • Use Font Display Options: 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

What is the positive impact​

  • Improved User Experience: By minimizing layout shifts, users experience a more stable and predictable page, enhancing overall satisfaction.

  • Increased Engagement: A stable layout reduces accidental clicks and interruptions, allowing users to interact more comfortably with the page.

  • Enhanced Visual Stability: Reducing layout shifts improves the perceived reliability of the website, fostering greater trust and a positive perception of the brand.

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:

query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
  getCrawl(id: $crawlId) {
    reportsByCode(
      input: {
        reportTypeCodes: Basic
        reportTemplateCodes: [$reportTemplateCode]
      }
    ) {
      rows {
        nodes {
          ... on CrawlSiteSpeedAuditOpportunities {
            opportunityDigest
            element
            title
            auditId
            exampleUrl
            layoutShiftImpactAvg
            urlCount
            layoutShiftImpactSum
            nodeNodeLabel
            gaPageviewsSum
            savingsScoreSum
          }
        }
      }
    }
  }
}

Try in explorer