Skip to main content

Pages with Oversized Images

Priority: Critical

Impact: Neutral

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.

Learn more about how to set image dimensions.

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 GetReportStatForCrawl(
    $crawlId: ObjectID!
    $reportTemplateCode: String!
    $after: String
   ) {
      getReportStat(
        input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
      ) {
        crawlSiteSpeedAudits(after: $after, reportType: Basic) {
          nodes {
            url
            auditId
            title
            displayValue
            metricSavingsCls
            score
            itemsCount
            auditResult
          }
          totalCount
          pageInfo {
            endCursor
            hasNextPage
          }
        }
     }
   }

Try in explorer