Making Websites Small

A practical guide on reducing website size, improving load times, and optimizing user experience on slow networks.

Making Websites Small

Making Websites Small

It’s easy to forget how differently users experience the web. Developers browse on powerful desktops with fiber—but many real users load the same sites on underpowered phones over 3G or congested LTE.

I recently inspected a local law firm’s website that pulled in 19 MB of resources just to show basic contact information. Open your browser’s network tab, throttle to 3G, and load similar sites like “dentist near me” or “CPA near me”—you’ll watch seconds, sometimes dozens of seconds, tick by before anything meaningful appears.

Images Are the #1 Offender

Most websites can shrink by 70–95% simply by optimizing images. Ask yourself:

  • Do I need a 1200×1800 image when displaying it at 300×450?
  • Should this be a WEBP instead of PNG/JPG?

ImageMagick makes resizing effortless:

sudo apt-get install imagemagick
convert -resize 50% source.png dest.png

After resizing, convert to WEBP:

sudo apt-get install webp
cd /mywebapp/static/img/
mkdir webp
for file in *.{jpg,png,jpeg}; do cwebp -q 60 "$file" -o "webp/$file.webp"; done;

I’ve seen 3 MB PNGs shrink to 49 KB WEBPs—over a 98% reduction. Multiply this across multiple images and your page becomes dramatically lighter.

CSS, Fonts, and JavaScript

Some common questions to ask yourself:

  • Do you need a 150 KB icon font to display one 16×16 icon?
  • Do you need 500 KB of Google Maps JS to show a static map?
  • Is your CSS/JS minified?
  • Are you gzipping responses?
  • Are you loading Bootstrap for grid classes only?

Use static SVGs instead of huge font libraries. Use a lightweight WEBP image for maps instead of the Google Maps JS bundle. Minify everything. Serve only what you actually use.

Chrome DevTools Coverage (DevTools → Sources → Coverage) often reveals that 60–90% of loaded CSS/JS is unused.

Analytics Without Heavy Scripts

Tools like Google Tag Manager, Meta Pixel, or HotJar can add 300–800 KB of JavaScript. Most small businesses don’t need that level of tracking.

For search performance:

For simple visitor analytics, use server-side tools:

No frontend JavaScript required.

Less IS More

Many business sites recreate old MySpace problems: autoplay videos, huge hero carousels, chat popups, cookie prompts, location prompts… all before showing hours or a phone number.

A simpler layout improves performance, accessibility, and comprehension. Cleaner HTML makes it easier to score near 100% in Lighthouse accessibility.

And if you want bragging rights, see if your site qualifies for the 1MB Club.

Happy Hacking!

← Back to Blog