Skip to main content
SlapMyWeb
Slap a site

Performance fix

How to Fix a Page That Is Too Large

Bring total page weight down, usually images and JavaScript, so it loads on a real connection.

Difficulty
Easy
Impact
High
Time
1-2 hours

Before

hero.jpg    3.8 MB   (4000x3000, displayed at 800x600)
bundle.js   1.2 MB   (uncompressed)
Total:      5.4 MB

After

hero.avif   142 KB   (1600x1200, displayed at 800x600)
bundle.js   210 KB   (split + brotli)
Total:      480 KB
Before and after code for: How to Fix a Page That Is Too Large

A page that is too large takes too long to arrive, particularly on mobile data. Weight is almost always concentrated in two places: images that were never resized or converted, and JavaScript that ships whether or not it is used. Under 1.5 MB is a reasonable target for a content page.

Why it matters

Page weight translates directly into load time on the connections real visitors have. It also costs them money on metered data: and the largest pages are usually large by accident rather than by design.

How to fix it

  1. Find what the weight actually is

    Sort the network panel by size. In nearly every case one or two resources account for most of it, and knowing which changes what you do next.

  2. Fix the images

    Resize to the dimensions actually displayed, convert to WebP or AVIF, and compress. A hero photograph at 4000 pixels wide displayed at 800 is the most common single cause.

  3. Cut the JavaScript

    Split by route so a page loads only its own code, and check for a library imported whole for one function.

  4. Enable compression

    Serve text assets with Brotli or gzip. This is a server setting, not a code change, and it typically removes 70 percent of HTML, CSS and JavaScript weight.

The code

Beforetext
hero.jpg    3.8 MB   (4000x3000, displayed at 800x600)
bundle.js   1.2 MB   (uncompressed)
Total:      5.4 MB
Aftertext
hero.avif   142 KB   (1600x1200, displayed at 800x600)
bundle.js   210 KB   (split + brotli)
Total:      480 KB

On your platform

WordPress

Ensure the theme requests a sized thumbnail rather than the full-size upload, and add a plugin that converts to WebP on upload.

Next.js

next/image handles resizing and format negotiation. Setting the right sizes attribute is what makes it pick a sensible width.

Sources

More fixes

Performance

How to Minify Your CSS

Strip comments and whitespace from stylesheets to cut their size by 30-50%.

Performance

How to Minify Your JavaScript

Compress JS by removing comments, whitespace and shortening names: often a 40-60% reduction.

Performance

How to Lazy-Load Off-Screen Images

Defer images below the fold so they don't compete with the initial render.

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs, and links each one straight to its guide.

Run a free audit
Free foreverNo signupLive scan progress