# Pages with Offscreen Images

**Priority**: Critical

**Impact**: Neutral

## What issues it may cause

<ul>
  <li>
    <strong>Increased Load Times:</strong> Loading all images, including those offscreen, during the initial page load
    can significantly slow down the page rendering time. This delay affects the perceived performance and user
    experience, as users have to wait longer for the content they can actually see to load.
  </li>
  <li>
    <strong>Excessive Bandwidth Usage:</strong> Loading offscreen images consumes additional network bandwidth, which is
    inefficient, especially for users on slower connections or with limited data plans. This unnecessary data transfer
    can result in higher costs for mobile users.
  </li>
  <li>
    <strong>High Memory Consumption:</strong> Processing and storing all images, including those not immediately needed,
    can increase memory usage. This is particularly problematic on devices with limited resources, leading to slower
    performance and potential crashes.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Prioritize Critical Images:</strong> Load images that are immediately visible to the user first, and defer
    non-critical images until later
  </li>
  <li>
    <strong>Implement Lazy Loading:</strong> Use lazy loading techniques to defer loading offscreen images until they
    are about to enter the viewport. This can be achieved through native HTML attributes (loading="lazy") or JavaScript
    libraries designed for lazy loading.
  </li>
  <li>
    <strong>Optimize Image Delivery:</strong> Ensure that images are appropriately sized and compressed. Using modern
    image formats like WebP can reduce file sizes while maintaining quality.
  </li>
</ul>
[Learn more about deferring images.](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images/)

## What is the positive impact

<ul>
  <li>
    <strong>Faster Page Load Times:</strong> By loading only the images that are visible in the initial viewport, the
    page can render much faster, enhancing the user experience.
  </li>
  <li>
    <strong>Reduced Network Usage:</strong> Lazy loading offscreen images minimizes unnecessary data transfer,
    conserving bandwidth and reducing load times, particularly beneficial for mobile users.
  </li>
  <li>
    <strong>Lower Memory Consumption:</strong> Deferring the loading of offscreen images helps keep memory usage low,
    which is critical for maintaining performance on devices with limited resources.
  </li>
</ul>

## 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:


```graphql
query GetReportStatForCrawl(
      $crawlId: ObjectID!
      $reportTemplateCode: String!
      $after: String
     ) {
        getReportStat(
          input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
        ) {
          crawlSiteSpeedAudits(after: $after, reportType: Basic) {
            nodes {
              url
              auditId
              title
              displayValue
              savingsKib
              pageviews
              productOfSavingsKibAndPageviews
              itemsCount
              auditResult
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

**Variables:**
```json
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"offscreen_images_failed_audits"}
```