Pages with Large Layout Shifts
Priority: Critical
Impact: Neutral
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
- Variables
- cURL
query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
getCrawl(id: $crawlId) {
reportsByCode(
input: {
reportTypeCodes: Basic
reportTemplateCodes: [$reportTemplateCode]
}
) {
rows {
nodes {
... on CrawlSiteSpeedAudits {
url
auditId
title
displayValue
metricSavingsCls
score
itemsCount
auditResult
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"layout_shift_elements_failed_audits"}
curl -X POST -H "Content-Type: application/json" -H "apollographql-client-name: docs-example-client" -H "apollographql-client-version: 1.0.0" -H "x-auth-token: YOUR_API_SESSION_TOKEN" --data '{"query":"query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) { getCrawl(id: $crawlId) { reportsByCode( input: { reportTypeCodes: Basic reportTemplateCodes: [$reportTemplateCode] } ) { rows { nodes { ... on CrawlSiteSpeedAudits { url auditId title displayValue metricSavingsCls score itemsCount auditResult } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"layout_shift_elements_failed_audits"}}' https://api.lumar.io/graphql