Keeping It Small: Why Page Size Matters

In 2010, the average web page weighed 702 KB. These days, this number has more than quintupled, with the average web page coming in at 3804 KB (3.8 MB).¹ The big offender in this increase are images, which make up 54% of the average web page. However, the surge of JavaScript frameworks has had a significant impact as well, with the amount of JS being served multiplying four times between 2010 and 2017.

This size increase is not hard to understand. As we get access to more and more advanced technologies — not to mention higher quality images — it is only natural that page size will increase as well. However, it is important to be at least somewhat wary of this growth.

As developers, we are often eager to try every shiny new tool that crosses our path, and to constantly add new and exciting content to our websites. While this is not inherently a bad thing (if anything, I’d argue it’s a good thing), we should always consider the consequences of our actions and how they might affect our users. In this case, I’m talking about the effect of the ever increasing page size on user experience.

The current state of the internet

Most articles regarding page speed (closely related to page size) focus on users abandoning your website if it takes too long to load, and the effect of page speed on your SEO score. These are all valid reasons to speed up your website, but I’d like to offer another reason: by keeping your page size small, you prevent excluding users from accessing your website.

Before I explain this further, here’s a few facts regarding the current state of internet access throughout the world:

• There are currently 3.2 billion internet users. Of these users, only 1.1 billion, or 34%, have access to high-speed internet.²
• Thus, 2.1 billion internet users do not have access to any kind of high-speed internet.
• 40% of mobile internet users in India only have a 2G connection.³
• In Nigeria, watching a 2-minute video can be more expensive than sending a child to school for a month.⁴
• Families in poor areas in the United States are almost five times more likely not to have access to high-speed internet than the most affluent households.⁵

I think the common theme here is quite clear: a large portion of internet users do not have access to the kind of high-speed internet that we as developers often take for granted, both in underdeveloped and developed countries. In more practical terms: these are the kinds of users that literally cannot afford to load your fullscreen video background or your fancy JavaScript app built on top of a massive CSS library.

By not taking page size into consideration, you are indirectly making the decision to exclude a large group of people from ever accessing your website. I know this sounds harsh, but it’s true. As a firm believer in making websites accessible to as many people as possible, I think that this is quite a large problem, and something that developers do not pay enough attention to, either because they don’t know or because they don’t care.

By not taking page size into consideration, you are indirectly making the decision to exclude a large group of people from ever accessing your website.

How do we fix this?

Fortunately, in most cases it is not difficult to significantly reduce the page size of your website, which will not only ensure your website is available to a larger userbase but will also drastically improve the experience for all of your visitors. The purpose of this article is not to provide an all-encompassing guide to decreasing the page size of a website, since many people have already written extensively on this topic. Instead, I’d like to just list a few key takeaways — some things to ask yourself when building your next website:

Do I really need this?

The easiest way to decrease page size is to simply not use things that you don’t need. Take a critical look at all the assets, libraries and frameworks you are currently using and ask yourself if they’re really necessary.

Do you really need jQuery when all you have is a few simple buttons? Do you really need to include the entire Bootstrap library for a simple blog, and if you do, would it be possible to use a tool like PurifyCSS to only keep what is necessary? If you’re using a lot of images, would it make sense to swap out some images for text, which would not only decrease the page size but also make it easier for visually impaired users to access your content?

For example, I love Vue.js. I think it’s a fantastic framework that allows us to easily create complex interactive web apps. However, it would have made no sense to use Vue for my personal website, where all I really need are a few simple settings. Instead of including Vue (21 KB gzipped), I wrote a few lines of vanilla JavaScript (< 1 KB gzipped at the time of writing), which gave me everything I needed and significantly reduced the weight of my website.

Are my images optimized?

As I mentioned earlier, images are often the biggest offender when it comes to bloated page size. Fortunately, they are often the easiest problem to fix as well. When it comes to images, there are two main points you should always pay attention too:

1. Do my images have the right resolution?
2. Did I properly optimize my images?

The higher an image’s resolution, the bigger its file size will be. By itself, this is not a problem. The problem occurs when people use a high resolution image and scale it down, for example when using it as a thumbnail. On a page with a lot of images this can drastically increase the amount of time it takes to load the page. Fixing this is simple: when using images on your site, make sure their resolution matches their size on the page. In addition, you can use srcset to ensure an image’s resolution matches the screen size of the user (ie. serving a lower-resolution image to mobile visitors).

Optimizing images means removing invisible data (like EXIF metadata) and compressing them in order to reduce the file size without a noticeable loss in quality. My absolute favorite tool for this is ImageOptim, which is free. It’s easy to use and can make a huge difference — I’ve seen image sizes decrease by over 90%!

Other possible improvements

There’s a whole host of other changes that can be made to improve the performance and page size of your website. Since I’m trying not to turn this into a technical article I won’t go into any implementation details, but I’ve compiled a list of performance-related resources, grouped up into different categories:

Performance Resources

Conclusion

So there you have it! A (hopefully) compelling reason to speed up your website and a bunch of tips on how to do so. By utilizing the tips and resources outlined in this post, you should be able to significantly reduce the weight of your website and decrease load times, making your website accessible to a much wider audience. Thanks for reading!

[¹]: HTTP Archive: Interesting stats (Feb 1 2018)

[²]: World Development Report 2016: Digital Dividends

[³]: 40% of Mobile Internet Users In India Are Still Hooked Up to 2G Network

[⁴]: How To Make Internet Affordable

[⁵]: Rich people have access to high-speed Internet; many poor people still don’t

Originally published on my personal blog.