# Pages with Large Network Payloads

**Priority**: Critical

**Impact**: Neutral

## What issues it may cause

<ul>
  <li>
    <strong>Slower Page Load Times:</strong> Heavy webpages with excessive byte weight can result in longer load times,
    particularly on slower network connections or devices with limited processing power.
  </li>
  <li>
    <strong>Increased Bounce Rates:</strong> Large resource sizes can contribute to slower page rendering, impacting
    user experience and potentially increasing bounce rates.
  </li>
  <li>
    <strong>Higher Bandwidth Costs:</strong> High total byte weight can consume significant bandwidth, leading to
    increased data usage for visitors accessing the website, especially on mobile devices with data caps.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Optimize and Compress Files:</strong> Optimize resource sizes by compressing images, minifying CSS and
    JavaScript files, and removing unnecessary code or resources.
  </li>
  <li>
    <strong>Use Efficient Formats:</strong> For images, using formats like WebP, which provides high-quality results at
    smaller file sizes compared to traditional formats like JPEG or PNG.
  </li>
  <li>
    <strong>Lazy Loading:</strong> Implement lazy loading techniques for images and other non-critical resources to
    defer their loading until they are needed.
  </li>
  <li>
    <strong>Minimize and Merge Resources:</strong> Combining multiple CSS or JavaScript files into a single file can
    reduce the number of HTTP requests needed for loading a page.
  </li>
  <li>
    <strong>Use CDNs:</strong> Utilize content delivery networks (CDNs) to distribute resources geographically closer to
    visitors, reducing latency and download times.
  </li>
</ul>
[Learn how to reduce payload size.](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/)

## What is the positive impact

<ul>
  <li>
    <strong>Improved Page Load Times:</strong> Optimizing total byte weight results in faster page load times, enhancing
    user experience and reducing bounce rates.
  </li>
  <li>
    <strong>Reduced Data Usage:</strong> By minimizing the size of resources, you can decrease the amount of data
    transferred, benefiting users with limited data plans.
  </li>
  <li>
    <strong>Enhanced Performance:</strong> Lighter webpages load more quickly and efficiently, leading to smoother
    interactions and improved overall performance.
  </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
              totalSizeKib
              auditResult
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

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