Skip to content
Insights

Lighter websites

How to Reduce Website Page Weight Without Sacrificing Design

A lighter page loads faster and has a smaller estimated footprint, and it doesn't have to look plainer. Practical, design-friendly ways to cut images, video, fonts and scripts.

Sol Rudd6 min read

Most heavy web pages aren't heavy because of their design. They are heavy because of how the design is delivered: a photo exported at four times the size it is shown, a background video nobody watches, six font files for one typeface, or a chat widget that loads on every page. Fix the delivery and the page can look exactly the same while sending far less data. This guide is for website owners who want a lighter site without a redesign, with steps you can hand to your developer or do yourself.

Why page weight matters

Page weight is the total data transferred when someone opens your page. It is what GreenTracer measures, and it drives the carbon estimate. Using the Sustainable Web Design Model v4 (0.300 kWh per GB and a global average of 494 g CO₂e per kWh), the estimate scales directly with bytes:

  • A 2.5 MB page: 0.0025 × 0.300 × 494 = about 0.371 g CO₂e per visit, an F grade.
  • The same page at 1 MB: 0.001 × 0.300 × 494 = about 0.148 g, a C.
  • At 500 KB: 0.0005 × 0.300 × 494 = about 0.074 g, an A.

These are estimates, not meter readings, and our article on what a carbon test measures and what it cannot tell you explains the limits. But fewer bytes also help people on slow connections or limited data plans. Google's Lighthouse documentation suggests aiming to keep total byte size below 1,600 KiB and links large payloads with long load times and higher data costs for users.

Step 1: Find what is heavy

Don't start by guessing. Run your page through the GreenTracer checker to get its total weight, then look at the breakdown. Two free ways to see individual files:

  • In PageSpeed Insights, open the “Avoid enormous network payloads” audit. It lists the largest requests first.
  • In Chrome, open DevTools → Network, tick “Disable cache”, reload, and sort by size. Note which files come from your own domain and which come from other companies.

Often a handful of large files make up much of the total. Fixing those first is worth more than dozens of tiny tweaks.

Step 2: Serve the right image

Images are where design and weight meet most often, and where the easiest savings tend to be. Keep the photo; change how it is delivered.

  • Export at the size it is shown. A picture displayed 800 pixels wide doesn't need a 4,000-pixel original. Lighthouse flags this as properly size images.
  • Offer several sizes. With srcset and sizes, phones download a smaller file and large screens a bigger one. MDN's responsive images guide explains the markup, and most modern site builders and CMSs can generate it for you.
  • Use a modern format. WebP and AVIF usually produce smaller files than JPEG or PNG at similar visual quality. See web.dev on choosing the right image format. Use SVG for logos and icons.
  • Lazy-load images below the fold, not the hero. Adding loading="lazy" delays off-screen images until a visitor scrolls near them. web.dev warns not to lazy-load images visible when the page first loads, and to give every image width and height so the layout doesn't jump.

One caution about how GreenTracer counts: a lazy-loaded image that the test browser never scrolls to may not be downloaded during the test. That is fair to visitors who don't scroll, but it is not a reason to hide weight further down the page. Make those images lighter too.

Step 3: Be deliberate with video and animation

Video is often the heaviest thing on a page. You can keep motion without forcing every visitor to download it:

  • Replace autoplaying background video with a strong still image, and offer the video behind a play button for people who want it.
  • Swap animated GIFs for video. In web.dev's example, a 3.7 MB GIF became a 551 KB MP4 and a 341 KB WebM.
  • Use CSS for simple motion. Hover effects, fades and gentle transitions can be done in a few lines of CSS instead of a video or animation file.

Step 4: Keep fonts that carry the brand

Typography is part of your identity, so keep the typeface and reduce the files. web.dev's font best practices recommend:

  • Use WOFF2, the best-compressed web font format.
  • Load only the weights and styles your design actually uses.
  • Subset fonts to the characters you need, if the font licence allows it.
  • Consider the visitor's system font for body text and save your brand font for headings, which keeps the look while cutting files.

Step 5: Question every third-party embed

Analytics, ad tags, chat widgets, social feeds, maps and video players all count towards your page weight, even though you didn't write them. For each one, ask whether it is still used and whether it needs to be on every page.

  • Remove what nobody looks at. Old tracking tags and abandoned widgets are common.
  • Use a facade. Show a lightweight preview that loads the real embed only when clicked. Chrome's Lighthouse guide to facades shows a 3 KB YouTube placeholder standing in for a 540 KB player until the visitor interacts.
  • Load only where needed. A booking widget belongs on the booking page, not the blog.

web.dev's guide to efficiently loading third-party JavaScript has more techniques for your developer.

Step 6: Trim and compress code

  • Turn on text compression. Servers can send HTML, CSS and JavaScript compressed with gzip or Brotli. MDN's compression guide explains how. Many hosts and CDNs offer it as a setting.
  • Remove unused plugins and libraries. On WordPress and similar platforms, each plugin can add its own scripts and styles to every page.
  • Minify CSS and JavaScript as part of your build or with your platform's optimisation setting.

Caching is still worth setting up because it helps returning visitors. Just know that GreenTracer measures a first, uncached visit, so caching alone won't change your result.

Design choices that stay light

If you are planning a refresh, a few habits keep a page rich without making it heavy:

  • One strong hero image usually does more work than a six-slide carousel that loads every slide.
  • Colour, gradients, shapes and layout are created in CSS and cost very little to send.
  • Illustrations and icons in SVG stay crisp at any size and are often small.
  • Set a page-weight budget with your designer or agency, and check it before launch.

Hosting is a separate lever: a host listed as green by The Green Web Foundation lowers the estimate by about 18%, but lighter pages lower every part of it. Read green hosting and website carbon ratings: what each means for how the two fit together.

Check your page

Measure before you start and again after each change. Check your page with GreenTracer to see its page weight, estimated CO₂e per visit and grade, and see how the estimate is calculated.

Sources

All articles

Check your own site

See the estimated carbon of one page view on your page, its grade, and whether your host is listed as green. It's free.

Check a website
All articles in Lighter websites

Lighter websites6 min read

What a Website Carbon Test Measures, and What It Cannot Tell You

A website carbon test turns the data one page transfers into an estimate of emissions per visit. Here is what goes into that number, how to read it, and the questions it can't answer.

Read article