Skip to main content

Pages with Unoptimized Images

Priority: Critical

Impact: Neutral

What issues it may cause​

  • Slower Page Load Times: Large, unoptimized images increase the amount of data that needs to be downloaded, leading to longer page load times, especially on slower internet connections.

  • Increased Bandwidth Usage: Larger images consume more bandwidth, which can be particularly problematic for users with limited data plans or slow network speeds.

  • Higher Storage and Memory Usage: Unoptimized images can lead to higher storage usage on servers and increased memory consumption on client devices, impacting overall performance.

  • Poor User Experience: Slow-loading images can lead to a poor user experience, as users may become frustrated with the delay and abandon the page before it fully loads.

How do you fix it​

There are various ways to optimize images, including:

  • Use image CDNs: Image content delivery networks (CDN) can yield big savings in image file size.
  • Resize Images: Ensure that images are no larger than they need to be for their display size on the web page.
  • Compression: Use image compression tools to reduce file sizes without significantly affecting visual quality.
  • Correct Formatting: Use the most appropriate image format for your content. For example, use JPEG for photographs and PNG for images with transparency.
  • Lazy Loading: Implement lazy loading so images are only loaded as they enter the viewport (visible part of the web page), rather than all at once.
Learn more about optimizing images.

What is the positive impact​

  • Faster Page Load Times: Optimized images load faster, improving overall page load times and providing a better user experience.

  • Reduced Network Usage: By minimizing image file sizes, you can reduce network traffic and save bandwidth, benefiting users with limited data plans.

  • Lower Storage and Memory Consumption: Optimized images use less storage on servers and reduce memory usage on client devices, improving overall performance.

  • Improved User Experience: Faster loading images contribute to a smoother, more engaging user experience, which can lead to increased user satisfaction and retention.

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 CrawlSiteSpeedAudits {
            url
            auditId
            title
            displayValue
            savingsKib
            pageviews
            productOfSavingsKibAndPageviews
            itemsCount
            auditResult
          }
        }
      }
    }
  }
}

Try in explorer