Page weight has increased at a steady rate since the start of the web as internet speeds have increased and websites have become more interactive and attractive. 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 influences page load times; the smaller the weight, the faster your site will load. The slower the internet connection, the more pronounced the effect. As noted above, 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 your CDN may charge you for data transfer costs; by reducing the size of your pages, you save money.
How big is too big?
Google says that to meet its best practice guidelines, you should be aiming 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?
There are several effective strategies to reduce your page weight. Here are some of the most impactful ones:
1. Optimise Images
Images are often the biggest contributors to page weight. Proper optimisation can drastically 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 good balance.
- Use Next-Gen Formats: Formats like WebP and AVIF offer superior compression compared to 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's no need to send a huge desktop image to a mobile phone. - Lazy Loading: Load images only when they are about to enter the viewport. This doesn't reduce the total page weight, but it significantly improves the initial load time.
2. Minify CSS, JavaScript, and HTML
Minification is the process of removing all unnecessary characters from source code without changing its functionality. This includes removing white space, comments, and line breaks. Many build tools (like Webpack) and CMS plugins can automate this process.
3. Enable Server-Side Compression
Enabling compression like Gzip or Brotli on your web server can dramatically reduce the size of the HTML, CSS, and JavaScript files sent to the browser. Brotli offers even better compression than Gzip and is supported by all modern browsers.
4. Leverage Browser Caching
By setting appropriate Cache-Control and Expires headers, you can instruct the browser to store files locally. This means that on subsequent visits, the user's browser can load the files from its local cache instead of re-downloading them, 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 that contain code that is never used. Use browser developer tools (like the Coverage tab in Chrome DevTools) to identify and remove this unused code. This process, often called "tree-shaking," can significantly shrink your file sizes.
6. Use a Content Delivery Network (CDN)
A CDN stores copies of your assets on servers located around the world. When a user visits your site, the assets are served from the server closest to them, reducing latency. Many CDNs also provide automatic optimisation features like image compression and minification.
Final Thoughts
Reducing page weight is a continuous effort, but the rewards are well worth it. A lighter, faster website not only provides a better experience for your users but also improves your search engine rankings and conversion rates. By implementing these strategies, you can put your website on a diet and reap the benefits of a leaner, faster online presence.
