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
- Website page size checker for the HTML size.
- HTTP requests checker for the number of files.
- DOM size checker for overly complex pages.
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