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

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?

Do I really need this?

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?

  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

Performance Resources

Conclusion

[¹]: 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.

Front-end web developer from Amsterdam, focusing on performance and accessibility.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store