How to reduce page size and HTTP requests

Every image, script, style and font is a separate download. Fewer and smaller files mean faster pages, especially on mobile networks.

Find what is heavy

Reduce it

  • Compress and resize images; use modern formats.
  • Remove unused plugins, scripts and styles.
  • Combine small icons into an icon font or SVG sprite.
  • Load third-party widgets (chat, social, video) only when needed.
  • Avoid large inline CSS. The inline CSS checker shows how much you have.

Site audits flag HTML larger than 200 KB as a warning.

A worked example

A home page loads 6 MB: three uncompressed hero images, a slider script, two web font families with six weights, a chat widget and three tracking scripts. After resizing and converting the images, removing the slider, keeping one font family with two weights and loading the chat widget only after interaction, the page drops to under 1.5 MB and loads several times faster on mobile.

Fonts

Each font weight is a separate file. Use as few families and weights as possible, and prefer modern WOFF2 files.

Plugins and themes

Many website plugins add their own scripts and styles to every page, even pages that do not use them. Remove plugins you do not need, and choose lightweight themes.

Measure before and after

Record page size and number of requests before you start, then after each change, so you know what made the difference.

0 comments

Leave a comment

Not shown publicly.