Oversized Images
Priority: Critical
Impact: Negative
What issues it may cause
Cumulative Layout Shift (CLS): Unsized images can cause the page's content to shift unexpectedly as images load, resulting in a higher CLS and potential user frustration.
Slow Rendering: Without reserved space, the browser must recalculate the layout as images load, which can delay the rendering of other content on the page.
How do you fix it
Specify Width and Height: Always include width and height attributes for each image in the HTML code to help the browser allocate space and improve layout stability.
Use Responsive Images: Use the srcset attribute for responsive images to provide different image sizes based on the user's device and screen size, ensuring optimal image display.
Optimize Image File Sizes: Reduce image file sizes using compression techniques to improve loading times and reduce the impact of unsized images on page performance.
What is the positive impact
- Lower CLS: Specifying dimensions for images helps reduce unexpected content shifts, leading to lower CLS.
Faster Rendering: With reserved space for images, the browser can render the page more quickly, enhancing user satisfaction.
Better User Experience: A more stable layout and faster rendering contribute to an improved and more predictable user experience.
Reduced Bandwidth Usage: Optimized images use less data, benefiting users with limited bandwidth and improving overall page speed.
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 GetReportStatForCrawl(
$crawlId: ObjectID!
$reportTemplateCode: String!
$after: String
) {
getReportStat(
input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
) {
crawlSiteSpeedAuditOpportunities(after: $after, reportType: Basic) {
nodes {
opportunityDigest
element
title
auditId
exampleUrl
urlCount
nodeNodeLabel
failedAuditsCount
warningAuditsCount
infoAuditsCount
}
totalCount
pageInfo {
endCursor
hasNextPage
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"unsized_images_failed_items"}
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 GetReportStatForCrawl( $crawlId: ObjectID! $reportTemplateCode: String! $after: String ) { getReportStat( input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode} ) { crawlSiteSpeedAuditOpportunities(after: $after, reportType: Basic) { nodes { opportunityDigest element title auditId exampleUrl urlCount nodeNodeLabel failedAuditsCount warningAuditsCount infoAuditsCount } totalCount pageInfo { endCursor hasNextPage } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"unsized_images_failed_items"}}' https://api.lumar.io/graphql