Skip to content
Learn Measure Blog Case studies About
On this page
  • How the Lighthouse network payload audit fails
  • How to reduce payload size
  • Stack-specific guidance
    • Angular
    • Drupal
    • Joomla
    • WordPress
  • Resources

Avoid enormous network payloads

May 2, 2019 — Updated May 29, 2020
Available in: Español, 한국어, Português, Русский, 中文, English
Appears in: Performance audits
On this page
  • How the Lighthouse network payload audit fails
  • How to reduce payload size
  • Stack-specific guidance
    • Angular
    • Drupal
    • Joomla
    • WordPress
  • Resources

Large network payloads are highly correlated with long load times. They also cost users money; for example, users may have to pay for more cellular data. So, reducing the total size of your page's network requests is good for your users' experience on your site and their wallets.

To see what accessing your site costs around the world, check out WebPageTest's What Does My Site Cost? You can adjust the results to factor in purchasing power.

How the Lighthouse network payload audit fails #

Lighthouse shows the total size in kibibytes (KiB) of all resources requested by your page. The largest requests are presented first:

A screenshot of the Lighthouse Avoid enormous network payloads audit

Based on HTTP Archive data, the median network payload is between 1,700 and 1,900 KiB. To help surface the highest payloads, Lighthouse flags pages whose total network requests exceed 5,000 KiB.

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

How to reduce payload size #

Aim to keep your total byte size below 1,600 KiB. This target is based on the amount of data that can be theoretically downloaded on a 3G connection while still achieving a Time to Interactive of 10 seconds or less.

Here are some ways to keep payload size down:

  • Defer requests until they're needed. See the PRPL Pattern for one possible approach.
  • Optimize requests to be as small as possible. Possible techniques include:
    • Minify and compress network payloads.
    • Use WebP instead of JPEG or PNG for your images.
    • Set the compression level of JPEG images to 85.
  • Cache requests so that the page doesn't re-download the resources on repeat visits. (See the Network reliability landing page to learn how caching works and how to implement it.)

Stack-specific guidance #

Angular #

Apply route-level code splitting to minimize the size of your JavaScript bundles. Also, consider precaching assets with the Angular service worker.

Drupal #

Consider using Responsive Image Styles to reduce the size of images loaded on your page. If you are using Views to show multiple content items on a page, consider implementing pagination to limit the number of content items shown on a given page.

Joomla #

Consider showing excerpts in your article categories (e.g. via a "read more" link), reducing the number of articles shown on a given page, breaking your long posts into multiple pages, or using a plugin to lazy-load comments.

WordPress #

Consider showing excerpts in your post lists (e.g. via the "more" tag), reducing the number of posts shown on a given page, breaking your long posts into multiple pages, or using a plugin to lazy-load comments.

Resources #

Source code for Avoid enormous network payloads audit

Last updated: May 29, 2020 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.