The Growth of Web Page Size
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 are 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, 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 have come a long way since 1990 when the first web page was born. Since then, the size of websites have 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 2010 was 702 KB compared to in 2016 which is 2232 KB.
With the increase in size of every web component and the addition of video, web page size has increased by 1,530 KB or 317% from 2010 to 2016. As web pages evolve, they have seen a consistent increase in page size which has allowed them to perform greater tasks and be more visually appealing to the user.
Contributors to increased web page size
There are a few key contributors to the evolvement of increased website page size. The following section describes these components in greater detail.
The largest increase in web page size from 2010 to 2016 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.
- Validating online forms,
- Web page animation,
- Tracking information (e.g. Google Analytics, Facebook Pixel),
- Web-based games, etc.
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.
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 2016 account for 123 KB of an overall web page's size as compared to in 2010 when they accounted for merely 2 KB. Their widespread use is due to their ability to improve branding and user experience. However, the biggest disadvantage in 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 where 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 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 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 being used more and more to access the web. The chart below demonstrates the growth in terms of web usage of mobile devices compared to desktops (numbers are in millions).
As can be seen, just before 2014, the number of mobile users accessing the internet reached the same as desktop users and has since surpassed. 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.
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.