Table of Contents
Last update on
Update: March 2021
When it comes to web page weight, size matters. After all, the smaller the file size of a web page, the faster it’s going to load. It’s a no-brainer.
Page weight – aka page size or page bloat – refers to the overall size of a particular web page, including all of the files that are used to create the page: HTML documents, style sheets, images, scripts, and other media.
It’s yet another website metric to track, in addition to page speed, uptime, time to first byte, HTTP requests, etc.
But does it really matter? Is it a meaningful metric? And how should you reduce the page size and speed up your WordPress site?
Let’s take a look.
The Average Desktop Website in 2021 is 2038.4 kb
Back in the 1990s, websites were fairly basic and consisted of simple HTML files and small images (and under construction GIFs!). Nowadays, they’ve grown to include various HTML, CSS and JavaScript files, images, videos, fonts, and other file types.
The average web page size in 2010 was 467.7kb compared to 2038.4 kb in 2021, according to data collected by the HTTP Archive.
Incredibly, the size of mobile web pages has increased 336% since 2010, though I should point out that the HTTP Archive first started collecting mobile web page weight data in May 2011 – the average size of mobile web pages back then was 144.8kb.
As websites have evolved over the years, the average size of a web page has exponentially increased. Though there are a few caveats worth pointing out before we continue:
- There median size of web pages, as published by the HTTP Archive, is an average taken from a large dataset. Does it represent a “typical” website? Perhaps not. I mean, what even is a typical website?
- It’s best not to use these numbers from HTTP Archive as a benchmark for your own website. They’re historical trends.
- Some websites have actually shrunk over time. While some websites have gone full media in their approach, with video, fullscreen imagery, custom fonts and other design elements, others have embraced a more minimalist approach.
Video Makes Up 65.9% of Average Page Weight
For a long time, developers have been concerned about the size of images, and how much they account for total page size. But woah… Check out how videos have completely overtaken images:
Latest HTTP Archive data shows video now accounts for two-thirds of the average web page’s total size.
To put this into perspective, the average weight of videos was just 286.3kb for desktop in May 2016. Interesting, the median size of videos in 2021 is larger on mobile than desktop.
The use of video has exploded in recent years. More and more websites are using video headers and other media elements. According to WordStream, 87% of online marketers use video content, one-third of online activity is spent watching video, and over half of video content is viewed on mobile.
Custom Fonts Aren’t Going Anywhere
Webfonts are another contributor to page size, but as the stats show, their growth in popularity isn’t really something to worry about. In November 2010, fonts accounted for 59.2kb of total page size, compared to 132.1kb in January 2021.
Even more interesting is how the average number of HTTP requests for fonts great to four in 2015, dipped to three in 2016 and has remained steady back at four since 2017 – only the desktop went up to five. This could possibly be an indication that designers and developers have settled on an optimum number of web fonts.
Let’s Not Forget Scripts and Stylesheets
The average weight of JavaScript files continues to grow, increasing 316.4% since the end of 2010. The average number of HTTP requests for JavaScript has also increased.
CSS bytes have also risen steadily – the average in 2021 is 73.3kb from the desktop, and 68.7kb from the mobile.
Does Page Size Really Matter? Isn’t the Internet Getting Faster?
Just as a cyclists wear skin-tight clothing that’s aerodynamic, avoiding loose clothing that balloons out in the wind, developers should be keeping their sites as lean as possible so they can also perform at optimal speeds.
While page weight is just one of a number of website metrics and, quite frankly, shouldn’t be your number one priority, it’s still an important factor to consider since it does directly contribute to page speed.
Yes, the internet is getting faster. Browsers, caching, faster networks, CDNs and other technology are making the web faster for users. But this is no reason to let your website carry extra fat, so to speak.
Radware has been tracking the load times of the top 100 eCommerce sites since 2011 and has found that both load times and time-to-interact have suffered significantly. The cause? Page size and complexity. As pages become more bloated and complex other time, it continues a trend of typically slower load times.
How Big is the Ideal Web Page Size?
Web performance expert Tammy Everts recommends 1MB as the ideal size for fast-loading web pages. She goes on to write that many companies are aiming for 1MB for their pages as part of their performance budget.
For more on performance budgets, check out this great read by Brian Jackson.
What About Your Mobile Users?
I’ve covered perceived performance on this blog before, so you know all about how it’s possible to make websites still feel faster than they actually are in order to achieve user experience gains. But improving perceived performance isn’t always the answer, especially when it comes to mobile.
Mobile users who are dealing with bandwidth constraints and/or data limits simply don’t have the time or data allowance to download bloated websites, so your website needs to be as streamlined as possible for these users. Because if your site doesn’t load fast enough for them, they’ll simply leave your site.
The bandwidth and data limits of your users will vary from country to country, but there’s a great online calculator, What does My Site Cost, that can tell you the cost, in dollars, of your pages in locations around the world. It’ll open your eyes to how mobile users view your pages in first-world versus third-world countries.
6 Tips for Reducing Page Weight on WordPress
1. Optimize Images
Images are low-hanging fruit when it comes to improving page weight. Often, they are the files that take the longest to load on a web page but are relatively easy to optimize.
Start by taking the time to review your images and remove any that you don’t need. Then, compress them with an image optimization tool such as Imagify. This will remove unnecessary file information and help your image load faster.
Creating CSS sprites can further help reduce page weight. This technique lets you reduce multiple images into a single image. Then using CSS, you can manipulate the sprite and only display a specific part of it on the page. There are some great tools that can help with creating CSS sprites, such as SpriteMe.
Lazy loading images can also improve page load time, especially for mobile users – and it’s a feature that you can enable in WP Rocket.
Get WP Rocket now, and test the improvement right away!
2. Minify and Combine CSS and JavaScript Assets
Minifying and combining your site’s stylesheets and scripts can further streamline your resources and trim unnecessary code from your site. Not only does this help reduce page weight, but it can also reduce the number of HTTP requests it takes to load your site.
WP Rocket is the easiest way to minify and compress CSS and JS files in a few clicks. In fact, you can minify and combine your files under the “Static Files” tab. Check the files you want to minify and combine. Click “Save Changes” when you’re done.
3. Use a Content Delivery Network
Using a CDN can speed up how quickly your pages load for users in places that are a long way from where your server is located, i.e. international traffic. For more on how CDNs work, and to find the best one for you, check out WP Rocket’s guide, The Best Content Delivery Networks for WordPress.
CloudFlare, a popular CDN can be easily integrated with WP Rocket. To do this, go to the “CDN” tab in WP Rocket to enable CloudFlare and then add your account. For more, check out WP Rocket’s documentation on how to use CloudFlare with WP Rocket.
4. Leverage Browser Caching
If the user’s browser can cache static files, they won’t necessarily need to download them again the next time they visit your site. So make sure to enable browser caching for your site in WP Rocket. Browser caching is automatically applied for Apache servers, so there’s no need for users to carry out any additional steps. But those on NGINX servers can use Rocket-Nginx, an NGINX configuration that makes WP-Rocket even faster by serving static pages directly without loading WordPress or PHP.
5. Reduce Unnecessary Webfonts
Do you really need eight fonts on your website? Or will two do (one for headings and one for paragraph text) the job?
Typography is fundamental to good, modern web design – it improves readability, legibility, accessibility and contributes to branding. But it also comes at a performance cost as each font you use is an additional resource that visitors must download when visiting your site.
The jury’s out on exactly how many fonts is too many, though the general rule of thumb is that three’s a crowd and it’s best to stick with two.
6. Keep Your Site Lean
Less is more. If you’re no longer using a plugin, theme, webfont, script or other resources on your site, remove it. If you think you might need to later, you should still remove it – you can always add it back later.
Make sure to regularly monitor and review the resources on your website so you’re only using what you absolutely need and nothing more. Not only is this good practice for improved site performance, but also for website security.
There might be unused CSS rules clogging up your site, in which case you can use tools like Unused CSS or take advantage of the new WP Rocket to remove unused CSS in one click!.
Conclusion
Page weight is an important factor that directly impacts page speed. But it’s also just one critical website performance metric worth monitoring. So test your WordPress site performance to get an overall picture of page size before embarking on any of the tips above.
Keep in mind that the tips explained will also help you improve your performance score and the Core Web Vitals grades!
