I talk a lot about web page size. But what does that mean? Let me explain and show you how you can check it yourself.
A web page’s size is the size of the files that are loaded to display the page. There can be a difference between the transferred size and the actual size of the files (unzipped, let’s say), but you can find more about this in the “making of” post.
There are 2 ways to check what the size of a web page is:
- Using an online tool
- Using your browser’s console
Let’s look at both in some detail.
Check it online
There are online tools to check a web page’s size. For example, you can do it using https://tools.pingdom.com. Type or paste in the URL of the page you want to check and there you go. You will get a lot of data, among which the size of the page.
I did this for this page and it gave me 23 kb. The exact values can differ between tools and the second method below. The differences will be relatively small, however, especially for large pages. You will have a good idea whether it is a small or large page.
Check it in your browser
This one is more complex and it can work differently depending on your browser. I guide you through the process though.
- First, let’s go incognito. You might have some extensions or add-ons in your browser that also load stuff. They are normally off in incognito mode.
- Right-click with the mouse and choose the option Inspect element or something similar. This will open an additional window or sidebar with information about the HTML structure of the web page.
- There are several tabs in the additional window. You need the one called Network. Be sure to disable the browser’s cache – normally, that is the default – so your browser will load everything cleanly.
- Refresh the page.
- On the bottom of the window you will find the result you have been looking for. There are probably 2 values, which can be the same depending on whether the transfer is happened in a special zipped format or not:
- Transfer size: this is the amount of files that is actually transferred. This is what you wanted to know, because this makes the most impact since this amount is transferred from the server.
- Size of the resources: This is the actual size of the files used to build the page.
This page’s size
Ok, this is kind of an inception, but I checked the transfer size of the files for this page in Google Chrome and it gave me 16 kb. In Firefox, it was 23 kb, and in Edge 13 kb. There can be significant differences, especially at small page sizes. Some browsers load some assets that others do not. Firefox loads, for example, 2 additional images to use them on its home screen for visited sites. Nevertheless, you get an idea about the page size, relative to the median of more than 2000 kb.
Some real-life examples
Now some real-life examples. I checked the transfer size for the homepage of 5 popular websites (and Greenpeace). I used the second method, using Google Chrome on a desktop computer without scrolling.
| 380 kb | |
| Youtube | 2400 kb |
| Amazon | 3600 kb |
| New York Times | 5800 kb |
| Time Magazine | 4100 kb |
| Greenpeace | 3200 kb |
Most pages are quite large.
Of course, they contain a lot of images and scripts, but even Google’s search page is 380 kb. This means that each time you visit google.com, 0.21 g of CO2e is released into the atmosphere. Find out more about the carbon emission of web pages and how you can make them smaller.
I let you do the math for the other, larger pages. This is why I believe that page size matters.
This page is loaded in about 36 kb.