The Growth of Web Page Size

Before we get into the relevance of web page size, we first need to clarify what is meant by web page size in the first place. A typical web page consists of several files, which can contain HTML, Javascript, CSS, image files, and other resources. From all these files, which are downloaded when the website is called up, the website size is ultimately derived.

Why is web page size important?

Web page size is an important factor to measure, as the bigger a page is, the longer it takes to download the required resources to display it (given all other factors are equal). As mentioned in many of our articles, such as Using a WooCommerce CDN Integration, an increase in loading time leads directly to a decrease in revenue for many ecommerce sites. Website visitors who experience a slow-loading website are also less likely to return, which affects your website's success whether you're a blogger or run an online shop.

As a myriad of devices is now being used to browse the web, their capabilities and compatibilities may differ. This can result in a website loading fine on Device A; however, it is sluggish on Device B. Being aware of your website page size and optimizing it to the best of your ability helps ensure that your site is running smoothly on all devices.

Web page sizes are quickly increasing

Websites had come a long way since 1990, when the first website was created with a web page size of around 4 KB. Since then, the size of websites has grown drastically through the addition of various images, CSS/JS files, videos, fonts, etc.

Based on the information provided by HTTP Archive, the average web page size in 2012 was 803 KB for desktop sites and 386 KB for mobile sites compared to 2022, which is 2,284 KB for desktop sites and 2,010 KB for mobile sites.

Over the past decade, web components have become larger and larger. In addition, browsers began to support images and later videos. This has resulted in the size of web pages increasing by 184% for desktop sites and an incredible 420% for mobile sites in the period between 2012 and 2022. As websites have evolved, page sizes have steadily increased, allowing them to perform larger tasks and be more visually appealing to users.

Contributors to increased web page size

There are a few key contributors to the evolution of the increased website page size. The following section describes these components in greater detail.

Images

The largest increase in web page size from 2012 to 2022 has been due to the use of images. Many websites now use much more imagery than what was used in the past. Take ecommerce shops, for example. With many products, multiple images per product, size variations, etc., each additional image contributes to the overall size of the web page. There are, however, services available such as Optimus, which compresses the image size while retaining the same image quality.

Emerging image formats such as WebP and FLIF also aim to further reduce the overall impact that images have on web page size.

JavaScript

JavaScript is an extremely important programming language in today's online ecosystem. Uses include:

• Validating online forms,
• Web page animation,
• Tracking information (e.g. Google Analytics, Facebook Pixel),
• Web-based games, etc.

JavaScript offers many uses that are regarded by most as an essential component to building a modern website. Although JavaScript offers some enticing benefits, it does come with a cost as far as the page size. With an average script size of 316 KB for a desktop site in 2022, this is an increase of 350 KB compared to an average desktop page in 2012. For mobile sites, it's an increase of 367 KB over the last decade. Being mindful of what your site's JavaScript is accomplishing and if there is any room to minimize the amount of JavaScript or minify the files is an important part of reducing page size.

Videos

The use of videos within websites has grown greatly over the past few years. With their ability to grab a visitor's attention and quickly get a point across, videos are used by many for training, marketing, and SEO purposes. Although videos only account for 7.7% of an average website's total page size in 2016, that's still 174 KB more than a website from 2010.

Fonts

Lastly, the use of fonts is another contributor to the increase in webpage size. With 57% of websites now using custom fonts, it is apparent that they have rapidly grown in popularity. Fonts for an average website in 2022 account for 144 KB of an overall web page's size as compared to 2012, when they accounted for merely 53 KB. Their widespread use is due to their ability to improve branding and user experience. However, the biggest disadvantage of using custom fonts is that they can affect your overall site speed. Optimizing font performance means choosing a font that loads quickly and is not overly cumbersome to page speed.

Read our article to learn more about Analyzing Web Font Performance.

The use of ads

Using ads on a web page can certainly contribute to the web page size and loading time of a site. Depending on the type of ad you may be displaying to the user (e.g. video, image, text), the time required to load each can quickly add up. The use of an ad blocker can help reduce the visibility of these ads and therefore, your browser will not request the resource and thus avoid loading and waiting for the ad to display.

However, in the event that an ad blocker is not being used, such as the case for many mobile users, the use of ads can greatly increase page load time and web page size. For instance, according to an article published by The New York Times, a news site such as boston.com takes 33 seconds to load and is 16.3 MB without ad blocker. However, with an ad blocker, the page takes 7 seconds to load and is only 3.5 MB.

When implementing ads on a website, it should be important to determine how this will impact the usability of the site due to its increased page size. If the effect is too great, you may consider changing the ad format so that it is not as large or even removing the ad completely.

Mobile devices and web page size

Mobile devices are increasingly being used to access the Internet. The chart below demonstrates the growth in terms of web usage of mobile devices compared to desktops over a period of the last ten years.

If we go back a decade, the share of mobile web traffic was a meager 10.88 percent, and desktops were used much more frequently to access the Internet. Five years later, in 2017, the share of mobile web traffic has already increased fivefold to 54.09 percent.

The growth rate has subsequently slowed significantly since 2017. Comparing the percentage of mobile web traffic, the average annual growth rate from 2012 to 2017 was 46 percent, compared to five percent from 2017 to 2022.

In October 2022, 59.4 percent of all web traffic was handled by cell phones.

This creates a few interesting hurdles when discussing web page size and its effect when browsing the web with a mobile device. For example according to lukew.com:

• 3G connections are 40% slower and 4G connections are 12% slower than the average desktop connection.
• From a sample of 347 sites, 86% of them delivered the same assets to all devices.

For mobile devices, this means that as the page size grows and is not optimized for mobile delivery, overall page speed will suffer. Optimizing a responsive website for mobile delivery means shrinking image file sizes and deciding whether or not to deliver certain aspects of the site to mobile users.

Summary

Optimizing a website can be achieved in many different ways, and it is important to first pinpoint website performance issues to see where you should begin optimizing. In many cases, in order to help reduce webpage size, it is recommended to begin with the optimization of images. According to our article Web Performance: 20+ Experts Share Their Advice and Mistakes, 46% of the experts said that the number one focus should be on image optimization.

This is no surprise since, as noted above, images account for the majority of an average web page's size. Reducing a website's page size by eliminating any unneeded scripts or frameworks, choosing a fast-loading font, and optimizing the delivery of images are crucial steps in increasing web page speed.