Page weight has increased steadily since the early web, as connection speeds improved and sites became more interactive and visually rich. The HTTP Archive shows over a 300% increase over the last 10 years.
1957.8 KB
▲318.6%
1791.9 KB
▲1137.5%
Why should I care?
Smaller page weight = Faster page load
Page weight directly affects page load times. The smaller the page, the faster your site can load. The slower the connection, the more obvious the effect. Faster page loads are associated with higher conversion rates, fewer bounces, and higher engagement with your site.
Smaller page weight = Less bandwidth = Savings
Your hosting provider or CDN may charge for data transfer. Reducing page size can reduce those costs.
How big is too big?
Google says that, to meet its best practice guidelines, you should aim for a page weight of 500 KB on mobile devices and a request count of fewer than 50.
What can I do to shrink my page weight?
Start with the bytes that browsers have to download, parse, and render.
1. Optimise Images
Images are often the biggest contributors to page weight. Careful optimisation can reduce their size without a noticeable loss in quality.
- Compression: Use image compression tools to reduce file sizes. For JPEGs, a quality setting of 75-85% is often a practical balance.
- Use Next-Gen Formats: Formats like WebP and AVIF compress better than older formats like JPEG and PNG. Modern browsers have wide support for them.
- Responsive Images: Use the
<picture>element orsrcsetattribute to serve different image sizes for different screen resolutions. There is no reason to send a large desktop image to a mobile phone. - Lazy Loading: Load images only when they are about to enter the viewport. This does not reduce total page weight, but it improves the initial load time.
2. Minify CSS, JavaScript, and HTML
Minification removes unnecessary characters from source code without changing its functionality. That includes white space, comments, and line breaks. Many build tools, including Webpack, and CMS plugins can automate this process.
3. Enable Server-Side Compression
Enabling compression like Gzip or Brotli on your web server can reduce the size of the HTML, CSS, and JavaScript files sent to the browser. Brotli offers better compression than Gzip and is supported by all modern browsers.
4. Leverage Browser Caching
Set appropriate Cache-Control and Expires headers so the browser can store files locally. On later visits, the user's browser can load those files from its local cache instead of downloading them again, making return visits much faster.
5. Remove Unused Code
Many websites, especially those built on complex themes or frameworks, load large CSS and JavaScript files with code that is never used. Use browser developer tools, such as the Coverage tab in Chrome DevTools, to identify and remove unused code. For JavaScript builds, this process is often called "tree-shaking," and it can significantly shrink your file sizes.
6. Use a Content Delivery Network (CDN)
A CDN stores copies of your assets on servers around the world. When a user visits your site, those assets are served from the server closest to them, reducing latency. Many CDNs also provide automatic optimisation features such as image compression and minification.
Final Thoughts
Reducing page weight is ongoing work. A lighter, faster website gives users less to wait for, improves search engine rankings and conversion rates, and reduces the amount of data you have to serve. Start with images, compression, caching, and unused code; those changes usually give you the clearest wins.
